Learn how to use JavaScript's new Element Traversal property to traverse child elements

Previously, child elements could be traversed using the childNodes property or firstChild, but it was necessary to determine whether the child element was an ELement element.

Later, W3C defined a new set of attributes for traversal through the Element Traversal specification, which eliminates the need for judgment and is very convenient.

1. ChildNodes attribute traversal

Child elements are usually traversed through the childNodes property, but this property will contain blank nodes, which is very inconvenient if you only want to traverse Element element.

Please see the following code example:

<div class="article">

    <p>Paragraph 1</p>

    <p>Paragraph 2</p>

    <p>Paragraph Three</p>

</div>

 

<script type="text/javascript">

    let childList = document.querySelector(".article").childNodes;

    console.log(childList);

    // Console output:

    // NodeList(7) 1

</script>

Console view effect:

Traverse the child element blank node:

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

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

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

let childList = document.querySelector(".article").childNodes;

// Traverse the child elements childList.forEach((item, index) => {

    if (item.nodeType == 1) { // Check if it is of Element type console.log(item);

    }

});

 

// Console output:

// 3 p elements

2. Element series attribute traversal

Element Traversal adds five properties to DOM elements:

• 1. childElementCount : the number of child elements ( nodeType=1 ).
• 2. firstElementChilde points to the first child element of type Element .
• 3. lastElementChilde points to the last child element of type Element .
• 4. previousElementSibling points to the previous sibling element of type Element .
• 5. nextElementSibling points to the next sibling element of type Element .

With these new attributes, it is much easier to traverse Element elements.

Still taking the above example:

// Get the first element let currentElement = document.querySelector(".article").firstElementChild;

// Traverse child elements while (currentElement) {

    console.log(currentElement);

    // Get the next element currentElement = currentElement.nextElementSibling;

}

This makes the process more concise.

Currently IE9 and above, as well as all modern browsers, support these properties.

This is the end of this article about using JavaScript to use the new Element Traversal Element Traversal attribute to traverse child elements. For more related content JavaScript please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!