回想一下第 12 章中提到的语法树。其结构与浏览器文档的结构极为相似。每个节点使用children引用其他节点,而每个子节点又有各自的children。其形状是一种典型的嵌套结构,每个元素可以包含与其自身相似的子元素。

如果一个数据结构有分支结构,而且没有任何环路(一个节点不能直接或间接包含自身),并且有一个单一、定义明确的“根节点”,那么我们将这种数据结构称之为树。就 DOM 来讲,document.documentElement就是其根节点。

在计算机科学中,树的应用极为广泛。除了表现诸如 HTML 文档或程序之类的递归结构,树还可以用于维持数据的有序集合,因为在树中寻找或插入一个节点往往比在数组中更高效。

一棵典型的树有不同类型的节点。Egg 语言的语法树有标识符、值和应用节点。应用节点常常包含子节点,而标识符、值则是叶子节点,也就是没有子节点的节点。

DOM中也是一样。元素(表示 HTML 标签)的节点用于确定文档结构。这些节点可以包含子节点。这类节点中的一个例子是document.body。其中一些子节点可以是叶子节点,比如文本片段或注释。

每个 DOM 节点对象都包含nodeType属性,该属性包含一个标识节点类型的代码(数字)。元素的值为 1,DOM 也将该值定义成一个常量属性document.ELEMENT_NODE。文本节点(表示文档中的一段文本)代码为 3(document.TEXT_NODE)。注释的代码为 8(document.COMMENT_NODE)。

因此我们可以使用另一种方法来表示文档树:

树 - 图1

叶子节点是文本节点,而箭头则指出了节点之间的父子关系。