节点操作易混点

一、NodeList vs HTMLCollection

1.NodeList

NodeList是一个节点的集合, 是由 Node.childNodes 和 document.querySelectorAll 返回的。

特点

(1) 类数组

它是一种类数组对象，用于保存一组有序的节点，可以通过位置(childNodes[index]或childNodes.item(index)) 来访问这些节点, 但它 并不是Array实例。

(2)有时实时有时静态

childNodes是实时的。
querySelectorAll是静态的。

用例

基本用法:

var firstChild = someNode.childNodes[0];
var secondChild = someNode.childNodes.item(1);
var thirdChild = someNode.childNodes.item('#id');
var nodeCount = someNode.childNodes.length;

将nodeList转化为Array：

var nodeListArr = Array.prototype.slice.call(someNode.childNodes,0);
//es6
var nodeListArr = Array.from(someNode.childNodes);

2. HTMLCollection

HTMLCollection 接口表示一个包含了元素（元素顺序为文档流中的顺序）的通用集合（generic collection）

以下集合为HTMLCollection:

document.anchors:文档中所有带name属性的a元素
document.forms:文档中所有form元素。同document.getElementsByTagName('form')
document.images:文档中所有img元素。同document.getElementsByTagName('img')
document.links:文档中所有带href的a元素。

用例

文档中有一个form元素，id为'myForm'。

document.forms//是一个HTMLCollection

//获取该form的方法有以下4种
document.forms[0]
document.forms.item(0)

document.forms['myForm']
document.forms.namedItem('myForm');

document.images;  // This is an HTMLCollection

3.NodeList与HTMLCollection比较

HTMLCollection与NodeList都是DOM节点的集合，两者都属于Collections范畴，二者的共同点有:

都是类数组对象，都有length属性
都有共同的方法：item，可以通过item(index)或者item(id)来访问返回结果中的元素
都是实时变动的（live），document上的更改会反映到相关对象上（例外：document.querySelectorAll返回的NodeList不是实时的）

两者的区别在于：

方法略有差异：HTMLCollection比NodeList多了一个namedItem方法，其他方法保持一致
包含节点类型不同：NodeList可以包含任何节点类型(Node)，HTMLCollection只包含元素节点（ElementNode）

二、parentNode vs parentElement

1. Node.parentNode

返回指定的节点在DOM树中的父节点.

parentNode是指定节点的父节点.该节点的父节点可能是一个元素(Element )节点,也可能是一个文档(Document )节点,或者是个文档碎片(DocumentFragment)节点.

2. Node.parentElement

返回当前节点的父 元素节点,如果该元素没有父节点,或者父节点不是一个元素节点.则返回null.

3. parentElement和parentNode的比较

https://stackoverflow.com/questions/8685739/difference-between-dom-parentnode-and-parentelement

大多数情况下，parentElement和parentNode是相同的。

唯一的不同是当节点的父节点不是element类型的时候，parentElemnt就是null了。
As an example:

document.body.parentNode; // the <html> element
document.body.parentElement; // the <html> element

document.documentElement.parentNode; // #document
document.documentElement.parentElement; // null

html元素（document.documentElement)的父节点不是element类型而是document类型，故其parentElemnt是null。

三、 childNodes vs children

1. Node.childNodes

Node.childNodes 返回包含指定节点的子节点的集合(NodeList)，该集合为即时更新的集合（live collection）。

2. Node.children

https://developer.mozilla.org/zh-CN/docs/Web/API/ParentNode/children

ParentNode.children 是一个只读属性，返回一个Node的子elements ，也是一个动态更新的 HTMLCollection。

3. Node.childNodes和Node.children的比较

Node.childNodes返回NodeList；Node.children返回HTMLCollection。更多细节参见一、NodeList vs HTMLCollection

四、Node.firstChild/lastChild vs Node.previousSibling/nextSibling

1. Node.firstChild/lastChild

Node.firstChild/lastChild只读属性返回节点的第一个/最后一个子节点，如果节点是无子节点，则都为null。

它们分别对应Node.childNodes的第一个后最后一个节点。即someNode.firstChild等于someNode.childNodes[0];someNode.lastChild等于someNode.childNodes[someNode.childNodes.length-1]

