这篇文章将为大家详细讲解有关HTML5中HTMLCollection和NodeList的区别是什么,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
创新互联是一家集网站建设,青羊企业网站建设,青羊品牌网站建设,网站定制,青羊网站建设报价,网络营销,网络优化,青羊网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。获取
HTMLCollection 对象
getElementsByTagName() 方法返HTMLCollection对象。
HTMLCollection 对象类似包含 HTML 元素的一个数组。
注意:
HTMLCollection 不是一个数组!
HTMLCollection 看起来可能是一个数组,但其实不是。
你可以像数组一样,使用索引来获取元素。
HTMLCollection 无法使用数组的方法: valueOf(), pop(), push(), 或 join()。
NodeList 对象
大部分浏览器的querySelectorAll()返回 NodeList 对象。
注意
节点列表不是一个数组!
节点列表看起来可能是一个数组,但其实不是。
你可以像数组一样,使用索引来获取元素。
节点列表无法使用数组的方法: valueOf(), pop(), push(), 或 join() 。
HTMLCollection 与 NodeList 的区别
HTMLCollection是 HTML 元素的集合。(仅包含元素)
NodeList 是一个文档节点的集合。
NodeList 与 HTMLCollection 有很多类似的地方。
NodeList 与 HTMLCollection 都与数组对象有点类似,可以使用索引 (0, 1, 2, 3, 4, ...) 来获取元素。
NodeList 与 HTMLCollection 都有 length 属性。
HTMLCollection 元素可以通过 name,id 或索引来获取。
NodeList 只能通过索引来获取。
只有 NodeList 对象有包含属性节点和文本节点。
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <P>1</P> <P id="p2">2</P> <P>3</P> <P>4</P> <P>5</P> <script> // getElementsByTagName() 方法返回 HTMLCollection 对象。 const myCollection = document.getElementsByTagName('p'); console.log(myCollection) // 大部分浏览器的 querySelectorAll() 返回 NodeList 对象。 const myNodeList = document.querySelectorAll("p"); console.log(myNodeList) console.log(myNodeList ===myCollection) //false console.log(myCollection.p2) // <P id="p2">2</P> console.log(myNodeList.p2) //undefine </script> </body> </html>
关于“HTML5中HTMLCollection和NodeList的区别是什么”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
新闻名称:HTML5中HTMLCollection和NodeList的区别是什么-创新互联
网站路径:https://www.cdcxhl.com/article18/ceghdp.html
成都网站建设公司_创新互联,为您提供虚拟主机、外贸建站、企业建站、网站制作、微信小程序、品牌网站制作
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联