How does JavaScript traverse child elements with Element Traversal new attributes

This article is about how JavaScript traverses child elements with the new Element Traversal attribute. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

1. ChildNodes attribute traversal

Traversing child elements is usually traversed through the childNodes attribute, but this attribute contains blank nodes, which is particularly inconvenient if you just want to traverse the Element element.

Take a look at the following code example:

Duan Luoyi

Duan Luoer

Duan Luo San

Let childList = document.querySelector (".article") .childNodes; console.log (childList); / / console output: / / NodeList (7) 1

View the results in the console:

Traverse the child element blank node:

The child elements obtained contain blank text nodes, which are line breaks, indents, spaces, and so on.

If you want to traverse the p element in childList, this is often the case in practice

Then you need to determine that the child element is of type Element:

Let childList = document.querySelector (".article"). ChildNodes;// traverses child elements childList.forEach ((item, index) = > {if (item.nodeType = = 1) {/ / judge to be Element type console.log (item);}}); / / console output: / / 3 p elements 2, Element series attribute traversal

Element Traversal adds five attributes to the DOM element:

1. The number of childElementCount child elements (nodeType=1).

2. FirstElementChilde points to the child element of the first Element type.

3. LastElementChilde points to the child element of the last Element type.

4. PreviousElementSibling points to the element of the previous sibling Element type.

5. NextElementSibling points to the next sibling element of type Element.

Traversing Element elements is much more convenient with these new attributes

Take the above as an example:

/ / get the first element let currentElement = document.querySelector (".article"). FirstElementChild;// traverses the child element while (currentElement) {console.log (currentElement); / / gets the next element currentElement = currentElement.nextElementSibling;}

This makes it more concise to deal with.

These properties are currently supported by IE9 and above, as well as by all modern browsers.

Thank you for reading! This is the end of this article on "how JavaScript uses Element Traversal's new attributes to traverse sub-elements". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!