要注意fistChild和lastChild也 可以是文本节点。

Tips:使用 document.write 语句插入的两个元素之间不会有空白。

用例

<p id="para-01">
  <span>First span</span>
</p>

<script type="text/javascript">
  var p01 = document.getElementById('para-01'); 
  alert(p01.firstChild.nodeName)//#text 
</script>

上例得到的是文本节点，因为在p标签和span标签之前,有一个换行符和多个空格充当了一个文本节点.

<p id="para-01"><span>First span</span></p>

<script type="text/javascript">
  var p01 = document.getElementById('para-01');
  alert(p01.firstChild.nodeName)
</script>

上例得到的是span元素节点。因为空白符已经被移除了。

2. Node.previousSibling/nextSibling

Node.previousSibling/nextSibling只读属性返回其前一个/后一个兄弟节点。即返回其父节点的childNodes列表中紧跟在该节点之前/之后的节点。

列表中第一个节点的previousSibling为null,最后一个节点的nextSibling为null。

如果列表中只有一个节点，则其previousSibling和nextSibling都为null

和Node.fistChild/lastChild一样，previousSibling和nextSibling也 可以是文本节点。

五. Node.appendChild() vs ParentNode.append()

1. Node.appendChild()

Node.appendChild() 方法将一个节点添加到指定父节点的子节点列表末尾，并返回添加的节点

注意:如果被插入的节点已经存在于当前文档的文档树中,则那个节点会首先 从原先的位置移除,然后再插入到新的位置.如果你需要保留这个子节点在原先位置的显示,则你需要先用 Node.cloneNode 方法复制出一个节点的副本,然后在插入到新位置.

语法

var child = node.appendChild(child);

2*. (实验中的功能) ParentNode.append()

ParentNode.append 方法在 ParentNode的最后一个子节点之后插入一组 Node 对象或 DOMString 对象。被插入的 DOMString 对象等价为 Text 节点。

3. Node.appendChild和 Node.appendChild() 的比较

ParentNode.append() 允许你也追加 DOMString 对象，而 Node.appendChild() 只接受 Node 对象。
ParentNode.append() 没有返回值，而 Node.appendChild() 返回追加的 Node 对象。
ParentNode.append() 可以追加几个节点和字符串，而 Node.appendChild() 只能追加一个节点。

六. 其他节点操作办法

1. Node.insertBefore()

Node.insertBefore() 方法在参考节点之前插入一个节点作为一个指定父节点的子节点。

语法

var insertedElement = parentElement.insertBefore(newElement, referenceElement);

注意：如果referenceElement为null则newElement将被插入到子节点的末尾。

注意：如果newElement已经在DOM树中，newElement首先会从DOM树中移除

2. Node.replaceChild()

Node.replaceChild()方法用指定的节点替换当前节点的一个子节点，并返回被替换掉的节点。

语法

var replacedNode = parentNode.replaceChild(newChild, oldChild);

newChild: 用来替换 oldChild 的新节点。如果该节点已经存在于DOM树中，则它会被从原始位置删除。
oldChild: 被替换掉的原始节点。
replacedNode 和oldChild相等。

3. Node.cloneNode()

Node.cloneNode() 方法返回调用该方法的节点的一个副本。其有一个Boolean参数，表示是否执行深复制。

语法

var dupNode = node.cloneNode(deep);

node:将要被克隆的节点
dupNode:克隆生成的副本节点
deep: TYPE Boolean，可选，默认为false执行浅复制。是否采用深度克隆,如果为true,则该节点的所有后代节点也都会被克隆,如果为false,则只克隆该节点本身.

用例

Eg: 一个节点要想添加到两个父节点后面，这个节点必须要深复制一次：

const switchStyle = document.createElement("style");
const switchStyleCopy = switchStyle.cloneNode(true);//深复制

innerIframeWindowHead.appendChild(switchStyle);
outerIframeWindowHead.appendChild(switchStyleCopy);

七. Element.innerHTML vs innterText vs textContent

1. Element.innerHTML

Element.innerHTML 属性设置或获取HTML语法表示的元素的后代。

