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)