js-NodeList对象和HTMLCollection对象
getElementsByName()和getElementsByTagName()都返回NodeList对象,而类似document.images和document.forms的属性为HTMLCollection对象。
这些对象都是只读的类数组对象。它们有length属性,也可以像真正的数组一样索引(只是读而不是写)。可以对一个NodeList或HTMLCollection的内容用一下标准的循环进行迭代:
for(var i=0;i<document.images.length;i++)//循环所有图片
document.images[i].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);
js-NodeList对象和HTMLCollection对象的更多相关文章
- HTMLCollection 对象和NodeList 对象
获取html元素有三种方法,其中通过类名和标签获取的结果为一个HTMLCollection对象. HTMLCollection对象可以理解为一个包含html元素的数组(但不是数组),可以通过索引[ ] ...
- querySelector()与querySelectorAll()的区别及NodeList和HTMLCollection对象的区别
querySelector().Document.Element类型均可调用该方法. 当用Document类型调用querySelector()方法时,会在文档元素范围内查找匹配的元素:而当用Elem ...
- HTMLCollection对象和NodeList对象
前言 首先我们先来看下面的demo,假如我们需要给所有的li字体变一个颜色. <!DOCTYPE html> <html lang="en"> <he ...
- js中的类数组对象---NodeList
动态 NodeList 这是文档对象模型(DOM,Document Object Model)中的一个大坑. NodeList 对象(以及 HTML DOM 中的 HTMLCollection对象)是 ...
- HTMLCollection 对象详解,以及为什么循环获取的dom合集操作可能会出现下标不正确的情况?
有时候循环dom合集,然后操作其中的某些dom之后,发现下标不正确了 比如我们要删除一个dom合集的时候: var selectDom = document.getElementsByClassNam ...
- JS中遍历数组、对象的方式
1.标准的for循环遍历数组 //不打印自定义属性和继承属性 var array = [1,2,3]; for (var i = 0; i < array.length; i++) { cons ...
- 170104、js内置对象与原生对象
内置对象与原生对象 内置(Build-in)对象与原生(Naitve)对象的区别在于:前者总是在引擎初始化阶段就被创建好的对象,是后者的一个子集:而后者包括了一些在运行过程中动态创建的对象. 原生对象 ...
- JS 学习(四)对象
对象 在JS中,对象是数据(变量),拥有属性和方法. JS中所有事物都是对象:字符串.数字.数组.日期等. 对象是拥有属性和方法的特殊数据类型. 属性是与对象相关的值. 方法是能够在对象上执行的动作. ...
- JS搞基指南----延迟对象入门提高资料整理
JavaScript的Deferred是比较高大上的东西, 主要的应用还是主ajax的应用, 因为JS和nodeJS这几年的普及, 前端的代码越来越多, 各种回调套回调再套回调实在太让人崩溃, ...
随机推荐
- 北大POJ题库使用指南
原文地址:北大POJ题库使用指南 北大ACM题分类主流算法: 1.搜索 //回溯 2.DP(动态规划)//记忆化搜索 3.贪心 4.图论 //最短路径.最小生成树.网络流 5.数论 //组合数学(排列 ...
- 跨域请求之jsonp的实现方式
ajax请求受同源策略影响,不允许进行跨域请求,而script标签src属性中的链接却可以访问跨域的js脚本,利用这个特性,服务端不再返回JSON格式的数据,而是返回一段调用某个函数的js代码,在sr ...
- sublime text3---Emmet:HTML/CSS代码快速编写神器
Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度,比如下面的演示: ...
- oauth三方登陆的原理
一 说明 OAuth是由Blaine Cook.Chris Messina.Larry Halff 及David Recordon共同发起的,目的在于为API访问授权提供一个开放的标准(resful和 ...
- Kafka消息队列
转自:http://blog.csdn.net/yfkiss/article/details/17348693 代码案例 http://blog.csdn.net/ganglia/article/de ...
- 关于防止表单form重复提交的方式
表单重复提交: 1.第一种:添加以后刷新页面(刷新的是Servlet) 2.第二种:重复点击提交按钮. * 使用令牌机制:(防止表单重复提交) * 在表单页面中 生成一个令牌 * 将这个令牌保存在se ...
- 我的Git教程 之 初始化本地库
初始化本地库 前言:这个教程只适用于像我一样大致理解Git的原理,但是不太记得住Git命令的同学使用.所以具体原理只会提一下,具体可以参见Pro Git.同时,下面的操作需要先安装相应的Git工具,具 ...
- jquery插件开发三种方法
1.好像之前看视频记录下来的,不记得了. //类级别插件开发,主要是在jQuery中定义全局方法: //第一种写法 jQuery.myFunc = function(str){ alert(" ...
- IntelliJ IDEA使用心得之非Maven项目篇
今天和大家分享下非Maven项目在IDEA中的配置方法,由于非Maven项目的配置方法基本相同,所以此篇只对不同点进行说明. 1.声明依赖库 我们可以使用库的方式来添加项目依赖,这是一个非常好的实践. ...
- seajs源码分析(一)---整体结构以及module.js
1,seajs的主要内容在module.js内部,最开始包含这么几个东西 var cachedMods = seajs.cache = {} var anonymousMeta var fetchin ...