How to use js Element Traversal to standardize element traversal

This time I will show you how to use js Element Traversal to standardize element traversal, and what are the precautions for using js Element Traversal to standardize element traversal. The following is a practical case, let's take a look.

For spaces between elements, document nodes will not be returned before IE9.

All other browsers will return document nodes.

In order to be compatible with the differences between browsers without changing the existing DOM standard, the Element Traversal specification was created.

This specification adds 5

attributes to the element

childElementCount

firstElementChild
lastElementChild
previousElementSibling
nextElementSibling

Detailed official documentation; http://www.w3.org/TR/ElementTraversal/

For spaces between elements, versions prior to IE9 will not return text nodes, while other browsers will treat spaces as text. Node returns. This leads to inconsistent

behavior when using the properties of childNodes and firstChild. In order to make up for this difference while keeping the DOM specification unchanged, the W3C Element Traversal specification defines a new set of properties.

Element Traversal API adds the following 5 attributes to DOM elements:

• childElementCount: Returns child elements (excluding text nodes and

  comments) number.

• firstElementChild: Points to the first child element.

• lastElementChild: Points to the last child element.

• previousElementSibling: Points to the previous sibling element.

• nextElementSibling: Points to the next sibling element.

Supported browsers add these attributes to DOM elements. Using these elements, you don’t have to worry about blank text nodes, so you can find DOM elements very conveniently.

Here is an example. In the past, when you wanted to traverse all sub-elements of an element across browsers, you needed to write code like this:

var i,len,child = element.firstChild;
while(child != element.lastChild){
 if(child.nodeType == 1){
  processChild(child);
 }
 child = child.nextSibling;
}

When using Element Traversal

to add attributes, the code will change It is very concise:

var i,len,child = element.firstElementChild;
while(child != element.lastElementChild){
 processChild(child);
 child = child.nextElementSibling;
}

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to use bootstrap in vue-cli project

How to operate Node.Js to generate Bitcoin address

The above is the detailed content of How to use js Element Traversal to standardize element traversal. For more information, please follow other related articles on the PHP Chinese website!