NodeList和HTMLCollection区别

关于DOM集合接口,主要不同在于HTMLCollection是元素集合而NodeList是节点集合(既包括元素,也包括节点)。

规定一下结果是:

1. node.childNodes 结果返回类型是 NodeList,
2. node.children 结果返回类型是 HTMLCollection
3. node(document或者其他不同节点).getElementsByXXX 结果返回类型是HTMLCollection

唯一要注意的是 querySelectorAll 返回的是 NodeList ,但是实际上是元素集合,并且是静态的,

其他接口返回的HTMLCollection和NodeList都是动态的,即取得的结果会随着相应元素的增减而增减。

PS:《JS权威指南第六版》关于getElementByName() 和 getElementsByTagName() 都返回 NodeList 对象,是不对的,

规定都返回 HTMLCollection对象。

时间: 2024-10-10 17:12:25

NodeList和HTMLCollection区别的相关文章

深入理解javascript中的动态集合——NodeList、HTMLCollection和NamedNodeMap

× 目录 [1]NodeList [2]HTMLCollection [3]NamedNodeMap[4]注意事项 前面的话 一说起动态集合,多数人可能都有所了解.但是,如果再深入些,有哪些动态集合,以及这些动态集合有什么表现.区别和联系?可能好多人就要摇头了.本文就javascript中的动态集合做详细介绍 NodeList NodeList实例对象是一个类数组对象,它的成员是节点对象,包括childNodes和querySelectorAll()方法返回值 <div id="test&

DOM中的NodeList与HTMLCollection

最近在看<Javascript高级程序设计>的时候,看到了这样一句话:“理解NodeList和HTMLCollection,是从整体上透彻理解DOM的关键所在.”,所以觉得应该写一篇关于NodeList和HTMLCollection的博客来好好了解和总结下这方面的知识点. NodeList NodeList是一个节点的集合(既可以包含元素和其他节点),在DOM中,节点的类型总共有12种,通过判断节点的nodeType来判断节点的类型. 我们可以通过Node.childNodes和documen

javascript高级程序设计---NodeList和HTMLCollection

节点对象都是单个节点,但是有时会需要一种数据结构,能够容纳多个节点.DOM提供两种接口,用于部署这种节点的集合分别是NodeList和HTMLCollection MDN上的定义: NodeList: NodeList对象是通过Node.childNodes和document.querySelectorAll方法返回的(collections of nodes)节点的集合, NodeList一般是动态集合live collection, 是即时更新的(live):当其所包含的文档结构发生改变时,

NodeList 和 HTMLCollection

NodeList 类数组对象 代表节点的集合 部分浏览器为NodeList加入了namedItem接口. 规范: http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#ID-536297177 HTMLCollection 类数组对象 代表HTML元素的集合 可以使用namedItem接口,以id(优先)或name获取集合中的元素. 规范: http://www.w3.org/TR/DOM-Level-2-HTML/html.html#

JS权威指南读书笔记(六)

第十五章 脚本化文档 1 文档对象模型(DOM)是表示和操作HTML和XML文档内容的基础API. 2 文档节点的部分层次结构 Text和CDATASection都是characterData的子类型. 3 getElementsByNames() 定义在HTMLDocument类中,而不是Document(文档可能代表HTML也可能代表XML) 类中,所以只针对HTML文档可用. 4 由于历史原因,HTMLDocument类定义了一些快捷属性来访问各种各样的节点.例如:images.forms

原生DOM探究 -- NodeList v.s. HTMLCollection

涉及获取元素的主要API 在获取原生DOM元素的时候,主要涉及这几个DOM API(链接为Living Standard): Node及对应集合NodeList Element(继承Node)及对应集合HTMLCollection Document(继承Node) 注:计划取代NodeList和HTMLCollection的Elements目前并无广泛实现 基础知识 -- NodeList v.s. HTMLCollection 在不同版本的浏览器中,如果使用获取多元素的DOM方法,有的会得到N

【转】原生DOM探究 -- NodeList v.s. HTMLCollection

原文链接:http://www.cnblogs.com/joyeecheung/p/4067927.html 涉及获取元素的主要API 在获取原生DOM元素的时候,主要涉及这几个DOM API(链接为Living Standard): Node及对应集合NodeList Element(继承Node)及对应集合HTMLCollection Document(继承Node) 注:计划取代NodeList和HTMLCollection的Elements目前并无广泛实现 基础知识 -- NodeLis

NodeList接口,HTMLCollection接口

原文地址:https://wangdoc.com/javascript/ 节点都是单个对象,有时需要一种数据结构,能够容纳多个节点.DOM提供两种节点集合,用于容纳多个节点:NodeList和HTMLCollection. 这两种集合都属于接口规范.许多DOM属性和方法,返回的结果是NodeList实例或HTMLCollection实例.主要区别是,NodeList可以包含各种类型的节点,HTMLCollection只能包含HTML元素节点. NodeList接口 概述 NodeList实例是一

javascript:NodeList 接口,HTMLCollection 接口

原文章:https://wangdoc.com/javascript/index.html NodeList 接口,HTMLCollection 接口 节点都是单个对象,有时需要一种数据结构,能够容纳多个节点.DOM 提供两种节点集合,用于容纳多个节点:NodeList和HTMLCollection. 这两种集合都属于接口规范.许多 DOM 属性和方法,返回的结果是NodeList实例或HTMLCollection实例.主要区别是,NodeList可以包含各种类型的节点,HTMLCollecti