HTMLCollection vs NodeList
原文地址:HTMLCollection vs NodeList
作者:HungerLyndon
来源:简书
=============================== 正文 ===============================
>>> 引文
这篇博客起源于我对一道作业题的思考,在DOM课程中,第二道作业题是:
elem.children
和elem.childNodes
的区别?
那么这两者的区别究竟是什么呢?当时我在回答的时候写了这样一段代码(这段代码只得到表面上的答案,是浅层次理解)。
<div id="ct"><p class="para">Lyndon</p><p class="attr">123<span>dozz</span></p>
</div>
<script>var ct = document.getElementById("ct");console.log(ct.children);console.log(ct.childNodes);
</script>
返回的结果是:
可以看出,当我用getElementById
方法匹配到id = "ct"
的元素节点后
- 用
ct.children
返回的是一个HTMLCollection
(图中已用红框标出),其中包含的两个元素是p.para
以及p.attr
- 用
ct.childNodes
返回的是一个NodeList
(图中已用红框标出),其中包含的元素稍微多些,有5项:text
,p.para
,text
,p.attr
,text
每一个元素不断展开,会发现有很多的属性,零零碎碎的,这时候我发现一个比较明显的区别是textContent
的不同:
- 在
HTMLCollection
下p.para
的textContent
是"Lyndon"
p.attr
的textContent
是"123dozz"
- 在
NodeList
下text
的textContent
是"↵ "
p.para
的textContent
是"Lyndon"
text
的textContent
是"↵ "
p.attr
的textContent
是"123dozz"
text
的textContent
是"↵ "
究竟为何两个方法会返回不一样的结果?老师的课件归纳如下:
两者的不同点在于:
HTMLCollection
对象具有namedItem()方法,可以传递id或name获得元素;HTMLCollection
的item()方法和通过属性获取元素(document.forms.f1)可以支持id和name,而NodeList
对象只支持id
但是我并没有完全看懂,大概掌握程度是0.6左右,于是我觉得解决这些疑惑的终极方法,应该是去深入了解:HTMLCollection
和NodeList
本质上的不同。
>>> 首先,参考stack overflow上的回答
我翻译了一下Vote数最高的答案:
HTMLCollection
与NodeList
都是DOM节点的集合,两者都属于Collections范畴,两者的区别在于:
- 方法略有差异:
HTMLCollection
比NodeList
多了一个namedItem
方法,其他方法保持一致 - 包含节点类型不同:
NodeList
可以包含任何节点类型,HTMLCollection
只包含元素节点(ElementNode)
Collections的出现场景?
- 当返回多个节点(如:
getElementByTagName
)或者得到所有子元素(如:element.childNodes
)时,Collections就会出现,这时候就有可能返回HTMLCollection
或者NodeList
>>> 其次参考W3的文档(MDN上也有详细解释):
HTMLCollection
是以节点为元素的列表,可以凭借索引、节点名称、节点属性来对独立的节点进行访问。HTML DOM中的Collections是实时变动的,当原始文件变化,Collections也会随之发生变化。
- 属性:
length
(返回的是列表的长度) - 方法1:
item
(通过序号索引来获取节点,参数是索引值,超过索引值返回null)
<div id="ct"><p class="para">Lyndon</p><p class="attr">123<span>dozz</span></p><form action="" method="get" name="apply"><input type="text" name="username" placeholder="用户名"><input type="password" name="password" placeholder="密码"></form>
</div>
<script>var ct = document.getElementById("ct");var a = ct.children;var b = ct.childNodes;console.log(a);console.log(b);
</script>
- 方法2:
namedItem
(用名字来返回一个节点,首先搜寻是否有匹配的id属性,如果没有就寻找是否有匹配的name属性,如果都没有,返回null)
<div id="ct"><p class="para">Lyndon</p><p class="attr">123<span>dozz</span></p><form action="" method="get" name="apply"><input type="text" name="username" placeholder="用户名"><input type="password" name="password" placeholder="密码"></form>
</div>
<script>var ct = document.getElementById("ct");var a = ct.children;var b = ct.childNodes;console.log(a);console.log(b);
</script>
NodeList
返回节点的有序集合,DOM中的NodeList
也是实时变动的
- 属性:
length
(列表中节点的数量) - 方法:
item
(返回集合中的元素,如果超过范围返回null)
<div id="ct"><p class="para">Lyndon</p><p class="attr">123<span>dozz</span></p><form action="" method="get" name="apply"><input type="text" name="username" placeholder="用户名"><input type="password" name="password" placeholder="密码"></form>
</div>
<script>var ct = document.getElementById("ct");var a = ct.children;var b = ct.childNodes;console.log(a);console.log(b);
</script>
>>> Element与Node
到这一步,两者本质上的区别已经差不多分清楚了,那么现在就要进入第二个问题,为什么两个Element属性返回的结果(如:textContent
)不一样呢?这里需要感谢同班同学 joyside,他推荐给我一篇文章《Element和Node的区别你造吗?》来理解Element和Node的区别。
文章中参考的是MDN:Node是一个基础类型,document, element, text, comment, DocumentFragment等都继承于Node. 在这篇文章最开始的测试中NodeList
结果中有非常多的text
,其实element, text, comment都是Node的子类,可以将它们视为:elementNode, textNode以及commentNode.平时在DOM中最常用的Element对象,其本质就是elementNode.
由于Node就是DOM的结构,代码内容经过解析后,Node与Node之间可以插入文本,文章最开头的截图中的"↵ "
本质上就是Node之间的空隙,这种空隙的本质是textNode.
>>> 总结
综上所述,进行归纳,并回答文章开头提出的疑问。
HTMLCollection
和NodeList
的共同点显而易见:- 都是类数组对象,都有
length
属性 - 都有共同的方法:
item
,可以通过item(index)
或者item(id)
来访问返回结果中的元素 - 都是实时变动的(live),document上的更改会反映到相关对象上(例外:
document.querySelectorAll
返回的NodeList
不是实时的)
- 都是类数组对象,都有
HTMLCollection
和NodeList
的区别是:NodeList
可以包含任何节点类型,HTMLCollection
只包含元素节点(elementNode),elementNode就是HTML中的标签HTMLCollection
比NodeList
多一项方法:namedItem
,可以通过传递id或name属性来获取节点信息
文章开头的疑问解答:
文章开头的代码实际上等价于:
这里是介于node与node之间的textNode
<div id="ct">这里是介于node与node之间的textNode<p class="para">Lyndon</p>这里是介于node与node之间的textNode<p class="attr">123<span>dozz</span></p>
这里是介于node与node之间的textNode
</div>
<script>var ct = document.getElementById("ct");console.log(ct.children);console.log(ct.childNodes);
</script>
由于NodeList
包含任何节点类型,ct.childNodes
会一并返回textNode, elementNode等,所以最终结果就是由text
, p
, text
, p
, text
组成的类数组对象,这里的text
只是换行符而已。
由于HTMLCollection
仅包含elementNode,因此最终的结果就是由p.para
, p.attr
组成的类数组对象。当然,由于这里只返回直接的子元素,因此不会出现类数组对象中没有span
,如果希望返回结果中有span
,这样写就可以了:
<div id="ct"><p class="para">Lyndon</p><p class="attr"><span>dozz</span></p><span>bilibili</span>
</div>
<script>var ct = document.getElementById("ct");console.log(ct.children);console.log(ct.childNodes);
老师在课件中还详细给出了有哪些具体的方法可以获取HTMLCollection
和NodeList
对象,如果要记住可能比较麻烦,每次在具体情况时参考控制台的输出,得知类型后只需要记住常用的方法和区别就可以轻松地进行操作了。
>>> 参考资料
- Difference between HTMLCollection, NodeLists, and arrays of objects
- Interface NodeList
- NodeList and HTMLCollection
- Interface HTMLCollection
- Element和Node的区别你造吗?
HTMLCollection vs NodeList相关推荐
- span居div中_JavaScript-html Dom中的HTMLCollection和NodeList
HTMLCollection对象 HTMLCollection是元素集合,它和NodeList很像,有length属性来表示HTMLCollection对象的长度,也可以通过elements.item ...
- 你可能没有听说过 js中的 DOM操作还有这个: HTMLCollection 和 NodeList
一文了解DOM操作中的HTMLCollection和NodeList ⛱️序言
- HTMLCollection 和 NodeList 的区别
HTMLCollection HTMLCollection 表示一个包含了元素(元素顺序为文档流中的接口)的集合(通用集合),还提供了从该集合中选择元素的属性和方法. 例如使用 getElements ...
- HTMLCollection 与 NodeList 的区别
HTMLCollection是 HTML 元素的集合. NodeList 是文档节点的集合. NodeList 和 HTML 集合几乎完全相同. HTMLCollection 和 NodeList 对 ...
- HtmlCollection和Nodelist的区别
1.Nodelist是返回节点的集合,而nodelist里面也有数组,因此元素也是节点的一种,也就是元素节点 <div class="a"><div class= ...
- node更改html中的列表,HTMLCollection和NodeList
HTMLCollection是元素集合(元素顺序为文档流中的顺序),它和NodeList很像,有length属性来表示HTMLCollection对象的长度,可以通过 item() 传入数字索引来访问 ...
- HTML列表中项目结点是,HTMLCollection和NodeList
HTMLCollection是元素集合(元素顺序为文档流中的顺序),它和NodeList很像,有length属性来表示HTMLCollection对象的长度,可以通过 item() 传入数字索引来访问 ...
- JS 查看标签下某元素所有信息(查看元素,查询元素,遍历元素、HTMLCollection对象、NodeList对象)
NodeList 对象是一个从文档中获取的节点列表 (集合) . NodeList 对象类似 HTMLCollection 对象. 一些旧版本浏览器中的方法(如:getElementsByClassN ...
- nodelist与HTMLCollection
转自:http://www.jianshu.com/p/f6ff5ebe45fd 这篇博客起源于我对一道作业题的思考,在DOM课程中,第二道作业题是: elem.children和elem.child ...
最新文章
- oracle修改备库状态,Oracle-CRSCTL命令显示备库状态不正确
- Fabric环境搭建
- MySQL-查询数据(SELECT)
- 记录Pandas处理数据的两个小技巧
- Vmware 没有vmnet8虚拟网卡、解决方法就是:刷机
- XGBoost-工程实现与优缺点(中)
- C#中读取文件内容本文分步介绍了如何从文本文件
- Python 中拼音库 PyPinyin 的用法,没错见名知意它就是用来翻译汉字的
- 支付宝php rsa签名验签工具,alipay rsa2 签名验证
- POSTMAN list参数传值
- java用dda算法绘制直线_使用DDA算法画出给定两点的直线
- 单片机c语言如何精确延时,单片机C语言精确延时值的计算
- NUBT 1480 懒惰的风纪委Elaine
- 89元尝鲜智能家居 天猫精灵方糖智联3件套简评
- 【Arduino实验13 超声波测距】
- JS判断ios系统的版本号
- 初涉QQ飞车第一天-创建角色
- 关于长尾应用的一些思考
- 财务学python还是vba_作为一名会计应届生准备投身财务,想多学一门技能 是推荐python还是VBA或是其他什么 求指点一下?...
- 微信屏蔽网页的依据是什么?
热门文章
- Morgan Stanley(摩根斯坦利)笔试加电面试题大全
- 解决浏览器与电脑时间不一致的问题
- 研究生计算机专业选修课挂了,选修课挂科有什么影响 后果严重吗
- 2021-03-19~20 大数据课程笔记 day58day59
- android 语法分析方法,基于抽象语法树的Android应用相似度检测方法
- ram和flash的区别, SSD寿命, SSD和HHD速度比较, SSD和RAM速度比较
- StringBoot + Thymeleaf + PageHelper + PageInfo 前端引入式分页
- SAP启用批次管理相关报错
- Word怎样将图片设置插入艺术效果?分享技巧!如何把word图片操作添加艺术效果?
- Field restTemplate in cn.itcast.order.service.OrderService required a bean of type ‘org.springframew