DOM中NodeList&NamedNodeMap&HTMLCollection简介

NodeList

每个节点都有一个childNodes属性, 其中保存这一个NodeList对象. NodeList是一种类数组对象, 用于保存一组有序的节点, 可以通过位置来访问这些节点. NodeList对象的独特之处在于, 它实际上是基于DOM结构动态执行查询的结果, 因此DOM结构的变化能够自动反映在NodeList中. NodeList是”动态的”:

1
var arrayOfNodes = Array.prototype.slice.call(someNode.childNodes, 0);//可以用于将NodeList转换化为真正的数组

NamedNodeMap

与NodeList类似, 也是一个”动态”的集合. 元素的特性都由一个Attr节点表示, 每一个节点都保存在NamedNodeMap对象中. NamedNodeMap对象有下列方法.

名称 功能
getNamedItem(name) 返回nodeName属性等于name的节点
removeNamedItem(name) 从列表中移除nodeName属性等于name的节点
setNamedItem(node) 向列表中添加节点, 以节点的nodeName属性为索引
item(pos) 返回位于数字pos位置处的节点
1
2
3
4
//例
var id = element.attributes.getNamedItem('id').nodeValue;
//或者
var id = element.attributes["id"].nodeValue;

HTMLCollection

一种常用于取得元素引用的方法是getElementsByTagName( ). 即要取得元素的标签名, 而返回的是包含零或者多个元素的NodeList. 在HTML文档中, 这个方法会返回一个HTMLCollection对象, 作为一个”动态”集合, 该对象与NodeList非常类似.

1
2
//例: 会取得页面中所有的<img>元素, 并返回一个HTMLCollection.
var image = document.getElementsByTagName("img");

一些方法
|名称|功能|
|:—-|:—–|
|item()或者方括号|访问HTMLCollection对象中的项|
|namedItem()|使用这个方法可以通过元素的name特性取得集合中的项|

1
2
3
4
<img src="ss,gif" name="myImage">
//例如刚刚的image
var myImage = image.namedItem("myImage");
//会返回第一行的标签
越来越多的平台(微信公众平台,新浪微博,简书,百度打赏等)支持打赏功能,付费阅读时代越来越近,特此增加了打赏功能,支持微信打赏和支付宝打赏。坚持原创技术分享,您的支持将鼓励我继续创作!