[TOC]

DOM 让我们可以对元素和它们中的内容做任何事，但是首先我们需要获取到对应的 DOM 对象。
对 DOM 的所有操作都是以 document 对象开始。它是 DOM 的主“入口点”。从它我们可以访问任何节点。
这里是一张描述对象间链接的图片，通过这些链接我们可以在 DOM 节点之间移动。
dom-links.svg

在最顶层：documentElement 和 body

最顶层的树节点可以直接作为 document 的属性来使用：

= document.documentElement
最顶层的 document 节点是 document.documentElement。这是对应 标签的 DOM 节点。

= document.body
另一个被广泛使用的 DOM 节点是 元素 — document.body。

= document.head
标签可以通过 document.head 访问。

这里有个问题：document.body 的值可能是 null 脚本无法访问在运行时不存在的元素。 尤其是，如果一个脚本是在 中，那么脚本是访问不到 document.body 元素的，因为浏览器还没有读到它。 所以，下面例子中的第一个 alert 显示 null：

<html>

<head>
  <script>
    alert( "From HEAD: " + document.body ); // null，这里目前还没有 <body>
  </script>
</head>

<body>

  <script>
    alert( "From BODY: " + document.body ); // HTMLBodyElement，现在存在了
  </script>

</body>
</html>

在 DOM 的世界中，null 就意味着“不存在” 在 DOM 中，null 值就意味着“不存在”或者“没有这个节点”。

子节点：childNodes，firstChild，lastChild

从现在开始，我们将使用下面这两个术语：

  • 子节点（或者叫作子） — 对应的是直系的子元素。换句话说，它们被完全嵌套在给定的元素中。例如， 和 就是 元素的子元素。
  • 子孙元素 — 嵌套在给定元素中的所有元素，包括子元素，以及子元素的子元素等。

例如，这里 有子元素

和
    （以及一些空白的文本节点）：

    <html>
<body>
  <div>Begin</div>

  <ul>
    <li>
      <b>Information</b>
    </li>
  </ul>
</body>
</html>

    …… 元素的子孙元素不仅包含直接的子元素

    和
      ，还包含像
    • （
        的子元素）和 （
      • 的子元素）这样的元素 — 整个子树。
        childNodes 集合列出了所有子节点，包括文本节点。
        下面这个例子显示了 document.body 的子元素：

        <html>
<body>
  <div>Begin</div>

  <ul>
    <li>Information</li>
  </ul>

  <div>End</div>

  <script>
    for (let i = 0; i < document.body.childNodes.length; i++) {
      alert( document.body.childNodes[i] ); // Text, DIV, Text, UL, ..., SCRIPT
    }
  </script>
  ...more stuff...
</body>
</html>

        请注意这里的一个有趣的细节。如果我们运行上面这个例子，所显示的最后一个元素是