Dom-NodeList理解
来源:互联网 发布:淘宝破碎群岛飞行成就 编辑:程序博客网 时间:2024/06/10 05:12
//在控制台typeof NodeList
//执行结果为:function,结果在控制台输入了NodeList,效果如下:
//发现除了function里面什么都没有,于是直接new了一下NodeList,效果如下:
//结果会报错,查阅了一下NodeList的相关介绍,发现NodeList是DOM的接口之一,下面就为大家介绍介绍NodeList
<p class="x1" name="xx">Player 1: Chris</p>
//NodeList接口是DOM对象模型四大基本接口之一(Document、Node、NodeList、NamedNodeMap)
//NodeListjie接口是一个节点的集合,包含了某个节点的所有子节点,虽然它有一些数组的属性但是又不是数组(NodeList中的每个item都可以通过一个索引来访问,该索引值从0开始。)
//NodeList在某方面和数组非常相似,那它可以直接使用Array.prototype上继承的方法吗?
<script type="text/javascript">
var ma=document.querySelectorAll("p.x1");
console.log(ma);
</script >
//看上面的列子执行效果,我们可以发现NodeList的原型链:myNodeList --> NodeList.prototype --> Object.prototype --> null,并没有继承Array.prototype,所有并不能直接使用Array.prototype上的方法
//动态NodeList:对底层文档结构的修改会动态的反应到NodeList中,然后又在其他地方对这个元素进行操作(增、删、改子元素等),这些操作会自动反射到NodeList中不需要手动进行操作。
//所有的的getElement..方法都会返回动态的NodeList集合,所以,一旦document发生变化,那么NodeList就会自动更新对应的元素,看下面实例:
<script type="text/javascript">
var p = document.getElementsByTagName("p");
var i = 0 ;
while (i<p.length) {
document.body.appendChild(document.createElement("p"));
i++;
alert(i);
}
</script >
//运行上面一段代码,我们执行出来陷入了死循环,这是为什么勒?
//原因:每次循环都会重新计算p.length,每次迭代都会添加一个新的p标签所以每次i++,p.length的长度也在增加,所以i总是小于p.length,所以终止循环的条件也永远不会触发
//静态NodeList:对底层document的更改不会影响到返回的NodeList对象,querySelectorAll和querySelector方法返回的就是一个静态的NodeList
<script type="text/javascript">
var p = document.querySelectorAll("p");
var i=0;
while(i < p.length){
document.body.appendChild(document.createElement("p"));
i++;
alert(i);
}
</script>
//执行上面这个实例,发现执行出来并没有像上面那个例子一样陷入死循环,这是为什么勒?
//我们已经知道querySelectorAll返回的是一个静态的NodeList,此时返回的NodeList只是方法被调用时的文档状态的快照。在这种情况下p.length的值永远不会变,只要不满足条件就直接终止循环
//为什么动态的NodeList比静态的NodeList快?
//总结原因:
1.创建方式是完全不同(动态NodeList不需要预先获取所有的信息,而静态NodeList一开始就需要取得并封装所有相关的数据)
2.动态NodeList是通过在cache缓存中注册它的存在并创建。每次访问必须查询 document 的变化,而静态NodeList对象实例是由另外一个文件创建,然后循环填充所有的数据。
- Dom-NodeList理解
- DOM中的动态NodeList与静态NodeList
- 深入理解 NodeList
- XML DOM - The NodeList Object
- 24_XML DOM - NodeList 对象
- DOM中的NodeList与HTMLCollection
- (转)DOM中的动态NodeList与静态NodeList
- DOM解析之Document,Node,NodeList,NamedNodeMap
- DOM中NodeList&NamedNodeMap&HTMLCollection简介
- NodeList 与 HTMLCollection 以及dom排序
- DOM中的动态NodeList与静态NodeList(getElementsByTagName()与querySelectorAll())
- JavaScript高级程序设计之DOM之DOM 操作技术之使用NodeList第10.2.4讲
- 理解 DOM
- dom理解!
- NodeList对象
- HTML DOM (一):DOM理解
- NodeList nodelist 方法不存在错误 nodelist.item(0).getTextContent()
- 理解DOM事件流
- Java中的参数传递
- Sublime Text 之运行 js 方法
- 耳机煲机攻略
- 浏览器缓存和CDN缓存基本介绍
- Nginx+Php-fpm运行原理详解
- Dom-NodeList理解
- sort+结构
- 如何查看本机端口开放
- 非系统安装的OpenCV的CmakeLists写法
- JS Facade(外观)模式
- jquery Ajax的标准写法
- android轮询最佳实践service+AlarmManager+Thread
- 网页开发中遇到的小问题
- ubuntu下安装使用MySQL的一些注意事项(远程无法连接解决方法)