javascript高级程序设计---NodeList和HTMLCollection
节点对象都是单个节点,但是有时会需要一种数据结构,能够容纳多个节点。DOM提供两种接口,用于部署这种节点的集合分别是NodeList和HTMLCollection
MDN上的定义:
NodeList:
NodeList对象是通过Node.childNodes和document.querySelectorAll方法返回的(collections of nodes)节点的集合, NodeList一般是动态集合live collection,
是即时更新的(live);当其所包含的文档结构发生改变时,它会自动更新,但是querySelectorAll方法返回的是静态的集合。
HTMLCollection
HTMLCollection 接口表示一个包含了元素(元素顺序为文档流中的顺序)的通用集合(generic collection),实现该接口的集合只能包含 HTML 元素
HTML DOM 中的 HTMLCollection 是即时更新的(live);当其所包含的文档结构发生改变时,它会自动更新。
W3C标准的定义:
Interface NodeList: [ArrayClass]
interface NodeList {
getter Node? item(unsigned long index);
readonly attribute unsigned long length;
};
A NodeList object is a collection of nodes. Interface HTMLCollection interface HTMLCollection {
readonly attribute unsigned long length;
getter Element? item(unsigned long index);
getter Element? namedItem(DOMString name);
};
An HTMLCollection object is a collection of elements.
两者的主要差距一个是node节点集合一个是html和元素集合,都是随着DOM树的改变实时更新的。HTMLCollection多了一个namedItem方法。
NodeList:
属性:length。
返回NodeList中的Node节点数量。
方法:item ( idx )
返回通过索引找到的元素,超过范围返回null。也可以通过数组括号加上索引来访问,超出范围返回undefined。
var parent = document.getElementById('parent');
var child_nodes = parent.childNodes;
child_nodes.length; // let's assume "2"
parent.appendChild(document.createElement('div'));
child_nodes.length; // should output "3"
动态的集合,注意querySelectorAll返回的是静态集合。
注意:虽然可以通过下标访问元素但是,NodeList不是数组。
数组的原型链:
myArray --> Array.prototype --> Object.prototype --> null
NodeList的原型链:
myNodeList --> NodeList.prototype --> Object.prototype --> null
HTMLCollection:
属性:
HTMLCollection.length 只读
返回集合当中子元素的数目。
方法:
HTMLCollection.item()
根据给定的索引(从0开始),返回具体的节点。如果索引超出了范围,则返回 null。
HTMLCollection.namedItem(id)比NodeList多出来的方法。
根据 Id 返回指定节点,或者作为备用,根据字符串所表示的 name 属性来匹配。根据 name 匹配只能作为最后的依赖,并且只有当被引用的元素支持 name 属性时才能被匹配。如果不存在符合给定 name 的节点,则返回 null。
var elem1, elem2; // document.forms 是一个 HTMLCollection elem1 = document.forms[0];
elem2 = document.forms.item(0); alert(elem1 === elem2); // 显示 "true" elem1 = document.forms["myForm"];
elem2 = document.forms.namedItem("myForm"); alert(elem1 === elem2); // 显示 "true"
返回HTMLCollection的方法
var elements = document.getElementsByClassName(names); // or:
var elements = rootElement.getElementsByClassName(names); //elements 是查找到的所有元素的集合 HTMLCollection .
//names 是一个字符串,表示用于匹配的 class 名称列表; class 名称通过空格分隔
//getElementsByClassName 可以在任意的元素上调用,不仅仅是 document。 调用这个方法的元素将作为本次查找的根元素. var elements = document.getElementsByTagName(name); //elements is a live HTMLCollection (but see the note below) of found elements in //the order they appear in the tree.
//name is a string representing the name of the elements. The special string "*" //represents all elements. 其他document.links、document.images、document.anchors、
返回NodeList
elements = document.getElementsByName(name); //elements is an live NodeList Collection
//name is the value of the name attribute of the element. elementList = document.querySelectorAll(selectors); //elementList is a non-live NodeList of element objects.
//selectors is a string containing one or more CSS selectors separated by commas. var matches = document.querySelectorAll("div.note, div.alert"); //This example returns a list of all div elements within the document with a class of //either "note" or "alert":
javascript高级程序设计---NodeList和HTMLCollection的更多相关文章
- 【javascript学习——《javascript高级程序设计》笔记】DOM操作
DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口).DOM描绘了一个层次节点树,允许开发人员添加.移除和修改. 1.节点层次 <html> <head& ...
- JavaScript高级程序设计(第三版)学习,第一次总结
Array类型 var arr = []; arr.length; //返回数组元素个数 改变length可以动态改变数组大小 检测数组 instanceof可以检测某个对象是否是数组,限制:只能是一 ...
- javascript高级程序设计学习笔记
javascript高级程序设计,当枕头书已经好久了~zz 现在觉得自己在js的开发上遇到了一些瓶颈,归根究底还是基础太薄弱,所以重新刷一遍js高程希望有更新的认识. 一.javascript简介 ...
- 读书笔记(03) - 性能 - JavaScript高级程序设计
作用域链查找 作用域链的查找是逐层向上查找.查找的层次越多,速度越慢.随着硬件性能的提升和浏览器引擎的优化,这个慢我们基本可以忽略. 除了层级查找损耗的问题,变量的修改应只在局部环境进行,尽量避免在局 ...
- 《JavaScript高级程序设计(第3版)》笔记-序
很少看书,不喜欢看书,主要是上学时总坐不住,没有多大定性,一本书可以两天看完,随便翻翻,也可以丢在角落里几个月不去动一下. 上次碰到了<JavaScript高级程序设计(第3版)>感觉真的 ...
- 《JavaScript高级程序设计(第3版)》阅读总结记录第一章之JavaScript简介
前言: 为什么会想到把<JavaScript 高级程序设计(第 3 版)>总结记录呢,之前写过一篇博客,研究的轮播效果,后来又去看了<JavaScript 高级程序设计(第3版)&g ...
- 读javascript高级程序设计00-目录
javascript高级编程读书笔记系列,也是本砖头书.感觉js是一种很好上手的语言,不过本书细细读来发现了很多之前不了解的细节,受益良多.<br/>本笔记是为了方便日后查阅,仅作学习交流 ...
- 《JavaScript高级程序设计》读书笔记--前言
起因 web编程过程使用javascript时感觉很吃力,效率很低.根本原因在于对javascript整个知识体系不熟,看来需要找些书脑补一下,同时欢迎众网友监督. 大神推荐书籍 看了博客大神们推荐的 ...
- 阅读摘录《javascript 高级程序设计》01
前言: 因为工作需要,所以开始主攻前台JS方面的技术.在以前的工作中,使用过这门脚本语言.但是都是比较凌乱的,用到什么学什么,只是为了实现业务,而去使用. 不会考虑到代码优化,封装对象等.今次特意借了 ...
随机推荐
- Alpha版本十天冲刺——Day 9
站立式会议 会议总结 队员 今日完成 问题 明日要做 感想 对学长说的话的感受 鲍亮 无 获取图片未解决 获取图片,发帖接口,争取完成此版本预期功能 不知不觉只剩两天时间了,这两天接连遇到发图片,获取 ...
- 二项分布和Beta分布
原文为: 二项分布和Beta分布 二项分布和Beta分布 In [15]: %pylab inline import pylab as pl import numpy as np from scipy ...
- 【Alpha】Phylab2.0: Postmortem
设想和目标 1. 我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 主要解决同学们写物理实验报告时,处理数据的困难--巨大的计算量和不规范的物理报告数据处理格式.典型 ...
- mysql 生成排名字段
假设有test表,下图为表机构和数据,score表示积分.现在要查询积分排名为第几的id?? 查询语句 select id,score,(@rowno:=@rowno+1) as rowno from ...
- 《Java疯狂讲义》(第3版)学习笔记 2 - Java语言的运行机制
内容 1.高级语言的运行机制 2.Java 语言的运行机制 1.高级语言的运行机制 高级语言主要分为编译型语言和解释型语言两类. 编译型语言是指使用专门的编译器.针对特定平台(操作系统)将高级语言源代 ...
- sql 时间查询 /sql中判断更新或者插入/查询一年所有双休日
') update [DBPersonnel].[dbo].[TB証明書] ' else INSERT INTO [DBPersonnel].[dbo].[TB証明書] ([社員番号],[身分証明書] ...
- Unreal模型文件调查
http://en.wikipedia.org/wiki/UE_Viewer http://www.gildor.org/en/projects/umodel http://wiki.beyondun ...
- 【转】【Java】利用反射技术,实现对类的私有方法、变量访问
java关于反射机制的包主要在java.lang.reflect中,structs,hibernate,spring等框架都是基于java的反射机制. 下面是一个关于利用java的反射机制,实现了对私 ...
- LSM存储模型
LSM存储模型 数据库有3种基本的存储引擎: 哈希表,支持增.删.改以及随机读取操作,但不支持顺序扫描,对应的存储系统为key-value存储系统.对于key-value的插入以及查询,哈希表的复杂度 ...
- Lua 之面向对象编程
Lua 之面向对象编程 Lua并不是为面向对象而设计的一种语言,因此,仅从原生态语法上并不直接支持面向对象编程,但Lua的设计中仍然包含了很多面向对象的思想,理解它们也更有助于理解Lua自身的一些高级 ...