请选择 进入手机版 | 继续访问电脑版
尚学堂集团旗下品牌:尚学堂速学堂百战程序员云数学院[切换校区]

[土匪班日记] 彭黎君_0911_[js-NodeList对象和HTMLCollection对象] 隐藏

3 1106
本帖最后由 青烟 于 2017-9-12 09:16 编辑

DOM最初设计是为了解析XML而设计的,之后沿用到HTML上。我们可以把DOM分为两部分 core 和 html,Core 部分提供最基础的 XML 解析API说明,HTML 部分专为 HTML 中的 DOM 解析添加其特有的 API。NodeList接口是在core中体现的,HTMLCollection则是在html部分,不同浏览器也会实现它们的不同接口,厂商联盟性质的规范组织出现会让这些更加规范,也不出现之前返回的是NodeList对象,但是却是静态的。

getElementsByName()和getElementsByTagName()都返回NodeList对象,而类似document.images和document.forms的属性为HTMLCollection对象。
这些对象都是只读的类数组对象。它们有length属性,也可以像真正的数组一样索引(只是读而不是写)。可以对一个NodeList或HTMLCollection的内容用一下标准的循环进行迭代:

for(var i=0;i<document.images.length;i++)//循环所有图片    document.images.style.display="none";//隐藏它们

不能直接在NodeList和HTMLCollection集合上调用Array的方法,但可以间接地使用:

var content=Array.prototype.map.call(document.getElementsByTagName("p"),function(e){return e.innerHTML;});
HTMLCollection对象也有额外的命名属性,也可以通过数字和字符串来索引。

由于历史的原因,NodeList和HTMLCollection对象也都能当作函数:以数字或字符串为参数调用它就如同使用数字或字符串索引它们一样。不鼓励使用这种怪异的方式。

NodeList和HTMLCollection接口都不是为像JavaScript这样的动态语言设计的,它们都定义了item()方法,期望输入一个整数,并返回此索引处的元素。在JS中根本没有必要调用此方法,因为简单的使用数组索引就能替代。类似的,HTMLCollection定义了namedItem()方法,它返回指定属性名的值,但在JS中可以用数组索引或常规属性来访问。

NodeList和HTMLCollection对象不是历史文档状态的一个静态快照,而通常是实时的,并且当文档变化时它们所包含的元素列表能随之改变,这是其中一个最重要和令人惊讶的特性。假设在一个没有<div>元素的文档中调用getElementsByTagName('div'),此时返回值是一个length为0的NodeList对象。如果再在文档中插入一个新的<div>元素,此元素将自动成为NodeList的一个成员,并且它的length属性变成1。
通常,NodeList和HTMLCollection的实时性非常有用。但是,如果要在迭代一个NodeList对象时在文档中添加或者删除元素,首先会需要对NodeList对象生成一个静态的副本:

var snapshot=Array.prototype.slice.call(nodelist,0);

分享到 :
人收藏 回复 使用道具
3 条回帖
gabriel  金牌会员 | 2017-9-11 22:25:07

回帖奖励 +10

回复 使用道具
bjsxt_zhang  金牌会员 | 2017-9-11 22:31:12
666666666666666666666666666666666
回复 支持(0) 反对(0) 使用道具
bjsxt_zhang  金牌会员 | 2017-9-11 22:34:23
666666666666666666666666666666666
回复 支持(0) 反对(0) 使用道具
*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

返回顶部

有位老师想和您聊一聊