DOM 节点导航

使用 HTML DOM，您可以使用节点关系导航节点树。

使用 HTML DOM，您可以使用节点关系导航节点树。

DOM 节点

根据 W3C HTML DOM 标准，HTML 文档中的所有内容都是一个节点：

  • 整个文档是一个文档节点
  • 每个 HTML 元素都是一个元素节点
  • HTML 元素内的文本是文本节点
  • 每个 HTML 属性都是一个属性节点（已弃用）
  • 所有评论都是评论节点

使用 HTML DOM，可以通过 JavaScript 访问节点树中的所有节点。

可以创建新节点，并且可以修改或删除所有节点。

节点关系

节点树中的节点相互之间具有层次关系。

术语父节点、子节点和兄弟节点用于描述节点之间的关系。

  • 在节点树中，顶部节点称为根（或根节点）
  • 除了根节点没有父节点，每个节点只有一个父节点
  • 一个节点可以有多个子节点
  • 兄弟节点是具有相同父节点
<html>
  <head>
    <title>DOM Tutorial</title>
  </head>

  <body>
    <h1>DOM Lesson one</h1>
    <p>Hello world!</p>
  </body>
</html>

从上面的 HTML 中，您可以阅读：

  • <html> 是根节点
  • <html> 没有父节点
  • <html> 是 <head> 和 <body> 的父节点
  • <head> 是 <html> 的第一个子节点
  • <body> 是 <html> 最后一个子节点
  • <head> 有一个子节点： <title>
  • <title> 有一个子节点（一个文本节点）：“DOM Tutorial”
  • <body> 有两个子节点：<h1> 和 <p>
  • <h1> 有一个子节点： “DOM Lesson one”
  • <p> 有一个子节点： “Hello world!”
  • <h1> 并且 <p> 是兄弟节点

在节点之间导航

可以使用以下节点属性在节点之间导航：

  • parentNode
  • childNodes[_nodenumber_]
  • firstChild
  • lastChild
  • nextSibling
  • previousSibling

子节点和节点值

DOM 处理中的一个常见错误是期望元素节点包含文本。

：

<title id="demo">DOM Tutorial</title>

元素节点 <title>（在上面的例子中）不不包含文本。它包含一个值为“DOM Tutorial”的文本节点。

文本节点的值可以通过节点的 innerHTML 属性访问 ：

myTitle = document.getElementById("demo").innerHTML;

访问 innerHTML 属性与访问第一个子节点的 nodeValue 属性相同：

myTitle = document.getElementById("demo").firstChild.nodeValue;

访问第一个子节点也可以这样完成：

myTitle = document.getElementById("demo").childNodes[0].nodeValue;

以下 3 个示例都是将 <h1> 元素中的文本复制到 <p> 元素中：

<html>
  <body>
    <h1 id="id01">My First Page</h1>
    <p id="id02"></p>

    <script>
      document.getElementById("id02").innerHTML = document.getElementById("id01").innerHTML;
    </script>
  </body>
</html>

<html>
  <body>
    <h1 id="id01">My First Page</h1>
    <p id="id02"></p>

    <script>
      document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;
    </script>
  </body>
</html>

<html>
  <body>
    <h1 id="id01">My First Page</h1>
    <p id="id02">Hello!</p>

    <script>
      document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;
    </script>
  </body>
</html>

在本教程的示例中，我们经常使用 innerHTML 属性来检索 HTML 元素的内容，但是，学习上述其他方法对于理解树结构和 DOM 导航很有用。

DOM 根节点

有两个特殊属性很有用：

  • document.body - 返回 body 节点
  • document.documentElement - 返回完整的文档对象
<html>
  <body>
    <h2>JavaScript HTMLDOM</h2>
    <p>Displaying document.body</p>

    <p id="demo"></p>

    <script>
      document.getElementById("demo").innerHTML = document.body.innerHTML;
    </script>
  </body>
</html>

<html>
  <body>
    <h2>JavaScript HTMLDOM</h2>
    <p>Displaying document.documentElement</p>

    <p id="demo"></p>

    <script>
      document.getElementById("demo").innerHTML = document.documentElement.innerHTML;
    </script>
  </body>
</html>

nodeName 属性

nodeName 属性返回节点的名称。

  • nodeName 是只读的
  • 元素节点的 nodeName 与标签名称相同
  • 属性节点的 nodeName 是属性名称
  • 文本节点的 nodeName 始终为 #text
  • 文档节点的 nodeName 始终为 #document
<h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
  document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName;
</script>

!! 注意： nodeName 始终返回 HTML 元素的大写的标记名称。

nodeValue 属性

nodeValue 属性用于操作节点的值。

  • 元素节点的 nodeValue 是 null
  • 文本节点的 nodeValue 是文本本身
  • 属性节点的 nodeValue 是属性值

nodeType 属性

nodeType 属性是只读的，它返回代表节点的类型的数字。

<h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
  document.getElementById("id02").innerHTML = document.getElementById("id01").nodeType;
</script>

常用的 nodeType 属性包括：

节点类型 值 例子
元素节点 1 <h1 class="heading">W3Schools</h1>
属性节点 2 class="heading" (已废弃)
文本节点 3 W3Schools
注释节点 8 <!-- This is a comment -->
文档节点 9 HTML 文档本身 (<html> 的父节点)
文档类型节点 10 <!Doctype html>

类型 2 在 HTML DOM 中已弃用（但有效），它在 XML DOM 中没有被弃用。

DOM 事件监听器 DOM 节点操作