Node
Node 是一个接口，各种类型的 DOM API 对象会从这个接口继承。它允许我们使用相似的方式对待这些不同类型的对象；比如，继承同一组方法，或者用同样的方式测试。（这里的Node可以理解为一个虚拟DOM）
属性
Node.baseURI 只读
返回一个表示 base URL 的DOMString。不同语言中的 base URL 的概念都不一样。 在 HTML 中，base URL 表示协议和域名，以及一直到最后一个'/'之前的文件目录。
返回一个包含了该节点所有子节点的实时的NodeList。NodeList 是动态变化的。如果该节点的子节点发生了变化，NodeList对象就会自动更新。
返回该节点的第一个子节点Node，如果该节点没有子节点则返回null。
返回该节点的最后一个子节点Node，如果该节点没有子节点则返回null。
返回或设置当前节点的值。
返回一个当前节点 Node的父节点 。如果没有这样的节点，比如说像这个节点是树结构的顶端或者没有插入一棵树中， 这个属性返回 null。
返回一个当前节点的父节点 Element 。 如果当前节点没有父节点或者说父节点不是一个元素 (Element), 这个属性返回 null。
返回一个当前节点同辈的前一个节点 ( Node) ，或者返回 null（如果不存在这样的一个节点的话）。
返回或设置一个元素内所有子节点及其后代的文本内容。
方法
将指定的 childNode 参数作为最后一个子节点添加到当前节点。
如果参数引用了 DOM 树上的现有节点，则节点将从当前位置分离，并附加到新位置。
在当前节点下增加一个子节点 Node，并使该子节点位于参考节点的前面。
移除当前节点的一个子节点。这个子节点必须存在于当前节点中。
对选定的节点，替换一个子节点 Node 为另外一个节点。
Element
常用总结
向指定元素添加HTML
innerHTML
Element.innerHTML 属性设置或获取 HTML 语法表示的元素的后代。
语法
const content = element.innerHTML; element.innerHTML = htmlString;
注：该方法会更改元素内的所有HTML
如果要向一个元素中插入一段 HTML，而不是替换它的内容，那么请使用 insertAdjacentHTML() 方法。
insertAdjacentHTML
| adjacent | 英[əˈdʒeɪsnt] | 相邻; 邻近的; 与…毗连的; |
|---|
insertAdjacentHTML() 方法将指定的文本解析为 Element 元素，并将结果节点插入到 DOM 树中的指定位置。它不会重新解析它正在使用的元素，因此它不会破坏元素内的现有元素。这避免了额外的序列化步骤，使其比直接使用 innerHTML 操作更快。
element.insertAdjacentHTML(position, text);
| 参数名 | 参数含义 | 可选值/类型 | 值释义 |
|---|---|---|---|
| position | 一个 DOMString，表示插入内容相对于元素的位置，并且必须是以下字符串之一 | beforebegin | 元素自身的前面。 |
| afterbegin | 插入元素内部的第一个子节点之前。 | ||
| beforeend | 插入元素内部的最后一个子节点之后。 | ||
| afterend | 元素自身的后面。 | ||
| text | 是要被解析为 HTML 或 XML 元素，并插入到 DOM 树中的 DOMString。 | 字符串类型 |
appendChild
Node.appendChild() 方法将一个节点附加到指定父节点的子节点列表的末尾处。如果将被插入的节点已经存在于当前文档的文档树中，那么 appendChild() 只会将它从原先的位置移动到新的位置（不需要事先移除要移动的节点）。
element.appendChild(aChild)
aChild，要追加给父节点（通常为一个元素）的节点。
// 创建一个新的段落元素 <p>，然后添加到 <body> 的最尾部
var p = document.createElement("p");
document.body.appendChild(p);
