节点操作易混点

一、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  element
document.body.parentElement; // the  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 语句插入的两个元素之间不会有空白。

用例

  First span

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

First span

上例得到的是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插入的 元素 并不会执行其中的脚本.
• 大多数浏览器支持通过innerHTML插入 元素。
• 并不是所有元素都支持innerHTML。不支持的元素包括:col、colgroup、frameset、head、html、style、table、tbody、thead、tfoot、tr。

2. Node.innerText

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

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

用例

对于以下HTML：

  
This is a paragraph.
  

    
Item1
    
Item2
  

执行以下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 会获取所有元素的内容，包括 和 元素，然而 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

节点操作易混点