1. 什么是DOM
1.1 DOM
DOM 是一棵树（tree）；
树上有 Node
Node 分为 Document（html）、Element（元素）和 Text（文本），以及其他不重要的。
查看
console.dir(document.body)打印的结果发现：document.body 是一个 hash/object；原型链如下：
body.__proto__:HTMLBodyElement.prototype；
HTMLBodyElement.__proto__:HTMLElement.prototype；
HTMLElement.__proto__:Element.prototype；
Element.__proto__:Node.prototype；
Node.__proto__:EventTarget.prototype；
EventTarget__proto__:Object.prototype；
页面中的节点 通过上图中 构造函数（Element、Text、.....） 构造出对应的对象----这就是DOM的主要功能。
2. Node 的接口
2.1 属性
childNodes,firstChild,innerText,lastChild,nextSibling,nodeName,nodeType,nodeValue,outerText,ownerDocument,parentElement,parentNode,previousSibling,textContent
妈的记不住。
如果记不住就背下以下单词：
- child / children / parent
- node
- first / last
- next / previous
- sibling / siblings
- type
- value / text / content
- inner / outer
- element
然后互相组合。
属性实例：
-
childNodes 与 children
image.png
查看上图的例子发现，childNodes 有15项，而 children 只有7项；childNodes 比 children 多出来几项 text 节点。查看这些 text 节点的 data 发现都是 回车 ；
区别：
childNodes 获取的是所有 子节点；此API来自于 Node；
children 获取的是所有 子标签；此API来自于Element ；
另外：概述
Node.childNodes 返回包含指定节点的子节点的集合，该集合为即时更新的集合（live collection）。即为是动态集合。所谓动态集合就是一个活的集合，DOM树删除或新增一个相关节点，都会立刻反映在NodeList接口之中。
-
firstChild、lastChild 与 firstElementChild、lastElementChild
区别同上，
firstChild--- 获取的是第一个 子节点；此API来自于 Node；
firstElementChild--- 获取的是第一个 子标签；此API来自于Element ；
lastChild--- 获取的是最后一个 子节点；此API来自于 Node；
lastElementChild--- 获取的是最后一个 子标签；此API来自于Element ；
image.png -
previousSibling、nextSibling 与 previousElementSibling、nextElementSibling
区别同上，
previousSibling--- 获取目标节点的前一个 兄弟节点；此API来自于 Node；
previousElementSibling--- 获取目标节点的前一个 兄弟标签；此API来自于Element ；兼容性较差；
nextSibling--- 获取目标节点的后一个 兄弟节点；此API来自于 Node；
nextElementSibling--- 获取目标节点的后一个 兄弟标签；此API来自于Element ；兼容性较差；
image.png -
nodeName
所有获取的 nodeName 都是大写的，除了 svg 标签；
image.png
nodeName 中有2点需要注意：
1、获取 html 标签的 nodeName 方式不是document.nodeName，而是document.documentElement.nodeName；
2、获取的 svg 标签的 nodeName 不是大写，而是小写的；
- nodeType
只读属性 Node.nodeType 表示的是该节点的类型。
描述
语法
var type = node.nodeType;
返回一个整数，其代表的是节点类型。其所有可能的值请参考 节点类型常量.
节点类型常量：
| 常量 | 值 | 描述 |
|---|---|---|
| Node.ELEMENT_NODE | 1 | 一个 元素 节点，例如 <p> 和 <div>。 |
| Node.TEXT_NODE | 3 |
Element 或者 Attr 中实际的 文字
|
| Node.PROCESSING_INSTRUCTION_NODE | 7 | 一个用于XML文档的 ProcessingInstruction ，例如 <?xml-stylesheet ... ?> 声明。 |
| Node.COMMENT_NODE | 8 | 一个 Comment 节点。 |
| Node.DOCUMENT_NODE | 9 | 一个 Document 节点。 |
| Node.DOCUMENT_TYPE_NODE | 10 | 描述文档类型的 DocumentType 节点。例如 <!DOCTYPE html> 就是用于 HTML5 的。 |
| Node.DOCUMENT_FRAGMENT_NODE | 11 | 一个 DocumentFragment 节点 |
那么，document 到底是不是 html？？？？？？
根据上图来看：document 应该是 HTML 的爸爸。。。。
重点：DocumentFragment-----日后再说........
- ownerDocument
Node.ownerDocument 只读属性会返回当前节点的顶层的 document 对象。
使用场景：当有多个 html 标签时，比如有 iframe 标签时；
-
parentElement 和 parentNode
parentElement 和 parentNode 这两个属性获取的值一样，而且都来自 Node；
image.png
- textContent 和 innerText
Node.textContent 属性表示一个节点及其后代的文本内容
描述:
- 如果 element 是 Document，DocumentType 或者 Notation 类型节点，则
textContent返回null。如果你要获取整个文档的文本以及CDATA数据，可以使用document.documentElement.textContent。- 如果节点是个CDATA片段，注释，ProcessingInstruction节点或一个文本节点，
textContent返回节点内部的文本内容（即 nodeValue）。- 对于其他节点类型，
textContent将所有子节点的textContent合并后返回，除了注释、ProcessingInstruction节点。如果该节点没有子节点的话，返回一个空字符串。- 在节点上设置
textContent属性的话，会删除它的所有子节点，并替换为一个具有给定值的文本节点
与innerText的区别：
Internet Explorer 引入了node.innerText。意图类似，但有以下区别：
textContent会获取所有元素的内容，包括<script>和<style>元素，然而 **innerText **不会。innerText受 CSS 样式的影响，并且不会返回隐藏元素的文本，而textContent会。- 由于
innerText受 CSS 样式的影响，它会触发重排（reflow），但textContent不会。与 textContent 不同的是, 在 Internet Explorer (对于小于等于 IE11 的版本) 中对 innerText 进行修改， 不仅会移除当前元素的子节点，而且还会永久性地破坏所有后代文本节点（所以不可能再次将节点再次插入到任何其他元素或同一元素中）。
与innerHTML的区别：
正如其名称，innerHTML返回HTML文本。通常，为了在元素中检索或写入文本，人们使用innerHTML。但是，textContent通常具有更好的性能，因为文本不会被解析为HTML。此外，使用textContent可以防止 <abbr title="cross-site scripting" style="font-style: normal !important; margin: 0px; padding: 0px; border: 0px; cursor: help; text-decoration: underline dotted;">XSS</abbr> 攻击。
关于innerText需要注意 下面2中方式的区别：
div1.innerText = "hello,world"
div1.appendChild(document.createTextNode("hello,world"))
2.2 方法
方法（如果一个属性是函数，那么这个属性就也叫做方法；换言之，方法是函数属性）
- appendChild()
例：
var span = document.createElement('span');
span.textContent = 'span';
div1.appendChild(span);
- cloneNode()
例：
var span = document.createElement('span');
span.textContent = 'span';
div1.appendChild(span);
------------------------
浅拷贝：
var div2 = div1.cloneNode();
document.body.appendChild(div2);
--------------------------------
深拷贝：
var div2 = div1.cloneNode(true);
document.body.appendChild(div2);
浅拷贝： 只拷贝目标 节点 ；
深拷贝：拷贝目标 节点 及其所有后代；
contains()
hasChildNodes()
insertBefore()
isEqualNode() 与 isSameNode()
举个栗子：
<body>
<div class="red">same还是equel</div>
<div class="red">same还是equel</div>
<script>
var div1 = document.body.children[0]
var div2 = document.body.children[1]
var div3 = document.body.children[0]
var result1 = div1.isEqualNode(div2) //true
var result2 = div1.isSameNode(div2) //false
var result3 = div1.isSameNode(div3) //true
console.log(div1 === div2) //false
console.log(div1 === div3) //true
</script>
</body>
isSameNode() 可以理解为 “===”；
removeChild()
需要注意的一点：removeChild() 后仍然存在于内存中，仅仅是从页面中移除了；并不是全方位的干掉了；replaceChild()
normalize() // 常规化
概述
Node.normalize() 方法将当前节点和它的后代节点”规范化“（normalized）。在一个"规范化"后的DOM树中，不存在一个空的文本节点，或者两个相邻的文本节点。
注1：“空的文本节点”并不包括空白字符(空格，换行等)构成的文本节点。
注2：两个以上相邻文本节点的产生原因包括：
通过脚本调用有关的DOM接口进行了文本节点的插入和分割等。
HTML中超长的文本节点会被浏览器自动分割为多个相邻文本节点。
举个栗子：
var wrapper = document.createElement("div");
wrapper.appendChild(document.createTextNode("Part 1 "));
wrapper.appendChild(document.createTextNode("Part 2 "));
// 这时(规范化之前),wrapper.childNodes.length === 2
// wrapper.childNodes[0].textContent === "Part 1 "
// wrapper.childNodes[1].textContent === "Part 2 "
wrapper.normalize();
// 现在(规范化之后), wrapper.childNodes.length === 1
// wrapper.childNodes[0].textContent === "Part 1 Part 2"
总结：DOM APi 无外乎「增删改查」。
3. Document 接口
3.1 属性
anchors（已弃用）
-
body
获取当前页面的 body 元素；
image.png
-
characterSet
字符编码
image.png childElementCount
children
doctype
documentElement
**Document.documentElement**會回傳目前文件（document）中的根元素（Element），如：HTML 文件中的<html>元素。
也就是说 documentElement 其实就是 HTML；
- domain
Document.domain 获取页面的域名。 - fullscreen
- head
- hidden
Document.hidden （只读属性）返回布尔值，表示页面是（true）否（false）隐藏。
- images
Document.images 获取页面的所有 img 标签。 - links
Document.links 获取页面的所有 a 标签。 - location
- onxxxxxxxxx
- origin
- plugins
- readyState
- referrer
概述：
返回跳转或打开到当前页面的那个页面的URI。
语法：
var string = document.referrer;
备注：
如果用户直接打开了这个页面（不是通过页面跳转，而是通过地址栏或者书签等打开的），则该属性为空字符串。由于该属性只是返回一个字符串，所以不能够通过该属性引用页面的 DOM。
referrer---推荐人，当你打开一个网页之后，你在该页面的一些跳转、请求、链接啥的，在 Get 头部会有一个 Referer 属性，即表示你的这个请求是由该网页背书的；如果你不是通过页面跳转，而是通过地址栏或者书签等直接输入 URL 打开的，那么你的 Get 头部就没有 Referer 属性；
不多说了，举个栗子：
如果你直接 复制 该图片的 URL ，通过地址栏打开，会发现无法打开。
- scripts
- scrollingElement
- styleSheets
- title
- visibilityState
3.2 方法
close()
createDocumentFragment()
createElement()
createTextNode()
execCommand()
exitFullscreen()
getElementById()
getElementsByClassName()
getElementsByName()
getElementsByTagName()
getSelection()
hasFocus()
open()
querySelector()
querySelectorAll()
语法
elementList = document.querySelectorAll(selectors);
- registerElement()
- write()
- writeln()
