HTMLCollection，NodeList和对象数组之间的区别

傅振濂

2023-03-14

问题内容：

对于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>

    <body>
        <a href="#">Link1</a>
        <a href="#">Link2</a>
        <table id="myTable">
            <tr class="myRow"><td>td11</td><td>td12</td></tr>
            <tr class="myRow"><td>td21</td><td>td22</td></tr>
        </table>
    </body> 
</html>

问题答案：

首先，我将解释之间的差异NodeList和HTMLCollection。

两个接口是集合
DOM节点。它们在提供的方法和可以包含的节点类型方面有所不同。尽管NodeList可以包含任何节点类型，但是HTMLCollection假定仅包含元素节点。
一个HTMLCollection提供相同的方法作为一个NodeList和另外一个被调用的方法namedItem。

当必须提供对多个节点的访问时，总是使用集合，例如，大多数选择器方法（例如getElementsByTagName）返回多个节点或获取对所有子节点的引用（element.childNodes）。

有关更多信息，请查看DOM4规范-Collections。

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方法/属性返回。

HTMLCollection，NodeList和对象数组之间的区别

相关阅读

相关文章

相关问答

相关工具

相关文档