DOM轻松学习之旅（一）

DOM简述

• DOM 的作用 === 表示 HTML 文档
• DOM 提供的 API === 查询,修改 HTML 文档内容
• DOM 中的 D 指的是 Document , 可以认为是 HTML 文档。O 指的是 Object , 在内存中按照树型结构,通过构造函数(如 Node , Element , Document三个构造函数), 构造出对象, 将 DOM 展现到内存中。 DOM 的 M 指的是 Model ,因为在 HTML 结构 在内存中不好用笔表示,所以用一个模型来表示,这个模型就是树型结构。
  如下图所示：

DOM 模型

image

DOM 树

image

图中的每个节点(包括矩形节点和椭圆形节点)都是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

所以：

1. 知道英文单词的意思就知道用法了。
2. 如果发现知道英文后依然不明白用法，就去看 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 运行结果：

image

参数为 false 运行结果：

image

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 意识到样式时
  1. 不会返回隐藏元素 ( display : none ) 的文本，而textContent会。
  2. 由于 innerText 受 CSS 样式的影响，它会触发重排（reflow），但textContent 不会，所以从这方面来说 textContent 会快一些。
• 与 textContent 不同的是, 在 Internet Explorer (小于等于 IE11 的版本) 中对 innerText 进行修改， 不仅会移除当前元素的子节点，而且还会永久性地破坏所有后代文本节点（所以不可能再次将节点再次插入到任何其他元素或同一元素中）。

5. textContent 和 innerHTML 的区别

innerHTML 返回 HTML 文本。
用法：在元素中检索或写入文本，使用innerHTML。

但是，textContent 通常具有更好的性能，因为文本不会被解析为 HTML 。
此外，使用 textContent 还可以防止 XSS 攻击。