在读模式下，不同浏览器返回的文本格式会有不同。IE和Opera会将所有标签转换为大写形式；Safari、Chrome、Firefox会按照原文档中的格式返回HTML,包括空格和缩进。
在写模式下，innerHTML值中所有标签都会按照浏览器处理HTML的标准模式转换为元素，转换结果也因浏览器而异。
在写模式下，如果设置的值仅仅是文本而无HTML标签，那么结果就是设置纯文本。
在大多数浏览器中，通过innerHTML插入的<script> 元素 并不会执行其中的脚本.
大多数浏览器支持通过innerHTML插入<style> 元素。
并不是所有元素都支持innerHTML。不支持的元素包括:col、colgroup、frameset、head、html、style、table、tbody、thead、tfoot、tr。

2. Node.innerText

innerText属性可以操作元素中所含的所有文本内容，包括子文档树中的文本：

在读模式下，它会按照由浅入深的顺序，将子文档树中的所有文本拼接起来
在写模式下，会删除元素的所有子节点，插入包含相应文本值的文本节点。

用例

对于以下HTML：

<div id="content">
  <p>This is a paragraph.</p>
  <ul>
    <li>Item1</li>
    <li>Item2</li>
  </ul>
</div>

执行以下js：

document.getElementById("content").innerText;
/* 得到
This is a paragraph.
Item1
Item2
*/

浏览器兼容性：

支持innerText的浏览器：IE、Safari、Opera、Chrome.
不支持innerText的浏览器: Firefox (但支持作用类似的textContent属性)

3. Node.textContent

Node.textContent 属性表示一个节点及其后代的文本内容。

浏览器兼容性

支持的浏览器：除Firefox外，其他浏览器也偶读支持。

4. innerText和textContent的比较

textContent 会获取所有元素的内容，包括 <script> 和 <style> 元素，然而 innerText 不会。
innerText 受 CSS 样式的影响，并且不会返回隐藏元素的文本，而textContent会。
由于 innerText 受 CSS 样式的影响，它会触发重排（reflow），但textContent 不会。
与 textContent 不同的是, 对于小于等于 IE11 的版本中对 innerText 进行修改，不仅会移除当前元素的子节点，而且还会永久性地破坏所有后代文本节点（所以不可能再次将节点再次插入到任何其他元素或同一元素中）

5. innerHTML和textContent的比较

innerHTML 返回 HTML，为了在元素中检索或写入文本人们使用innerHTML；但textContent通常具有更好的性能，因为文本不会被解析为HTML。
使用textContent可以防止XSS攻击。

P294/301

七、延伸话题: 使用innerHTML的内存占用问题和效率问题

P297

1. 内存占用问题

使用innerHTML/outerHMTL/insertAjacentHTML可能带来性能问题。

在删除带有事件处理程序或将其他js对象作为属性的DOM子树时，可能导致内存占用问题。因为在删除时，元素与事件处理程序（或js对象）之间的绑定关系在内存中并没有一并删除。如果这种情况频繁出现，占用的内存数量就会明显增加。所以，在使用这些方法时，最好 先手工删除要被替换的元素的所有事件处理程序和Js对象属性。

2. 效率问题

插入大量HTML标记时，使用innerHTML比使用createElement再appendChild、insertBefore要高效得多。因为设置innerHTML时会创建一个HTML解析器，该解析器是在浏览器级别代码(C++)基础上运行的，故比执行JavaScript快得多。

但是创建和销毁HTMl解析器也会带来性能损失，所以最好 将设置innerHTML的次数控制在合理范围之内。例如将要插入的HTML字符串完全拼接好了，再一次性插入DOM。

参考资料

https://developer.mozilla.org/zh-CN/docs/Web/API/Node/parentNode
https://developer.mozilla.org/zh-CN/docs/Web/API/Node/parentElement
https://developer.mozilla.org/zh-CN/docs/Web/API/ParentNode/append
https://developer.mozilla.org/zh-CN/docs/Web/API/Node/textContent

https://www.jianshu.com/p/f6ff5ebe45fd
http://blog.csdn.net/jjfat/article/details/9127509

《JavaScript高级程序设计》10.1.1、11.3.6、11.4.4