DOM 是 JavaScript 操作网页的接口，全称为“文档对象模型”（Document Object Model）。
浏览器会根据 DOM 模型，将结构化文档（比如 HTML 和 XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口。
节点
DOM 的最小组成单位叫做节点（node）。
节点的类型有七种。
- Document：整个文档树的顶层节点 9
- Element：网页的各种HTML标签（比如<body>、<a>等） 1
- Text：标签之间或标签包含的文本 3
- Attribute：网页元素的属性（比如class="right"）2
- DocumentType：doctype标签（比如<!DOCTYPE html>）10
- Comment：注释 8
- DocumentFragment：文档的片段（性能优化，面试考点） 11
Node接口
所有DOM节点对象都继承了Node接口，拥有一些共同的属性和方法。这是DOM操作的基础。
Node.prototype.childNodes
注意，除了元素节点，childNodes属性的返回值还包括文本节点和注释节点。如果当前节点不包括任何子节点，则返回一个空的NodeList集合。由于NodeList对象是一个动态集合，一旦子节点发生变化，立刻会反映在返回结果之中。
回车属于文本节点。
Node.prototype.textContent
textContent属性返回当前节点和它的所有后代节点的文本内容。
该属性是可读写的，设置该属性的值，会用一个新的文本节点，替换所有原来的子节点。它还有一个好处，就是自动对 HTML 标签转义。这很适合用于用户提供的内容。
innerText和textContent有什么区别？
- textContent 会获取所有元素的内容，包括 <script> 和 <style> 元素，然而 innerText 不会。
- innerText 受 CSS 样式的影响，并且不会返回隐藏元素的文本，而textContent会。
- 由于 innerText 受 CSS 样式的影响，它会触发重排（reflow），但textContent 不会。
NodeList接口，HTMLCollection接口
两者主要区别，NodeList可以包含各种类型的节点，HTMLCollection只能包含HTML元素节点。
NodeList接口
通过以下方法可以得到NodeList实例。
- Node.childNodes
- document.querySelectorAll()等节点搜索方法
NodeList实例很像数组，可以使用length属性和forEach方法。但是，它不是数组，不能使用pop或push之类数组特有的方法。
如果NodeList实例要使用数组方法，可以将其转为真正的数组。
var children = document.body.childNodes
vat nodeArray = Array.prototype.slice.call(children)
注意，NodeList 实例可能是动态集合，也可能是静态集合。所谓动态集合就是一个活的集合，DOM 删除或新增一个相关节点，都会立刻反映在 NodeList 实例。目前，只有Node.childNodes返回的是一个动态集合，其他的 NodeList 都是静态集合。
querySelectAll返回的虽然是NodeList集合，但实际上是元素集合，并且是静态的。
HTMLCollection接口
HTMLCollection是一个节点对象的集合，只能包含元素节点（element），不能包含其他类型的节点。它的返回值是一个类似数组的对象，但是与NodeList接口不同，HTMLCollection没有forEach方法，只能使用for循环遍历。
返回HTMLCollection实例的，主要是一些Document对象的集合属性，比如document.links、document.forms、document.images等。
HTMLCollection实例都是动态集合，节点的变化会实时反映在集合中。
document.referrer
document.referrer属性返回一个字符串，表示当前文档的访问者来自哪里。
document.referrer
// "https://example.com/path"
如果无法获取来源，或者用户直接键入网址而不是从其他网页点击进入，document.referrer返回一个空字符串。
document.referrer的值，总是与 HTTP 头信息的Referer字段保持一致。
但是，document.referrer的拼写有两个r，而头信息的Referer字段只有一个r。
网友评论