DOM简述
- DOM 的作用 === 表示 HTML 文档
- DOM 提供的 API === 查询,修改 HTML 文档内容
- DOM 中的 D 指的是 Document , 可以认为是 HTML 文档。O 指的是 Object , 在内存中按照树型结构,通过构造函数(如 Node , Element , Document三个构造函数), 构造出对象, 将 DOM 展现到内存中。 DOM 的 M 指的是 Model ,因为在 HTML 结构 在内存中不好用笔表示,所以用一个模型来表示,这个模型就是树型结构。
如下图所示：
DOM 模型
DOM 树
图中的每个节点(包括矩形节点和椭圆形节点)都是Node类型 。
从英文单词到Node属性
childNodes , firstChild , innerText , lastChild , nextSibling , nodeName , nodeType , nodeValue , outerText , ownerDocument , parentElement , parentNode , previousSibling , textContent
这是我们常用的一些属性，BUT！我怎么可能记得住呢？
看看这些属性，无非就是一些常用单词的组合，记住如下总结的单词，经过组合以后就可以掌握Node的基本属性啦~
- child / children / parent
- node
- first / last
- next / previous
- sibling / siblings
- type
- value / text / content
- inner / outer
- element
比如：
父关系
Node.parentNode
兄弟关系
Node.nextSibling
Node.previousSibling
儿子关系
Node.childNodes
Node.firstChild
Node.lastChild
所以：
- 知道英文单词的意思就知道用法了。
- 如果发现知道英文后依然不明白用法，就去看 MDN 看看例子啦
说说几个引起我注意的方法
1. cloneNode()
var dupNode = node.cloneNode(deep);
deep 是可选参数，true 或者 false。
true 复制 自己 + 子子孙孙 ，false 只复制 自己 。
举个例子：
<div id='div_parent'>
<div id = 'div_firstChild'></div>
<div id = 'div_secondSecond'></div>
</div>
var div = document.getElementById("div_parent");
var dupNode = div.cloneNode(true); // 参数修改 true or false
console.log(dupNode);
参数为 true 运行结果：
参数为 false 运行结果：
2. isEqualNode( ) 和 isSameNode( ) 的区别是什么 ？
isSameNode( ) 必须是同一个节点
isEqualNode( ) 不需要是同一个节点
举个例子：
<div>first</div>
<div>first</div>
var divList = document.getElementsByTagName('div');
console.log(divList[0].isSameNode(divList[0])); // true
console.log(divList[0].isSameNode(divList[1])); // flase
console.log(divList[0].isEqualNode(divList[1])); // true
尽管上面的两个 div 看起来毫无差别，但是 isSameNode( )方法强调 是不是同一个 Node 节点 。
3. removeChild( ) 和 replaceChild( )
这两个方法，一个是删除一个是代替，它们仅仅做到的是 从页面中 移除对应的节点，但节点依然存在 内存 中。
4. textContent 和 innerText 的区别
- textContent 会获取所有元素的内容，包括 <script> 和 <style> 元素，然而 innerText 不会。
- innerText 意识到样式时
- 不会返回隐藏元素 ( display : none ) 的文本，而textContent会。
- 由于 innerText 受 CSS 样式的影响，它会触发重排（reflow），但textContent 不会，所以从这方面来说 textContent 会快一些。
- 与 textContent 不同的是, 在 Internet Explorer (小于等于 IE11 的版本) 中对 innerText 进行修改， 不仅会移除当前元素的子节点，而且还会永久性地破坏所有后代文本节点（所以不可能再次将节点再次插入到任何其他元素或同一元素中）。
5. textContent 和 innerHTML 的区别
innerHTML 返回 HTML 文本。
用法：在元素中检索或写入文本，使用innerHTML。
但是，textContent 通常具有更好的性能，因为文本不会被解析为 HTML 。
此外，使用 textContent 还可以防止 XSS 攻击。
