当前位置: 首页 > Web前端 > HTML

HTMLCollectionvs.NodeList

时间:2023-04-02 11:45:32 HTML

HTMLCollection和NodeList有什么区别?1、首先参考stackoverflow1的回答,HTMLCollection和NodeList都是DOM节点的集合。方法一致,包含不同类型的节点:NodeList可以包含任何节点类型,而HTMLCollection只包含元素节点(ElementNode)2、Collections是怎么出现的?当返回多个节点(如:getElementByTagName)或获取所有子元素(如:element.childNodes)时,会出现Collections。这时候返回HTMLCollection或者NodeList都是可能的。二、参考W3文档(MDN上也有详解):1、HTMLCollection是一个以节点为元素的列表,可以通过索引、节点名、节点属性访问到独立的节点。HTMLDOM中的集合实时变化。当原始文件改变时,Collections也会随之改变。3、Element和NodeNode是一个基本类型。document、element、text、comment、DocumentFragment等都继承自Node。其实element、text、comment都是Node的子类,可以理解为:elementNode、textNode和commentNode。通常是DOM中最常用的Element对象,它的本质就是elementNode。由于Node是DOM的结构,解析完代码内容后,可以在Node与Node之间插入文本。这个差距的本质是textNode。总结一下,总结一下,回答文章开头提出的问题。一、HTMLCollection和NodeList的共同点:1、都是类数组对象,都带有length属性2、都有一个共同的方法:item,可以通过item(index)或item(id)访问返回结果中的元素)3、都是实时变化(live),文档上的变化会反映到相关对象上(例外:document.querySelectorAll返回的NodeList不是实时的)2、HTMLCollection和NodeList的区别是:1.NodeList可以包含任何节点类型,HTMLCollection只包含元素节点(elementNode),elementNode是HTML2中的标签,HTMLCollection比NodeList多了一个方法:namedItem,可以通过传递id或name属性获取节点信息这里是textNode节点与节点之间这里是节点与节点之间的textNodeLyndon

这里是节点与节点之间的textNode123dozz

这里是node和node之间的textNode
由于NodeList包含任意节点类型,ct.childNodes会返回textNode,elementNode等,所以最终结果由text,p,text,p,text一个类似数组的对象,其中文本只是一个换行符。由于HTMLCollection只包含elementNode,所以最终结果是由p.para、p.attr组成的类数组对象。当然,由于这里只返回直接子元素,类数组对象中不会有span。更多技术资料请关注:gzitcast