因为DOM本来是为XML设计的，而HTML也用这个API，所以很难用
分类
- Node API
- Element API -> Node API (
Element.__proto__ === Node.prototype) - Document API
DOM
Document Object Model
节点属性
nodeName
- nodeName 一定返回大写
- 只有
<svg>标签是小写的nodeName，因为<svg>是外来的标签，后面才加入的
nodeName: 'HTML'
nodeType
因为以前的计算机内存太小了，所以用数字存会更省空间
- 1 -> Node.ELEMENT_NODE
- 3 -> Node.TEXT_NODE
- 8 -> Node.COMMENT_NODE
- 9 -> Node.DOCUMENT_NODE
nodeType: 'text -> 文本
nodeType: 'element' -> <a>...其他标签
nodeType: 'document' -> <html>
nodeType: 'comment' -> 注释
页面中的节点 -> (构造函数) -> 对象
这样就可以对页面中的节点进行操作了
Node 的接口
Node也是一种构造函数，proto 指向Object.prototype
- node -> 有文本
- element -> 没有文本，只有标签
childNodes
- 子节点，有文本
- childNodes 返回的是一个动态的人格分裂，DOM树的改变会立刻反映在NodeList接口之中
document.body.childNodes // 只获取节点而不是元素：element, text...
children （Element API）
子标签，没有文本
document.body.children
firstElementChild（Element API）
document.body.firstElementChild
lastElementChild （Element API）
document.body.lastElementChild
nextElementSibling （Element API）
document.body.nextElementSibling
previousElementSibling （Element API）
document.body.previousElementSibling
innerText vs textContent
- 一开始获取标签里的文本要遍历childNodes，如果是文本节点，那么就获取节点的
nodeValue - 后面IE看不下去，推出了
innerText - 再后来火狐又推出了
textContent
不同
- innerText 受CSS样式的影响，会去检查是否存在style代码，如果有则不会作为结果返回，但是这样性能会降低。
使用
if ('textContent' in document) {
// 使用
}
节点方法
cloneNode()
deep 是否需要深拷贝
- 深拷贝：一直克隆到没有子代为止
- 浅拷贝：只克隆节点本身
var dupNode = node.cloneNode([deep]);
isEqualNode() vs isSameNode()
- isEqualNode() 是否相同
- isSameNode() 是否是全等，即三个等于号
===是否是同一个
removeChild()
移除后还在内存里面，只不过是不出现在页面中
replaceChild()
我造一个儿子，将别的儿子节点替换
normalize()
将不正常的状态变成正常状态
var wrapper = document.createElement("div");
wrapper.appendChild( document.createTextNode("Part 1 ") );
wrapper.appendChild( document.createTextNode("Part 2 ") );
// At this point, wrapper.childNodes.length === 2
// wrapper.childNodes[0].textContent === "Part 1 "
// wrapper.childNodes[1].textContent === "Part 2 "
wrapper.normalize();
// Now, wrapper.childNodes.length === 1
// wrapper.childNodes[0].textContent === "Part 1 Part 2 "
添加文本
innerText
- 副作用：会把children的也清空掉
red.innerText = 'hello world'
createTextNode
- 直接在后面加TextNode
red.appendChild(document.createTextNode('hello world'))
Document 接口
referer（引荐）
- 是哪个页面存在的请求
- 如果是空开的页面去访问图片，那么就没有referer
- 可以拒绝和其他网站发送对资源的请求
close()
- 写 1，2 的时候 document.open()，然后开始写
- 写完了 1，2 后，script就执行完了，会调用
document.close() - 1秒之后，document已经关闭了，document会重新
document.open()，里面的内容就会被冲掉了
document.write(1)
document.write(2)
setTimeout(() => {
document.write(3)
})
execCommand()
写富文本的时候用到，例如
拷贝
[image:CCDB9190-42FF-4C4D-A429-C4A09E94A683-291-000116E8E6E4498B/3EF9C58B-BC9F-408C-9DBC-4396B9FC42FE.png]
querySelectorAll()
返回的是伪数组，没有原型链中没有Array.prototype
[image:3BB2A905-995D-489B-A27D-70AEB36F753B-291-0001172AC94C3481/C604188F-B589-4A9C-85CC-D35071F95302.png]
innerHTML 安全性
div.innerHTML = '<script>console.log(document.cookie)</script>'
HTMLCollections vs NodeList
- HTMLCollections 是元素集合（属于Element接口），NodeList 是节点集合（属于Node接口）
注意：唯一要注意的是 querySelectorAll 返回的虽然是 NodeList ，但是实际上是元素集合，并且是静态的（其他接口返回的HTMLCollection和NodeList都是live的）
网友评论