NodeList

js中所有的NodeList类型都是动态变化的,即NodeList中的内容发生变化,会马上再NodeList中发生反映

类似的还有HTMLCollection类型

比如childNodes

getElements得到的内容

querySelectorAll得到的内容

举例说明

<ul id="a">

<li></li>

<li></li>

<li></li>

</ul>

var ul=document.getElementsByID("a")

for(var i=0;i<ul.childNodes.length;i++)

{

var li=document.createElement("li");

ul.appendChild(li)

}

上面的循环永远不会结束,因为ul的childNodes是一个NodeList类型,是动态变化的,每次增加了一个新的li,ul的childNodes的长度就会立刻加1

所以i永远不会达到ul.childNodes.length的值,所以循环永远不会结束。这个例子很清晰的反应了NodeList的动态变化

如果想实现上面的程序,可以这样改

var ul=document.getElementsByID("a")

for(var i=0,var len=ul.childNodes.length;i<len;i++)

{

var li=document.createElement("li");

ul.appendChild(li)

}

这样len是一个确定的变量,就可以正确的循环结束

时间: 2024-07-28 19:58:02

NodeList的相关文章

DOM中的动态NodeList与静态NodeList

GitHub版本: https://github.com/cncounter/translation/blob/master/tiemao_2014/NodeList/NodeList.md 副标题: 为何getElementsByTagName()比querySelectorAll()快100倍 昨天,我在雅虎的同事 Scott Schiller (斯科特·席勒, 同时也是SoundManager创造者) 发Twitter询问为何getElementsByTagName("a") 在

原生DOM探究 -- NodeList v.s. HTMLCollection

涉及获取元素的主要API 在获取原生DOM元素的时候,主要涉及这几个DOM API(链接为Living Standard): Node及对应集合NodeList Element(继承Node)及对应集合HTMLCollection Document(继承Node) 注:计划取代NodeList和HTMLCollection的Elements目前并无广泛实现 基础知识 -- NodeList v.s. HTMLCollection 在不同版本的浏览器中,如果使用获取多元素的DOM方法,有的会得到N

DOM中的NodeList与HTMLCollection

最近在看<Javascript高级程序设计>的时候,看到了这样一句话:“理解NodeList和HTMLCollection,是从整体上透彻理解DOM的关键所在.”,所以觉得应该写一篇关于NodeList和HTMLCollection的博客来好好了解和总结下这方面的知识点. NodeList NodeList是一个节点的集合(既可以包含元素和其他节点),在DOM中,节点的类型总共有12种,通过判断节点的nodeType来判断节点的类型. 我们可以通过Node.childNodes和documen

javaScript之NodeList

NodeList对象 是DOM操作取出的集合(实际上是基于DOM结构动态查询的结果),用来保存一组有序的节点,可以通过位置来访问这些节点,它并不是array的实例. Nodelist最大的特点就是它的时效性,DOM结构的变化能自动反映在Node List对象中.也就是说当DOM结构发生变化时,NodeList立刻会发生变化. NodeList对象转为数组方法: Array.prototype.slice.call(someNode.childNodes, 0) 或 [].slice(someNo

NodeList对象的学习

书上原话:每个节点都有一个childNodes属性,其中保存这一个NodeList对象.NodeList是一个“类数组的对象”.NodeList是有生命的.有呼吸的对象.而不是我们第一次访问时的某个瞬间的一个快照. <!doctype html> <html> <head> <meta charset="utf-8"/> <title>NodeList的学习</title> <script type=&quo

JavaScript NodeList和Array

原文:JavaScript NodeList和Array 原文引用脚本之家作者:Jeff Wong,谢谢大神提供资源 在Web前端编程中,我们通常会通过document.getElementsByTagName或者document.getElementsByClassName的方法取出一组相同标签的dom元素.如下 var anchors = document.getElementsByTagName("a"); for (i = 0; i < anchors.length; i

深入理解javascript中的动态集合——NodeList、HTMLCollection和NamedNodeMap

× 目录 [1]NodeList [2]HTMLCollection [3]NamedNodeMap[4]注意事项 前面的话 一说起动态集合,多数人可能都有所了解.但是,如果再深入些,有哪些动态集合,以及这些动态集合有什么表现.区别和联系?可能好多人就要摇头了.本文就javascript中的动态集合做详细介绍 NodeList NodeList实例对象是一个类数组对象,它的成员是节点对象,包括childNodes和querySelectorAll()方法返回值 <div id="test&

js中的类数组对象---NodeList

动态 NodeList 这是文档对象模型(DOM,Document Object Model)中的一个大坑. NodeList 对象(以及 HTML DOM 中的 HTMLCollection对象)是一种特殊类型的对象. DOM Level 3 spec 规范 对 HTMLCollection 对象的描述如下: DOM中的 NodeList 和 NamedNodeMap 对象是动态的(live); 也就是说,对底层文档结构的修改会动态地反映到相关的集合NodeList 和 NamedNodeMa

NodeList 和 HTMLCollection

NodeList 类数组对象 代表节点的集合 部分浏览器为NodeList加入了namedItem接口. 规范: http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#ID-536297177 HTMLCollection 类数组对象 代表HTML元素的集合 可以使用namedItem接口,以id(优先)或name获取集合中的元素. 规范: http://www.w3.org/TR/DOM-Level-2-HTML/html.html#

NodeList和HTMLCollection区别

关于DOM集合接口,主要不同在于HTMLCollection是元素集合而NodeList是节点集合(既包括元素,也包括节点). 规定一下结果是: 1. node.childNodes 结果返回类型是 NodeList, 2. node.children 结果返回类型是 HTMLCollection 3. node(document或者其他不同节点).getElementsByXXX 结果返回类型是HTMLCollection 唯一要注意的是 querySelectorAll 返回的是 NodeL