DOM中NodeList&NamedNodeMap&HTMLCollection简介

最新推荐文章于 2024-10-23 06:11:51 发布

原创最新推荐文章于 2024-10-23 06:11:51 发布 · 1.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#dom #NodeList #NamedNodeM #HTMLCollec

JavaScript 同时被 2 个专栏收录

84 篇文章

订阅专栏

javascript入门到进阶

71 篇文章

订阅专栏

本文介绍了DOM中的三种集合类型：NodeList、NamedNodeMap和HTMLCollection。NodeList是一种类数组对象，用于保存一组有序的节点；NamedNodeMap是元素属性的动态集合；HTMLCollection则常用于获取元素引用，返回一个动态集合。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

NodeList

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

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位置处的节点

//例
var id = element.attributes.getNamedItem('id').nodeValue;
//或者
var id = element.attributes["id"].nodeValue;

HTMLCollection

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

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

一些方法

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

<img src="ss,gif" name="myImage">
//例如刚刚的image
var myImage = image.namedItem("myImage");
//会返回第一行的标签