Element Traversal implements element traversal in detail
This time I will bring you a detailed explanation of Element Traversal's implementation of element traversal. What are the precautions for Element Traversal's implementation of 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 elements
childElementCount firstElementChild lastElementChild previousElementSibling nextElementSibling
For spaces between elements, versions before IE9 will not return text nodes, while other browsers will Whitespace is returned as text nodes. 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 have added 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 Very concisely:
var i,len,child = element.firstElementChild; while(child != element.lastElementChild){ processChild(child); child = child.nextElementSibling; }
The browsers that support the Element Traversal specification are: IE9, Firfox3.5, Safari4, Chrome and Opera10.
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 implement the diff algorithm in React
Vue implements two-way data binding function (with code)
The above is the detailed content of Element Traversal implements element traversal in detail. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

Methods for element.style to modify elements: 1. Modify the background color of the element; 2. Modify the font size of the element; 3. Modify the border style of the element; 4. Modify the font style of the element; 5. Modify the horizontal alignment of the element. Detailed introduction: 1. Modify the background color of the element, the syntax is "document.getElementById("myElement").style.backgroundColor = "red";"; 2. Modify the font size of the element, etc.

Java is a popular programming language with powerful file handling capabilities. In Java, traversing a folder and getting all file names is a common operation, which can help us quickly locate and process files in a specific directory. This article will introduce how to implement a method of traversing a folder and getting all file names in Java, and provide specific code examples. 1. Use the recursive method to traverse the folder. We can use the recursive method to traverse the folder. The recursive method is a way of calling itself, which can effectively traverse the folder.

Example of using PHPglob() function: Traverse all files in a specified folder In PHP development, it is often necessary to traverse all files in a specified folder to implement batch operation or reading of files. PHP's glob() function is used to achieve this requirement. The glob() function can obtain the path information of all files that meet the conditions in the specified folder by specifying a wildcard matching pattern. In this article, we will demonstrate how to use the glob() function to iterate through all files in a specified folder

Conceptual differences: Iterator: Iterator is an interface that represents an iterator that obtains values from a collection. It provides methods such as MoveNext(), Current() and Reset(), allowing you to traverse the elements in the collection and operate on the current element. Iterable: Iterable is also an interface, representing an iterable object. It provides the Iterator() method, which returns an Iterator object to facilitate traversing the elements in the collection. Usage: Iterator: To use Iterator, you need to first obtain an Iterator object, and then call the MoveNext() method to move to the next

How to use the os module to traverse files in a directory in Python3.x In Python, we can use the os module to operate files and directories. The os module is an important module in the Python standard library, providing many operating system-related functions. In this article, we will explain how to use the os module to iterate through all files in a directory. First, we need to import the os module: importos Next, we can use the os.walk() function to walk the directory.

As a commonly used data structure, binary trees are often used to store data, search and sort. Traversing a binary tree is one of the very common operations. As a simple and easy-to-use programming language, Python has many methods to implement binary tree traversal. This article will introduce how to use Python to implement pre-order, in-order and post-order traversal of a binary tree. Basics of Binary Trees Before learning how to traverse a binary tree, we need to understand the basic concepts of a binary tree. A binary tree consists of nodes, each node has a value and two child nodes (left child node and right child node

We get the integer values used to form the linked list. The task is to first insert and then traverse the singly linked list using recursive method. Add node recursively at the end if head is NULL → add node to head otherwise add to head (head → next) recursively traverse nodes if head is NULL → exit otherwise print (head → next) Example input −1-2-7-9 -10 output outputstrong>− linked list: 1→2→7→9→10→NULL input−12-21-17-94-18 output− linked list: 12→21→17→94→18→NULL used in the following program The method is as follows In this method, we will use the function to add nodes and traverse the singly linked list and pass

Introduction to IteratorIterator is an interface in Java for traversing collections. It provides a set of methods that allow you to access elements in a collection in a sequential manner. You can use Iterator to iterate over collection types such as List, Set, and Map. Demo code: Listlist=newArrayList();list.add("one");list.add("two");list.add("three");Iteratoriterator=list.iterator();while(iter
