[TOC]

一、DOM操作：见https://www.yuque.com/tqpuuk/yrrefz/zzwumg
二、下图描述了对象间链接
image.png

在最顶层：documentElement和body

一、最顶层的树节点可以直接作为document的属性来使用：
1、 =
最顶层的document节点是document.documentElement。这是对应标签的DOM节点。
2、 = document.body
元素——document.body
3、 = document.head
标签可以通过document.head访问。
二、document.body的值可能是null。在DOM的世界中，null意味着“不存在”或者“没有这个节点”
1、脚本无法访问在运行时不存在的元素。
2、如果一个脚本是在中，那么脚本是访问不到document.body元素的，因为浏览器还没有读到它。
【实例1】第一个alert显示null

<html>
<head>
  <script>
      alert('From HEAD: ' + document.body) // null, 这里目前还没有<body>
  </script>
</head>
<body>
  alert('From BODY:' + document.body) // HTMLBodyElement, 现在存在了
</body>
</html>

子节点：childNodes, firstChild, lastChild

一、术语
1、子节点 / 子
对应的是直系的子元素。换句话说，它们被完全嵌套在给定的元素中。
【实例1】和就是元素的子元素。
2、子孙元素
嵌套在给定元素中的所有元素，包括子元素，以及子元素的子元素等。
【实例1】有子元素

和
    （以及一些空白的文本节点）。 元素的子孙元素不仅包含直接的子元素
    和
      ，还包含像
    • （
        的子元素）和 （
      • 的子元素）这样的元素 — 整个子树。

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

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

        二、childNodes集合列出了所有子节点，包括文本节点
        【实例1】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>

        1、运行上面的例子，所显示的最后一个元素是