节点操作易混点

Posted bonnie3449

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了节点操作易混点相关的知识，希望对你有一定的参考价值。

一、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






以上是关于节点操作易混点的主要内容，如果未能解决你的问题，请参考以下文章

LUA 语言易混点

python内置函数易混点

java基础易混点

log函数的易混点

js中局部变量和全局变量的易混点

C++：指针小白易混点