[TOC]

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

在最顶层：documentElement 和 body

= document.documentElement
最顶层的 document 节点是 document.documentElement。这是对应 标签的 DOM 节点。
= document.body
另一个被广泛使用的 DOM 节点是 元素 — document.body。
= document.head
标签可以通过 document.head 访问。

子节点：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>

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