使用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都会运行一次基于文档的查询。

转载于:https://www.cnblogs.com/skylar/p/3631359.html

使用NodeList相关推荐

NodeList 和 HTMLCollection
为什么80%的码农都做不了架构师?>>> NodeList 类数组对象代表节点的集合部分浏览器为NodeList加入了namedItem接口. 规范: http://www ...
Document，Node，Element，HTMLDocument ，HTMLCollection，HTMLElement，NodeList
这个问题如果不是基于原生js写组件,可能仍然不明不白,既然遇到了,就整理一下. 一.Document,Node,Element的关系 1,Document 对象 Document 对象是一棵文档树的根 ...
090_HTMLCollection和NodeList对象
1. HTMLCollection对象 1.1. HTMLCollection对象是类数组的html元素集合. 1.2. getElementsByTagName()和getElementsByCla ...
span居div中_JavaScript-html Dom中的HTMLCollection和NodeList
HTMLCollection对象 HTMLCollection是元素集合,它和NodeList很像,有length属性来表示HTMLCollection对象的长度,也可以通过elements.item ...
你可能没有听说过 js中的 DOM操作还有这个: HTMLCollection 和 NodeList
一文了解DOM操作中的HTMLCollection和NodeList ⛱️序言
JS 查看标签下某元素所有信息（查看元素，查询元素，遍历元素、HTMLCollection对象、NodeList对象）
NodeList 对象是一个从文档中获取的节点列表 (集合) . NodeList 对象类似 HTMLCollection 对象. 一些旧版本浏览器中的方法(如:getElementsByClassN ...
php nodelist,了解NodeList、HTMLCollection以及NamedNodeMap的使用(代码)
本篇文章给大家带来的内容是关于了解NodeList.HTMLCollection以及NamedNodeMap的使用(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 这三个都是类 ...
java中nodelist的用法_我可以在Java中使用for-each遍历一个NodeList吗？
这个问题的解决方法是直截了当的,而且幸运的是你必须实现一次. import java.util.*; import org.w3c.dom.*; public final class XmlUtil ...
使用for of循环遍历获取的nodeList，配置babel编译，webpack打包之后在iphone5下报错...
报错信息: Symbol.iterator is not a function [duplicate] 代码示例: function insertCta() {let ctaArr = Array.f ...

使用NodeList

使用NodeList相关推荐

最新文章

热门文章