节点操作易混点

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

原文地址：https://www.cnblogs.com/Bonnie3449/p/9376483.html

时间： 2024-10-08 16:37:13

节点操作易混点的相关文章

js节点操作

节点操作: 一.节点类型 根据DOM,XML文档中的一个成分都是一个节点. 二.节点操作 获取节点引用 1.方式一:   document.getElementById(): document.getElemengtByTagName(): 说明:这种方式直接查找节点,每次都会遍历文档中的所有节点,比较耗费内存,而且并不能体现出节点间的关系: 2.方式二:通过节点关系属性获得节点引用 方法:1.obj.childNodes:获取对象所有子节点,只包含次级节点:(eg:alert(wrap.chi

jQuery DOM 节点操作

DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的“M”.页面中的元素结构就是通过这种节点模型来互相对应着的,我们只需要通过这些节点关系,可以创建.插入.替换.克隆.删除等等一些列的元素操作. 一．创建节点 为了使页面更加智能化,有时我们想动态的在 html 结构页面添加一个元素标签,那么 在插入之前首先要做的动作就是:创建节点. $('div').append('<strong>节点</strong>'); //向 div 内部插入 strong 节点 $('di

DOM 节点操作

DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的“M”.页面中的元 素结构就是通过这种节点模型来互相对应着的,我们只需要通过这些节点关系,可以创建. 插入.替换.克隆.删除等等一些列的元素操作. 一．创建节点 为了使页面更加智能化,有时我们想动态的在 html 结构页面添加一个元素标签,那么 在插入之前首先要做的动作就是:创建节点. //创建一个节点  var box=$('<div id="box">节点</div>'); //将节点插入到&

(转载)html dom节点操作(获取/修改/添加或删除)

DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准,下面为大家介绍下html dom节点操作,感兴趣的朋友可以参考下 HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准.在 HTML DOM 中,所有事物都是节点.DOM 是被视为节点树的 HTML. 根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点: 整个文档是一个文档节点 每个 HTML 元素是元素节点 HTML 元素内的文本是文本节点 每个 HTML 属性是属性节点 注释是注释节

深入学习jQuery节点操作

× 目录 [1]创建节点 [2]插入节点 [3]删除节点[4]复制节点[5]替换节点[6]包裹节点 前面的话 DOM节点操作包括创建节点.插入节点.移除节点.替换节点和复制节点.jQuery也有类似的方法,此外,还扩展了包裹节点.本文将详细介绍jQuery节点操作 创建节点 创建节点的流程比较简单,包括创建节点.添加属性和添加文本.若应用原生方法,一般地,包括document.createElement().setAttribute()和innerHTML var ele = document.

笔记-[1]-DOM的节点操作详解.

DOM:文档对象模型 操作DOM基本就是操作DOM的元素节点. 节点的属性: 1:objElement.childNodes  :获取该元素对象的的节点集合,有length长度属性,在标准浏览器下使用,会辩认文本节点的节点,一般不用,有其他的更好的属性(children) 2:objElement.children :     获取该元素对象的的节点集合,有length长度属性,在ie8下和其他标准浏览器兼容,只获取元素节点. 3:obj.nodeType   :获取对象的节点类型,1为元素节点

jQuery - 02. 样式表属性操作/类操作、动画、显示隐藏、滑入、淡入、停止动画、节点操作、添加对象、清空节点

样式表属性操作.css $("div").css({'width':100,'height':100,'background':'red'}); $("div").css("background","pink"); 类操作 .addClass添加类   $("div").addClass("class"); .removeClass删除类   $("div).removeCla

jQuery DOM节点操作

一.创建节点 var box = $('<div id =box>节点</div>');  //创建一个节点 $('body').appended(box); //将节点插入<body>元素内部 二.插入节点 内部插入节点方法 append(content)     向指定元素后面插入节点content append(function (index,hml) {}) 使用匿名函数向指定元素后面插入节点content(html是原节点) appendTo(content)

深入理解DOM节点操作

× 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点 前面的话 一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节点操作方法 前提 DOM提供节点操作的方法是因为DOM节点关系指针都是只读的 下列代码中想通过修改myUl的父级节点来修改其节点关系,但由于parentNode属性是只读的,所以修改无效,在IE8-浏览器下甚至会报错 <div id="myDiv"></div> &