js 基础学习 遍历DOM

DOM这块知识很重要，做个总结吧！
DOM 表示文档对象模型，每个HTML标签都是一个对象，标签内的文本也是对象，所有这些对象都可以使用 js 来访问和修改。
js 共有12 种节点类型
通常用到的有四种：

• document — DOM 的“入口点”。
• 元素节点 — HTML 标签，树构建块。
• 文本节点 — 包含文本。
• 注释 — 有时我们可以将一些信息放入其中，它不会显示，但 JS 可以从 DOM 中读取它。

自动修正

如果浏览器遇到格式不正确的HTML，它会在形成DOM的时候修正它。
例如，顶级标签永远是html，即使它不存在于文档中，它也会出现在DOM中，因为浏览器会创建它，例如
在html文档里写以下代码并运行。

<p>Hello
<li>Mom
<li>and
<li>Dad

除此之外，table 永远有 tbody ，即使文档中没有，浏览器创建DOM 时，也会自动创建。
DOM 让我们可以操作文档里的元素和它们的内容，对DOM 的操作的入口点是document，从它我们可以访问任何节点。
document.documentElement 表示最顶层 html，body 是 document.body
注意：如果js 写在head里，document.body 可能为null ，因为浏览器还没有读到它。

子节点：childNodes，firstChild，lastChild

子节点是直系的子元素，
子孙元素不仅包括直系子元素，还包括了子元素的子元素，该节点下的所有的元素。
childNodes 集合列出了所有子节点，包括文本节点。当前document 下有两个子节点
firstChild 和 lastChild 属性是访问第一个和最后一个子元素的快捷方式。
打开开发者工具直接测试

DOM集合

正如上面，childNodes 得到的结果像是一个数组，但其实它不是数组，而是一个集合，一个类数组的可迭代对象。
我们可以使用 for of 去迭代它

for (let node of document.body.childNodes) {
   
  alert(node); // 显示集合中的所有节点
}

这是因为集合是可迭代的（提供了所需要的 Symbol.iterator 属性）。
但无法使用数组方法，因为它不是一个数组。
注意： 不要使用 for in 去遍历集合，for…in 循环遍历的是所有可枚举的（enumerable）属性。集合还有一些“额外的”很少被用到的属性，通常这些属性也是我们不期望得到的。
兄弟节点
上一个兄弟节点：previousSibling
下一个兄弟节点：nextSibling
父节点： parentNode

举例：table 元素

访问元素还有一种很便利的方式，直接通过id 访问，但如果在js 中出现同名的变量，就不能使用此id 访问元素了。
获取table 之后：
table.rows 表示<tr> 的集合
table.tBodies — 表示<tbody> 元素的集合（即使table中没有也可以访问到）。
table.caption/tHead/tFoot — 引用元素 <caption>，<thead>，<tfoot>。
<thead&g