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

javascript dom jquery

2022-08-30 05:38:03

当涉及到 DOM 时，我总是在 HTMLCollections、对象和数组之间感到困惑。例如......

和有什么区别？document.getElementsByTagName("td")$("td")
$("#myTable")并且是对象（jQuery 对象）。为什么控制台.log旁边还显示DOM元素的数组，它们不是对象而不是数组吗？$("td")
难以捉摸的“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>

答案 1

首先，我将解释和之间的区别。NodeListHTMLCollection

这两个接口都是 DOM 节点的集合。它们在提供的方法和可以包含的节点类型方面有所不同。虽然 a 可以包含任何节点类型，但 a 应该只包含元素节点。
An 提供了与相同的方法，另外还提供了一个名为的方法。NodeListHTMLCollectionHTMLCollectionNodeListnamedItem

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

有关详细信息，请查看 DOM4 规范 - 集合。

和有什么区别？document.getElementsByTagName("td")$("td")

getElementsByTagName是 DOM 接口的方法。它接受标记名称作为输入并返回一个（请参阅 DOM4 规范）。HTMLCollection

$("td")大概是jQuery。它接受任何有效的 CSS/jQuery 选择器，并返回一个 jQuery 对象。

标准 DOM 集合和 jQuery 选择之间最大的区别在于 DOM 集合通常是实时的（尽管并非所有方法都返回实时集合），即对 DOM 的任何更改如果受到影响，都会反映在集合中。它们就像 DOM 树上的视图，而 jQuery 选择是调用函数时 DOM 树的快照。

为什么控制台.log旁边还显示DOM元素的数组，它们不是对象而不是数组吗？

jQuery对象是类似数组的对象，即它们具有数值属性和属性（请记住，数组只是对象本身）。浏览器倾向于以特殊方式显示数组和类似数组的对象，例如 .length[ ... , ... , ... ]

难以捉摸的“NodeLists”是关于什么的，我该如何选择一个？

请参阅我的答案的第一部分。您不能选择 s，它们是选择的结果。NodeList

据我所知，甚至没有一种方法可以以编程方式创建s（即创建一个空的并在以后添加节点），它们仅由某些DOM方法/属性返回。NodeList

答案 2

0. `HTMLCollection` 和 `NodeList` 有什么区别？

以下是一些适合您的定义。

DOM 级别 1 规范 - 其他对象定义：

Interface HTMLCollection

HTMLCollection 是一个节点列表。可以通过序号索引或节点的名称或 id 属性访问单个节点。注：假定 HTML DOM 中的集合是实时的，这意味着当基础文档发生更改时，它们会自动更新。

DOM 级别 3 规范 - 节点列表

接口节点列表

NodeList 接口提供节点的有序集合的抽象，而不定义或约束此集合的实现方式。DOM 中的 NodeList 对象是实时的。

NodeList 中的项可通过整数索引进行访问，从 0 开始。

因此，它们都可以包含实时数据，这意味着DOM将在它们的值更新时更新。它们还包含一组不同的函数。

如果运行脚本，则在检查控制台时，您会注意到 DOM 元素同时包含 a 和 .为什么它们不同？由于只能包含元素节点，因此 NodeList 还包含一个文本节点。tablechildNodesNodeList[2]childrenHTMLCollection[1]HTMLCollection

enter image description here

1. 和有什么区别？`document.getElementsByTagName("td")$("td")`

document.getElementsByTagName("td")返回一个 DOM 元素数组（a），称为 jQuery 对象，其属性、、等具有 from 的元素。主要区别在于jQuery对象的检索速度稍慢，但可以访问所有方便的jQuery函数。NodeList$("td")document.getElementsByTagName("td")012

2.并且是对象（对象）。为什么在它们旁边还显示DOM元素的数组，它们不是对象而不是数组吗？`$("#myTable")$("td")jQueryconsole.log`

它们是属性、、等设置为 DOM 元素的对象。这里有一个简单的例子：它是如何工作的：012

jsFiddle

    var a = {
        1: "first",
        2: "second"
    }
    alert(a[1]);

3. 难以捉摸的“NodeLists”到底是什么，我该如何选择一个？

您一直在代码中检索它们，并且两者都返回getElementsByClassNamegetElementsByTagNameNodeList

NodeList

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

0. HTMLCollection 和 NodeList 有什么区别？

1. 和 有什么区别？document.getElementsByTagName("td")$("td")

2.并且是对象（对象）。为什么在它们旁边还显示DOM元素的数组，它们不是对象而不是数组吗？$("#myTable")$("td")jQueryconsole.log

3. 难以捉摸的“NodeLists”到底是什么，我该如何选择一个？

0. `HTMLCollection` 和 `NodeList` 有什么区别？

1. 和有什么区别？`document.getElementsByTagName("td")$("td")`

2.并且是对象（对象）。为什么在它们旁边还显示DOM元素的数组，它们不是对象而不是数组吗？`$("#myTable")$("td")jQueryconsole.log`