JavaScript DOM-4 document structure and traversal (node tree, element tree, document traversal)

One, node tree

Node Tree concept

-HTML DOM View HTML document as a tree structure

-Elements, attributes, text, comments, etc. in a document are treated as a node

-This structure is called the node tree:

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M00/7E/58/wKioL1b9BcfCOHtyAACDlPJvDM4426.png "title=" Web.png "alt=" Wkiol1b9bcfcohtyaacdlpjvdm4426.png "/>

Top and Bottom nodes

-Nodes in the node tree have hierarchical relationships with each other, and the DOM uses the following attributes to traverse the entire tree of nodes:

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M00/7E/5C/wKiom1b9BZvixdt-AABJpn_wKlc919.png "title=" Web.png "alt=" Wkiom1b9bzvixdt-aabjpn_wklc919.png "/>

Parallel nodes

-The following methods are used to access parallel sibling nodes in the node tree:

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M01/7E/5C/wKiom1b9BcjBG_VQAAAtVZgUNV8177.png "title=" Web.png "alt=" Wkiom1b9bcjbg_vqaaatvzgunv8177.png "/>

Second, Element tree

Element Tree Concept

-The element tree is a subset of the node tree and contains only the element nodes

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M02/7E/5C/wKiom1b9BgyDSD3KAABxoI2Jouo849.png "title=" Web.png "alt=" Wkiom1b9bgydsd3kaabxoi2jouo849.png "/>

Top and bottom elements

-As with the node tree, the element nodes on the element tree also have parent-child relationships, which can be obtained using the following properties:

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M00/7E/58/wKioL1b9Bx2hJcVLAABm5ndfpl4870.png "title=" Web.png "alt=" Wkiol1b9bx2hjcvlaabm5ndfpl4870.png "/>

elements that are parallel

-the element tree accesses parallel elements using the following properties:

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M01/7E/58/wKioL1b9B1uRMqeIAAAxWy-LyC0066.png "title=" Web.png "alt=" Wkiol1b9b1urmqeiaaaxwy-lyc0066.png "/>

III. Traversal of documents

Traversal of documents

-to iterate through each element in the preceding document, start with its root element:

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/7E/5C/wKiom1b9BwTSmhf0AAB2Ox34Itk674.png "title=" Web.png "alt=" Wkiom1b9bwtsmhf0aab2ox34itk674.png "/>

-Traverse Entire document tree, you can use recursive invocation of method

Summary: This chapter focuses on the JavaScript DOM document structure and traversal (node tree, element tree, document traversal)

This article from the "Technical Exchange" blog, declined reprint!

JavaScript DOM-4 document structure and traversal (node tree, element tree, document traversal)