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方面的技术.在以前的工作中,使用过这门脚本语言.但是都是比较凌乱的,用到什么学什么,只是为了实现业务,而去使用. 不会考虑到代码优化,封装对象等.今次特意借了 ...
随机推荐
- 高性能JavaScript笔记三(编程实践)
避免双重求值 有四个标准函数可以允许你传入代码的字符串,然后它才你动态执行.它们分别是:eval.Function.setTimeout.setInterval 事实上当你在javascript代码中 ...
- POJ1236Network of Schools(强连通分量 + 缩点)
题目链接Network of Schools 参考斌神博客 强连通分量缩点求入度为0的个数和出度为0的分量个数 题目大意:N(2<N<100)各学校之间有单向的网络,每个学校得到一套软件后 ...
- Django中Celery的实现介绍(一)
Django中Celery的实现 Celery官网http://www.celeryproject.org/ 学习资料:http://docs.jinkan.org/docs/celery/ Cele ...
- CSS-混合布局的几种方法(正确的方法和错误的原因)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Socket通信的理解
1.Socket(套接字) 是支持TCP/IP通信的基本操作单元.包含通信的五种必须信息:通信使用的协议,本机IP和端口,远程IP和端口. 2. 1.TCP连接 手机能够使用联网功能是因为手机底层实现 ...
- Android学习笔记——download
该工程的功能是实现从网上的链接下载一个lrc文件和一个mp3文件 以下代码是MainActivity.java中的代码 package com.example.download; import com ...
- JSP 自定义标签
0 标签技术的API继承体系 1 作用 jsp自定义标签用于移除页面中的java代码 2 实现 2.1 标签处理类ViewIPTag.java package com.zsm.util; import ...
- python中的not具体使用及意思
python中的not具体使用及意思 name='' while not name: name=raw_input(u'请输入姓名:') print name python中的not具体表示是什么: ...
- QQ客服出现“企业QQ在线咨询无权限在当前场景使用!” 问题
加入了QQ“多客服”功能 会出现这个问题 解决办法: 在平台http://wp.qq.com/ 上设置,只需两步骤 步骤一:在http://wp.qq.com/set.html 里,安全级别选项,选择 ...
- ES6 import export
import import './module1.js'; (无对象导入) import d from './module1.js'; (导入默认对象) import {Employee, getEm ...