使用NodeList
理解NodeList、NamedNodeMap和HTMLCollection是整体透彻理解DOM的关键。
这三个集合都是“动态”的,也就是说:每当文档结构发生变化时,他们都会得到更新,他们始终保存的都是最新最准确的信息。
从本质上说:所有NodeList对象都是在访问DOM文档时实时运行的查询。
//下面代码会无限循环 var divs = document.getElementsByTagName('div');
var i,
div; for(i=0;i<divs.length;i++){
div = document.createElement('div');
document.body.appendChild(div);
}
第一行代码会取得文档中所有<div>元素的HTMLCollection。由于这个集合是动态的,因此只要有新的<div>元素被加到页面中,集合都会被更新。i和div.length会同时递增,结果他们的值永远不会相等,就会无限循环。
//下面代码会正常运行 var divs = document.getElementsByTagName('div');
var i,
len,
div; //len保存的是divs.length循环开始时的一个快照是不变的
for(i=0;len=divs.length;i<len;i++){
div = document.createElement('div');
document.body.appendChild(div);
}
一般来说应该尽量减少访问NodeList的次数,因为每次访问NodeList都会运行一次基于文档的查询。
使用NodeList的更多相关文章
- 深入理解javascript中的动态集合——NodeList、HTMLCollection和NamedNodeMap
× 目录 [1]NodeList [2]HTMLCollection [3]NamedNodeMap[4]注意事项 前面的话 一说起动态集合,多数人可能都有所了解.但是,如果再深入些,有哪些动态集合, ...
- js中的类数组对象---NodeList
动态 NodeList 这是文档对象模型(DOM,Document Object Model)中的一个大坑. NodeList 对象(以及 HTML DOM 中的 HTMLCollection对象)是 ...
- 【转】 HTMLCollection和NodeList的区别
1 HTMLCollection类型 下面的每个项目(以及它们指定的属性)都返回 HTMLCollection(基类)或者它的派生类: Document (images, applets, links ...
- 深入理解 NodeList
在web前端编程中,我们通常会通过document.getElementsByTagName的方法取出一组相同标签的dom元素,比如: var list = document.getElementsB ...
- javascript高级程序设计---NodeList和HTMLCollection
节点对象都是单个节点,但是有时会需要一种数据结构,能够容纳多个节点.DOM提供两种接口,用于部署这种节点的集合分别是NodeList和HTMLCollection MDN上的定义: NodeList: ...
- 原生DOM探究 -- NodeList v.s. HTMLCollection
涉及获取元素的主要API 在获取原生DOM元素的时候,主要涉及这几个DOM API(链接为Living Standard): Node及对应集合NodeList Element(继承Node)及对应集 ...
- 将HTMLCollection/NodeList/伪数组转换成数组
这里把符合以下条件的对象称为伪数组(ArrayLike) 1,具有length属性 2,按索引方式存储数据 3,不具有数组的push,pop等方法 如 1,function内的arguments . ...
- JavaScript NodeList和Array
原文引用脚本之家作者:Jeff Wong,谢谢大神提供资源 在Web前端编程中,我们通常会通过document.getElementsByTagName或者document.getElementsBy ...
- DOM中的NodeList与HTMLCollection
最近在看<Javascript高级程序设计>的时候,看到了这样一句话:“理解NodeList和HTMLCollection,是从整体上透彻理解DOM的关键所在.”,所以觉得应该写一篇关于N ...
随机推荐
- Tornado中Cookie过期问题
首先,web应用程序是使用HTTP协议进行数据传输,因为HTTP协议是无状态的,所以一旦提交数据完成后,客户端和服务器端的连接就会被关闭,再次进行数据的交换就得重新建立新的连接,那么,有个问题就是服务 ...
- DIV页面布局,开局代码
DIV页面布局,开局代码 主要是style部分和body部分 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...
- php生成器的使用
按照php的文档说明 一个生成器函数看起来像一个普通的函数,不同的是普通函数返回一个值,而一个生成器可以yield生成许多它所需要的值. 当一个生成器被调用的时候,它返回一个可以被遍历的对象.当你遍历 ...
- iOS emoji表情转码 或者判断
如果项目中有评论或者信息恢复的地方,往往会用到emoji,有时候如后台不支持emoji,就会显示乱码错误,我们可以把emoji转成unicode编码或者utf8编码格式传给服务器.当然如果后台服务器接 ...
- 京东2017校园招聘笔试题 【第K个幸运数】
题目描述 4和7是两个幸运数字,我们定义,十进制表示中,每一位只有4和7两个数的正整数都是幸运数字. 前几个幸运数字为:4,7,44,47,74,77,444,447... 现在输入一个数字K,输出第 ...
- k次出现与一次出现的数字
原始的题目是这样的: Single Number II Given an array of integers, every element appears three times except for ...
- Android自定义View的实现方法,带你一步步深入了解View(四)
转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/17357967 不知不觉中,带你一步步深入了解View系列的文章已经写到第四篇了,回 ...
- Cracking-- 1.1 判断字符串中是否有重复字符
第三种方法为位运算的方法. 位运算符: << 左移 & 与 | 或 #include <iostream> #include <string> #incl ...
- Android中的接口回调技术
Android中的接口回调技术有很多应用的场景,最常见的:Activity(人机交互的端口)的UI界面中定义了Button,点击该Button时,执行某个逻辑. 下面参见上述执行的模型,讲述James ...
- JS-随机排序
var arr = [ 1,2,3,4,5,6,7,8 ];arr.sort(function ( a, b ) { return Math.random() - 0.5;});alert( a ...