---恢复内容开始---
DOM释义
API通俗的来讲，就是人家提供给你的，让你可以直接使用的东西。DOM，Document Object Model，文档对象模型。这里的文档以前特指xml文档，这也就是我们在html里边使用DOM API那么难用的原因，它一开始就不是给html使用的。 所谓Document Object Model，本质上还是一种model，将document（xml、html）变成object的model。所以我们所理解的DOM，就是把html文档变成一种具有树形结构object的规则。我们写一个最简单的html文档如下：
<!doctype> <html> <head> <meta charset='utf-8'> <title>我的网页</title> </head> <body> <h1>一级标题</h1> <h2>二级标题</h2> <p>一个<span>段落</span></p> </body> </html>
我们把它这些树的节点替换成Node对象，按照规定整个文档对应的是Document对象，所有的标签元素（包括HTML标签）对应的是Element对象，而文字是Text对象，所以换成Node树应该是这个样子
所谓的DOM树，就是这样的一棵树。通过一定的规则把html文档变成树形结构，方便我们使用js来对其进行一些操作。Node里边存的东西在DOM标准里有规定。其中不论是Document还是Element或者是Text都属于Node节点。这就不得不提到nodeType了。
nodeType是Node对象的一个属性，表示该节点的类型。节点的类型包括有上边提到的Document、Element、Text以及表示注释的Comment（也因此html注释是可以从控制台获取到的），描述文档类型的DocumentType，表示没有父级文件的最小文档对象（轻量版的Document）DocumentFragment，以及其它不重要的。其中DocumentFragment优化是面试的一个考点…
这些节点的值在内存中用数字表示，1代表Element，3代表Text，9代表Document…至于为什么，因为以前很穷，内存不够约定来凑。那时候的程序员们约定好了上述数字对应的意义，然后一直流传至今。当然，除了用1来表示Element，它还为你准备了一个常量Node.ELEMENT_NODE，同样用来表示Element。你在控制台输入Node.ELEMENT_NODE，得到的结果是1。就像你在控制台输入Math.Pi，得到的结果是3.141592653一样。同样的，Node.TEXT_NODE结果是3，表示的是text。
Node属性
鉴于属性还挺多的，所以让我们先来记一些简单的单词吧！
1. child/children/parent
2. node
3. first/last
4. next/previous
5. sibling/siblings
6. type
7. value/text/content
8. inner/outer
9. element
所有的属性，都是这些单词的组合。
比如childNodes,firstChild,lastChild,previousSibling,nextSibling,parentElement,parentNode,nodeName,nodeType,nodeValue,ownerDocument（获取拥有这个节点的文档，一般是页面的document节点）,innerText,textContent…
DOM的主要功能是增删改查，对于属性这一块，最多的还是查找，找到这个元素，然后我们才可以修改它。
获取所有子节点：childNodes（获取子节点，包括Text等）
获取所有子元素：children（获取子标签，不包括Text等）
获取第一个儿子：firstChild
获取第一个子元素：firstElementChild
获取最后一个儿子：lastChild
获取自己的兄弟（哥哥）：previousSibling
获取哥哥元素：previousElementSibling
获取自己的兄弟（弟弟）：nextSibling
获取自己的父亲：parentElement、parentNode。（我们都知道Element是Node的一个子集，表示的是html文档里边所有的标签元素，所以这两个方法顾名思义一个的意思是找到自己的标签父亲，另一个是只要找到父亲就可以了不论它是标签还是别的什么东西。鉴于在html里除了标签外基本上也没什么能作为父亲所以这两种方法没什么区别。）
获取节点名称：nodeName。除svg外所有标签都是大写，比如BODY....
获取节点类型：nodeType。用数字表示，前边说过了。
获取节点值：nodeValue。对于Text，Comment节点，nodeValue返回节点的文本内容。对于Element节点，nodeValue返回null。
获取内部文字：innerText、textContent。微软引入了innerText，火狐和谷歌等引入了textContext，两者主要功能都是获取节点内部的文字，但是有一些不同。innerText能智能识别css并将其解析，不会返回
script标签里边的源码，不会返回隐藏元素的文本，而textContent会返回所有元素的内容。也由于innerText解析css，所以会触发重排，因此性能比较低一点。textContent会保留空行空格和换行符，innerText只会保留换行符。
Node方法
添加子节点： Node.appendChild() Node.insertBefore()，在参考节点之前插入新的节点，如果新的节点已经在DOM树中，那么会先被移除然后再添加。 Node.cloneNode()，克隆子节点。需要注意的是这里有一个参数deep，如果传入的是true那么就是深拷贝，克隆本身以及它的内容（包括所有后代结点）。默认是false，只克隆结点本身（包括属性、标签名）。 判断是否有子节点：Node.hasChildNodes()。文本节点同样算是子节点。 判断传入的节点是不是该节点的后代节点：Node.contains( otherNode ) 删除子节点：Node.removeChild()。需要知道的是remove之后这个子节点仍然存在于内存当中，只是不显示在页面里。 替换子节点：Node.replaceChild()。 判断两个节点是否相等： Node.isEqualNode() Node.isSameNode() 两者的区别在于equal的话是只要看起来相同即可，same指的是同一个。`div1 === div2`和`div1.isSameNode(div2)`结果相同。 常规化：Node.normalize()。通俗的解释就是如果你用js在一个标签里边生成了两个text节点，使用该方法后会把两个text节点合并为一个，使DOM树看起来更简洁。
document接口是文档特有的接口，window.document所符合的API就是document接口。
Document属性
innerText不管你写什么都直接显示。但是innerHTML的话你写的html代码（包括js部分）可以执行。所以最好不要用innerHTML因为它会把用户的代码当做开发者的代码，不够安全。
activeElement，返回当前正在操作的元素。
domain，获取域名
head，获取head元素
hidden，文档是否是隐藏的
images，获取所有的image元素
links，获取a标签。anchors只能获取到有name的a标签
onXXXXX，一系列的事件监听
plugins，看用户是否开启了插件
readyState，看是否加载完成
referrer，查看页面的引荐者。可以通过这个属性来拒绝为其它的访问者提供服务。如果不是直接从地址栏输入网址进行访问而是在当前页面1点击跳转至页面2，那么页面2的referrer就是页面1。在开发者工具的network里边查看页面的请求可以看见referrer属性的值。
Document方法
close()，关闭文档。一般说来在页面加载完之后会自动关闭。在页面开始加载的时候document就open了，然后往页面里边写东西，加载完之后页面关闭。此时如果你再次open页面，页面里原有的东西就不存在了，重新写入，然后再次close。所以我们一般不用document.write()来往文档里边写内容，因为一旦出现延时或者是异步操作极容易清空页面里原有的东西。比如 document.write('hello') setTimeout(()=>document.write('world'), 1000) 得到的结果是world，因为页面重写了。 execCommand()，执行命令。比如execCommand(‘copy’)，执行拷贝命令，拷贝你选中的内容到剪切板。在你想要写一个富文本编辑器（带有样式的文本编辑器）的时候可能会用到这个API。 querySelectorAll()返回的是一个伪数组，querySelector()返回的是查询到的第一个选择器。 querySelectorAll()返回的是一个静态集合，DOM内部的变化并不会反映在该方法的返回结果中。parent.childNodes是动态集合，DOM树删除或者新增一个相关节点都会立刻反映在NodeList接口中。 HTMLCollection VS NodeList HTMLCollection实例对象只能是Element节点，可以用id属性或者name属性来引用节点元素。 NodeList实例对象可以包含其它节点，并且只能用数字索引来引用节点元素。
原文：https://blog.csdn.net/writing_happy/article/details/79732362?utm_source=copy