节点层次

DOM 可以将任何 HTML 描绘成一个由多层节点构成的结构。节点分为 12 种不同类型,每种类型分别表示文档中不同的信息及标记。每个节点都拥有各自的特点、数据和方法,也与其他节点存在某种关系。节点之间的关系构成了层次,而所有页面标记则表现为一个以特定节点为根节点的树形结构。

DOM结构

先看看下面代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>DOM</title>
</head>
<body>
<h2><a href="https://github.com">javascript DOM</a></h2>
<p>对HTML元素进行操作,可添加、改变或移除css样式等</p>
<ul>
<li>JavaScript</li>
<li>DOM</li>
<li>CSS</li>
</ul>
</body>
</html>

将 HTML 代码分解为 DOM 节点层次图:

DOM结构图

HTML 文档可以说由节点构成的集合,DOM 节点由:

  1. 元素节点:上图中 <html><body><p> 等都是元素节点,即标签
  2. 文本节点:向用户展示的内容,如 <li>...</li> 中的 JavaScript、DOM、CSS 等文本
  3. 属性节点:元素属性,如 <a> 标签的链接属性 href="https://github.com"

文档节点是每个文档的根节点。在这个例子中,文档节点只有一个字节点,即 <html> 元素,我们称之为文档元素。文档元素是文档的最外层元素,文档中的其他所有元素都包含在文档元素中。每个文档只能有一个文档元素。在 HTML 页面中,文档元素始终都是 <html>元素。在 XML 中,没有预定义的元素,因此任何元素都可能成为文档元素。

DOM 节点类型

每一段标记都可以通过树中的一个节点来表示: HTML 元素通过元素节点表示,特性(Attribute)通过特性节点表示,文档类型通过文档类型节点表示,而注释则通过注释节点表示。总共 12 种节点类型,这些类型都继承自一个基类型。

数值常量节点类型说明nodeNamenodeValue
1Element元素节点元素名null
2Attr属性节点属性名称属性值
3Text文本节点#text节点的内容
4CDATASectionCDATA 节点#cdata-section节点的内容
5EntityReference实体引用名称节点实体引用名称null
6Entity实体名称节点实体名称null
7ProcessingInstruction处理指令节点target节点的内容
8Comment注释节点#comment注释文本
9Document文档节点#documentnull
10DocumentType文档类型节点文档类型名称null
11DocumentFragment文档片段节点#documentnull
12NotationDTD 声明节点符号名称null