JavaScript HTML DOM 节点列表 与 NodeList 的区别_JSHTMLDOM


JavaScript HTML DOM 节点列表

NodeList 对象是一个从文档中获取的节点列表 (集合) 。

NodeList 对象类似 HTMLCollection 对象。

一些老版本浏览器中的(如:getElementsByClassName())方法  会返回 NodeList 对象,而不是 HTMLCollection 对象。

所有市场的浏览器 childNodes 属性返回的是 NodeList 对象。

大部分市场的浏览器 querySelectorAll() 返回 NodeList 对象。

这下面代码选取了文档中所有的 <p> 节点:

示例代码

var myNodeList = document.querySelectorAll("p");

NodeList 中的元素可以通过索引来访问。

访问第二个 <p> 元素可以是 y = myNodeList[1]; 代码


演示一下 ?

一、NodeList 对象 length 属性

NodeList 对象 length 的属性定义节点列表中的节点数。

示例代码

var myNodelist = document.querySelectorAll("p");

document.getElementById("demo").innerHTML = myNodelist.length;


演示一下 ?

二、示例代码解析

获取 <p> 元素的集合:var myNodelist = document.querySelectorAll("p");

显示节点列表元素个数:

length 属性常用于遍历节点列表。

示例代码

修动节点列表中所有 <p> 元素的背景颜色:

var myNodelist = document.querySelectorAll("p");

var i;for(i = 0;

i < myNodelist.length; i++){myNodelist[i].style.backgroundColor = "red";}


演示一下 ?

三、HTMLCollection 与 NodeList 的区别

HTMLCollection 是 HTML 元素的集合。

NodeList 是一个文档节点的集合。

NodeList 与 HTMLCollection 有很多类似的地方。

NodeList 与 HTMLCollection 都与数组对象有点类似,可以使用索引 (0, 1, 2, 3, 4, ...) 来获取元素。

NodeList 与 HTMLCollection 都有 length 属性。

HTMLCollection 元素可以通过 name,id 或索引来获取。

NodeList 只能通过索引来获取。

只有 NodeList 对象有包含属性节点和文本节点。

节点列表不是数组!

节点数组看起来像数组,但并不是。

您能够遍历节点列表并像数组那样引用其节点。

不过,您无法对节点列表使用数组方法,比如 valueOf()、push()、pop() 或 join()。


Copyright © 2017 CSS5.NET教程.CSS5 内容仅用于学习和测试参考。 css5.net All Rights Reserved 蜀ICP备15003849号-16