猿问

HTMLCollection,NodeLists和对象数组之间的区别

HTMLCollection,NodeLists和对象数组之间的区别

在DOM方面,我一直对HTMLCollections,对象和数组感到困惑。例如...


document.getElementsByTagName("td")和之间有什么区别$("td")?

$("#myTable")并且$("td")是对象(jQuery对象)。为什么console.log还会在它们旁边显示DOM元素数组,它们不是对象而不是数组?

什么是难以捉摸的“NodeLists”,我如何选择一个?

还请提供以下脚本的任何解释。


谢谢


[123,"abc",321,"cba"]=[123,"abc",321,"cba"]

{123:123,abc:"abc",321:321,cba:"cba"}=Object { 123=123, abc="abc", 321=321, more...}

Node= Node { ELEMENT_NODE=1, ATTRIBUTE_NODE=2, TEXT_NODE=3, more...}

document.links= HTMLCollection[a #, a #]

document.getElementById("myTable")= <table id="myTable">

document.getElementsByClassName("myRow")= HTMLCollection[tr.myRow, tr.myRow]

document.getElementsByTagName("td")= HTMLCollection[td, td, td, td]

$("#myTable")= Object[table#myTable]

$("td")= Object[td, td, td, td]



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

    <head> 

        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> 

        <title>Collections?</title>  

        <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> 

        <script type="text/javascript">

            $(function(){

                console.log('[123,"abc",321,"cba"]=',[123,"abc",321,"cba"]);

                console.log('{123:123,abc:"abc",321:321,cba:"cba"}=',{123:123,abc:"abc",321:321,cba:"cba"});

                console.log('Node=',Node);

                console.log('document.links=',document.links);

                console.log('document.getElementById("myTable")=',document.getElementById("myTable"));

                console.log('document.getElementsByClassName("myRow")=',document.getElementsByClassName("myRow"))

                console.log('document.getElementsByTagName("td")=',document.getElementsByTagName("td"));

                console.log('$("#myTable")=',$("#myTable"));

                console.log('$("td")=',$("td"));

            });

        </script>

    </head>

繁华开满天机
浏览 816回答 3
3回答

德玛西亚99

首先,我将解释之间的差异NodeList和HTMLCollection。两个接口是集合 DOM节点。它们在提供的方法和它们可以包含的节点类型方面有所不同。虽然a NodeList可以包含任何节点类型,但是HTMLCollection应该只包含Element节点。An HTMLCollection提供与a NodeList和另外一种方法相同的方法namedItem。当必须向多个节点提供访问时总是使用集合,例如,大多数选择器方法(例如getElementsByTagName)返回多个节点或获取对所有子节点的引用(element.childNodes)。有关更多信息,请查看DOM4规范 - 集合。document.getElementsByTagName("td")和之间有什么区别$("td")?getElementsByTagName是DOM接口的方法。它接受标记名称作为输入并返回HTMLCollection(参见DOM4规范)。$("td")大概是jQuery。它接受任何有效的CSS / jQuery选择器并返回一个jQuery对象。标准DOM集合和jQuery选择之间的最大区别在于DOM集合通常是实时的(并非所有方法都返回实时集合),即如果受到影响,对DOM的任何更改都会反映在集合中。它们就像DOM树上的视图,而jQuery选择是调用函数时DOM树的快照。为什么console.log还会在它们旁边显示DOM元素数组,它们不是对象而不是数组?jQuery对象是类似于数组的对象,即它们具有数字属性和length属性(请记住,数组本身就是对象)。浏览器倾向于以特殊方式显示数组和类似数组的对象,例如[ ... , ... , ... ]。什么是难以捉摸的“NodeLists”,我如何选择一个?请参阅我的答案的第一部分。你不能选择 NodeList s,它们是选择的结果。据我所知,甚至没有一种以NodeList编程方式创建s 的方法(即创建一个空的并稍后添加节点),它们仅由一些DOM方法/属性返回。

手掌心

0. a和a有什么区别?HTMLCollectionNodeList以下是一些定义。DOM Level 1 Spec - 其他对象定义:接口HTMLCollectionHTMLCollection是节点列表。可以通过序数索引或节点的名称或id属性来访问单个节点。注意:HTML DOM中的集合被假定为实时,这意味着它们会在更改基础文档时自动更新。DOM Level 3 Spec - NodeList接口NodeListNodeList接口提供有序节点集合的抽象,而不定义或约束此集合的实现方式。DOM中的NodeList对象是实时的。NodeList中的项可通过整数索引访问,从0开始。因此,它们都可以包含实时数据,这意味着DOM将在其值发生时更新。它们还包含一组不同的功能。如果您运行脚本,tableDOM元素包含a childNodes NodeList[2]和a,您将注意到是否检查控制台children HTMLCollection[1]。他们为什么不同?因为HTMLCollection只能包含元素节点,所以NodeList还包含一个文本节点。在此输入图像描述1. document.getElementsByTagName("td")和之间有什么区别$("td")?document.getElementsByTagName("td")返回DOM元件的阵列(一NodeList),$("td")被称为jQuery对象,其具有从所述元件document.getElementsByTagName("td")上其属性0,1,2等,主要的区别是,jQuery对象是慢一点来检索,但可访问所有的方便jQuery函数。2. $("#myTable")和$("td")是对象(jQuery对象)。为什么console.log还在它们旁边显示DOM元素数组,它们不是对象而不是数组?他们对自己的属性的对象0,1,2等设置为DOM元素。这是一个简单的例子:它是如何工作的:的jsfiddle&nbsp; &nbsp; var a = {&nbsp; &nbsp; &nbsp; &nbsp; 1: "first",&nbsp; &nbsp; &nbsp; &nbsp; 2: "second"&nbsp; &nbsp; }&nbsp; &nbsp; alert(a[1]);3.什么是难以捉摸的“NodeLists”,我该如何选择?您一直在代码中检索它们,getElementsByClassName并getElementsByTagName返回NodeLists

森林海

附加说明HTMLCollection和NodeList有什么区别?一的HTMLCollection只包含元素节点(标签)和节点列表包含了所有的节点。有四种节点类型:元素节点属性节点文本节点评论节点nodeTypes元素内的空格被视为文本,文本被视为节点。考虑以下:<ul id="myList">&nbsp; <!-- List items -->&nbsp; <li>List item 1</li>&nbsp;&nbsp; <li>List item 2</li>&nbsp; <li>List item 3</li>&nbsp; <li>List item 4</li>&nbsp; <li>List item 5</li></ul>空白: <ul id="myList">&nbsp; &nbsp;<li>List item</li></ul>没有空格: <ul id="myList"><li>List item</li></ul>
随时随地看视频慕课网APP
我要回答