DOM

文档对象模型 (DOM) 是 HTML 和 XML 文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将 web 页面和脚本或程序语言连接起来。

一个 web 页面是一个文档。这个文档可以在浏览器窗口或作为 HTML 源码显示出来。但上述两个情况中都是同一份文档。文档对象模型（DOM）提供了对同一份文档的另一种表现，存储和操作的方式。DOM 是 web 页面的完全的面向对象表述，它能够使用如 JavaScript 等脚本语言进行修改。

常用API

document

getElementById

1	var element = document.getElementById(id);

**element**是一个 Element 对象。如果当前文档中拥有特定 ID 的元素不存在则返回 null。
**id**是大小写敏感的字符串，代表了所要查找的元素的唯一 ID。

getElementsByTagName

1	var elements = document.getElementsByTagName(name);

elements 是一个由发现的元素出现在树中的顺序构成的动态的 HTML 集合 HTMLCollection (但是，这个方法在 WebKit 内核的浏览器中返回一个 NodeList ）。
name 是一个代表元素的名称的字符串。特殊字符 “*” 代表了所有元素。

createElement

1	var element = document.createElement(tagName[, options]);

tagName 指定要创建元素类型的字符串。
options 一个可选的参数ElementCreationOptions 是包含一个属性名为 is 的对象，该对象的值是用 customElements.define() 方法定义过的一个自定义元素的标签名。
返回值：新建的元素（Element）。

Node

appendChild

1	element.appendChild(aChild)

aChild：要追加给父节点（通常为一个元素）的节点。
返回值：返回追加后的子节点（aChild），除非 aChild 是一个文档片段（DocumentFragment），这种情况下将返回空文档片段（DocumentFragment）。

cloneNode

1	var dupNode = node.cloneNode(deep);

node：将要被克隆的节点
dupNode：克隆生成的副本节点
deep ：可选，是否采用深度克隆，如果为 true，则该节点的所有后代节点也都会被克隆，如果为 false，则只克隆该节点本身。在最新的规范里，其默认值为 false。

insertBefore

在参考节点之前插入一个拥有指定父节点的子节点。如果给定的子节点是对文档中现有节点的引用，insertBefore() 会将其从当前位置移动到新位置（在将节点附加到其他节点之前，不需要从其父节点删除该节点）。

若要保留已在文档中的被插入节点，在将该节点追加到新父节点之前，可以使用 Node.cloneNode() 复制节点。

1	var insertedNode = parentNode.insertBefore(newNode, referenceNode);

insertedNode ：被插入节点 (newNode)
parentNode ：新插入节点的父节点
newNode ：用于插入的节点
referenceNode： newNode 将要插在这个节点之前

如果 referenceNode 为 null 则 newNode 将被插入到子节点的末尾。

nodeValue

返回或设置当前节点的值。

1 2	str = node.nodeValue; node.nodeValue = str;

value 是一个包含当前节点的值的字符串（如果有的话）。

innerText

表示一个节点及其后代的“渲染”文本内容。

1 2	var renderedText = HTMLElement.innerText; // 获取的文本有层次结构 HTMLElement.innerText = string;

只展示给人看的元素（不包括 script 和 style 元素）；受 CSS 样式的影响，并且不会返回隐藏元素的文本。

修改innerText 会删除它的所有子节点，替换为给定的文本节点，\n被替换为 <br>元素。

textContent

属性表示一个节点及其后代的文本内容。

可获取所有元素的内容，包括 script 和 style 元素

1 2	let text = someNode.textContent; // 获取的文本没有层次结构 someOtherNode.textContent = string;

在节点上设置 textContent 属性的话，会删除它的所有子节点，并替换为一个具有给定值的文本节点。

使用 textContent 可以防止 XSS 攻击。

Element

innerHTML

设置或获取 HTML 语法表示的元素的后代。

1 2	const content = element.innerHTML; element.innerHTML = htmlString;

setAttribute

1	element.setAttribute(name, value);

name：表示属性名称的字符串。
value：属性的值/新值。

getAttribute

1	let attribute = element.getAttribute(attributeName);

attribute 是一个包含 attributeName 属性值的字符串。
attributeName 是你想要获取的属性值的属性名称。

addEventListener

window

onload

load 事件在整个页面及所有依赖资源如样式表和图片都已完成加载时触发。它与 DOMContentLoaded 不同，后者只要页面 DOM 加载完成就触发，无需等待依赖资源的加载。

该事件不可取消，也不会冒泡。

当页面完全加载后在控制台打印一段信息：

1
2
3

window.addEventListener('load', (event) => {
  console.log('page is fully loaded');
});

也可以使用 onload 事件处理器属性实现：

1
2
3

window.onload = (event) => {
  console.log('page is fully loaded');
};