HTML DOM 教程

HTML DOM节点树

HTML DOM将一个HTML文档视为一棵节点树(node-tree)。

节点树上的所有节点互相紧密联系。

HTML DOM 节点树

HTML DOM 将一个HTML文档看成是树形结构的，这个树形结构被称为节点树(node-tree)。

通过节点树可以访问所有的节点。他们的内容可以被修改或删除，同时也可以创建新的元素。

下面的节点树显示了节点的放置位置，以及他们之间的联系。节点树从根节点开始，直至延伸到位于节点树最底端的Text文本节点

HTML DOM节点树

父节点-子节点-兄弟节点

节点树中的各个节点之间是一个阶梯式的关系：Node Parents, Children, Siblings。

parent, child和sibling是用来描述节点之间的关系的术语。父节点parent nodes包含了子节点children。和Children同一个级别的就称为siblings(兄弟或姐妹)。

  • 在节点树中，最顶端的节点被称为根。
  • 除了根节点外的任何节点，都有且仅有一个父节点。
  • 一个节点可以有任意多个子节点。
  • 节点树的叶子，即节点树的最外端没有子节点children。
  • 兄弟节点Siblings拥有同一个父节点parent。

下面这张图解释了节点树的一部分和节点之间的联系：

HTML DOM节点树

请看下面的HTML代码片段。

<html>
<head>
<title>DOM 教程</title>
</head>
<body>
<h1>DOM 节点树</h1>
<p>Hello world!</p>
</body>
</html>

上面的HTML代码，首先看父节点：

  • <html>节点是根节点，它没有父节点。
  • <head> 和 <body>的父节点是同一个，即<html>节点。
  • 文本节点(text node)："Hello world!"的父节点是<p>节点。

同样，现在我们看子节点：

  • <html>节点有两个子节点，它们是<head> 和 <body>。
  • <head>节点有一个子节点，即<title>节点。
  • <title>节点同样有一个子节点，即text文本节点“DOM 教程”。
  • <h1>和<p>节点是兄弟节点Siblings，同时都是<body>的子节点。

First Child - Last Child

在上面的HTML代码中。

  • <head> 原始是<html>元素的第一个子节点 first child, <body>元素是<html>原始的最后一个子节点last child。
  • <h1>元素是 <body>元素的第一个子节点first child, <p>元素是<body>元素的最后一个子节点last child。

HTML DOM 节点 HTML DOM 节点  HTML DOM 方法HTML DOM 方法 HTML DOM 方法