一、节点树


节点树 概念

  - HTML DOM 将 HTML 文档视作树结构

  - 文档中的元素、属性、文本、注释等都被看作一个节点

  - 这种结构被称为节点树:

wKioL1b9BcfCOHtyAACDlPJvDM4426.png


上下层节点

  - 节点树中的节点彼此拥有层级关系,DOM 使用如下属性遍历整棵节点树:

wKiom1b9BZvixdt-AABJpn_wKlc919.png


平行的节点

  - 节点树中使用如下方法访问平行的兄弟节点:

wKiom1b9BcjBG_VQAAAtVZgUNV8177.png


二、元素树


元素树 概念

  - 元素树是节点树的一个子集,只包含其中的元素节点

wKiom1b9BgyDSD3KAABxoI2Jouo849.png


上下层元素

  - 与节点树一样,元素树上的元素节点也有父子关系,使用如下属性可以获取这些关系:

wKioL1b9Bx2hJcVLAABm5ndfpl4870.png

平行的元素

  - 元素树使用如下属性访问平行的元素:

wKioL1b9B1uRMqeIAAAxWy-LyC0066.png

三、文档的遍历


文档的遍历

  - 为了遍历上述文档中的每个元素,可以先从其根元素开始:

wKiom1b9BwTSmhf0AAB2Ox34Itk674.png

  - 遍历整棵文档树,可以使用方法的递归调用


总结:本章内容主要介绍了  JavaScript DOM 文档结构和遍历(节点树、元素树、文档的遍历)