How to use js Element Traversal to standardize element traversal-JS Tutorial-php.cn

How to use js Element Traversal to standardize element traversal

php中世界最好的语言

Release： 2018-06-02 14:41:39

Original

1417 people have browsed it

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;
}

Copy after login

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;
}

Copy after login

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!