1.什么是DOM
把文档（document）变成对象（object）的模型（model）；
Node 分为 Document（html）、Element（元素）和 Text（文本）
- Element
title script h1等 - text
指对象中的文本 - document
html由document来生成 - node
node 是原型链的顶端，是上面三个的祖先
注释就是comment
node属于object.prototype
页面中的阶段通过上面的构造函数构造出对应的对象，这就是DOM的主要功能
只有svg的node.name是小写的其他的元素的node.name都是大写 node.type
1就是element
3就是text#####innertext与textcontent的区别
Internet Explorer 引入了node.innerText。意图类似，但有以下区别：
textContent会获取所有元素的内容，包括<script>和<style>元素，然而 innerText 不会。- innerText意识到样式，并且不会返回隐藏元素的文本，而textContent会。
- 由于
innerText受 CSS 样式的影响，它会触发重排（reflow），但textContent不会。 与 textContent 不同的是, 在 Internet Explorer (对于小于等于 IE11 的版本) 中对 innerText 进行修改， 不仅会移除当前元素的子节点，而且还会永久性地破坏所有后代文本节点（所以不可能再次将节点再次插入到任何其他元素或同一元素中）。
| 常量 | 值 | 描述 |
|---|---|---|
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 节点 |
1、3要特别注意
2.函数的属性（方法）
- appendChild()
把一个元素当做另一个元素的儿子 - cloneNode()
（true）就是深拷贝，（false）就是浅拷贝
拷贝，拷贝分为深拷贝和浅拷贝
浅拷贝只复制一层对象的属性，而深拷贝则递归复制了所有层级。
isSameNode与isEquaNode的区别
isSameNode是两个真的是一模一样
isEquaNode是两个看起来一模一样 nextSibling与preventSibling
Node.previousSibling之类的方法可能会引用到一个空白符文本节点, 而不是使用者所预期得到的节点
nextSibling返回当前节点的前一个兄弟节点,没有则返回null.removeChild
只是移到内存中，并不是直接删除掉- normalize()
当前节点和它的后代节点”规范化“（normalized）。在一个”规范化”后的DOM树中，不存在一个空的文本节点，或者两个相邻的文本节点。
注1：“空的文本节点”并不包括空白字符(空格，换行等)构成的文本节点。
注2：两个以上相邻文本节点的产生原因包括：
通过脚本调用有关的DOM接口进行了文本节点的插入和分割等。
HTML中超长的文本节点会被浏览器自动分割为多个相邻文本节点。1
2
3
4
5
6
7
8
9
10
11
12var 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"
####3.Document
body
characterSet 字符编码
childElementCount 子标签的数量
children
doctype
documentElement 返回一个文档对象的根元素
domain
fullscreen
head
hidden
images
links 获取所有的a标签
location
onxxxxxxxxx 事件监听
origin
plugins 查看是否装了flash插件
readyState 引荐 HTTP服务器
referrer
scripts
scrollingElement 正在滚动的元素
styleSheets
title
visibilityState 用户是不是在显示当前
- 方法：
close()
createDocumentFragment()
createElement()
createTextNode()
execCommand() 执行命令 富文本时用
exitFullscreen() 退出全屏
getElementById()
getElementsByClassName()
getElementsByName()
getElementsByTagName()
getSelection() 选中的文本
hasFocus()
open()
querySelector()
querySelectorAll()
registerElement()
write() 写
writeln() 写一行
DOM API 获取的elements都是伪数组，没有数组的共有属性的都是伪数组