HTMLCollection、NodeLists 和对象数组的区别 [英] Difference between HTMLCollection, NodeLists, and arrays of objects
问题描述
当涉及到 DOM 时，我总是在 HTMLCollections、对象和数组之间感到困惑.例如...
I've always been confused between HTMLCollections, objects, and arrays when it comes to DOM. For instance...
document.getElementsByTagName("td")和$("td")有什么区别?$("#myTable")和$("td")是对象(jQuery 对象).为什么console.log 还显示旁边的DOM 元素数组，而且它们不是对象也不是数组?- 什么是难以捉摸的NodeLists"?全部，以及如何选择一个?
- What is the difference between
document.getElementsByTagName("td")and$("td")? $("#myTable")and$("td")are objects (jQuery objects). Why is console.log also showing the array of DOM elements beside them, and are they not objects and not an array?- What is the elusive "NodeLists" all about, and how do I select one?
还请提供对以下脚本的任何解释.
Please also provide any interpretation of the below script.
[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 应该只包含 Element 节点.HTMLCollection 提供与 NodeList 相同的方法，另外还有一个名为 namedItem 的方法.
Both interfaces are collections of DOM nodes. They differ in the methods they provide and in the type of nodes they can contain. While a NodeList can contain any node type, an HTMLCollection is supposed to only contain Element nodes.
An HTMLCollection provides the same methods as a NodeList and additionally a method called namedItem.
当必须向多个节点提供访问权限时，总是使用集合，例如大多数选择器方法(例如 getElementsByTagName)返回多个节点或获取对所有子节点的引用(element.childNodes).
Collections are always used when access has to be provided to multiple nodes, e.g. most selector methods (such as getElementsByTagName) return multiple nodes or getting a reference to all children (element.childNodes).
有关更多信息，请查看DOM4 规范 - 集合.
For more information, have a look at DOM4 specification - Collections.
document.getElementsByTagName("td") 和 $("td") 有什么区别?
getElementsByTagName 是 DOM 接口的方法.它接受一个标签名称作为输入并返回一个 HTMLCollection(参见 DOM4 规范).
getElementsByTagName is method of the DOM interface. It accepts a tag name as input and returns a HTMLCollection (see DOM4 specification).
$("td") 大概是 jQuery.它接受任何有效的 CSS/jQuery 选择器并返回一个 jQuery 对象.
$("td") is presumably jQuery. It accepts any valid CSS/jQuery selector and returns a jQuery object.
标准 DOM 集合和 jQuery 选择之间的最大区别在于 DOM 集合通常是实时的(尽管并非所有方法都返回实时集合)，即对 DOM 的任何更改都会反映在集合中，如果他们受到影响.它们就像 DOM 树上的视图，而 jQuery 选择是调用函数时 DOM 树的快照.
The biggest differences between standard DOM collections and jQuery selections is that DOM collections are typically live (not all methods return a live collection though), i.e. any changes to the DOM are reflected in the collections if they are affected. They are like a view on the DOM tree, whereas jQuery selections are snapshots of the DOM tree in the moment the function was called.
为什么console.log 还显示旁边的DOM 元素数组，而且它们不是对象也不是数组?
Why is console.log also showing the array of DOM elements beside them, and are they not objects and not an array?
jQuery 对象是类数组对象，即它们具有数字属性和 length 属性(请记住，数组本身就是对象).浏览器倾向于以一种特殊的方式显示数组和类似数组的对象，比如 [ ... , ... , ... ].
jQuery objects are array-like objects, i.e. they have numeric properties and a length property (keep in mind that arrays are just objects themselves). Browsers tend to display arrays and array-like objects in a special way, like [ ... , ... , ... ].
难以捉摸的NodeLists"是什么，我该如何选择?
What is the elusive "NodeLists" all about, and how do I select one?
请看我回答的第一部分.您不能选择 NodeList，它们是选择的结果.
See the first part of my answer. You cannot select NodeLists, they are the result of a selection.
据我所知，甚至没有一种以编程方式创建 NodeList 的方法(即创建一个空的节点并稍后添加节点)，它们仅由某些 DOM 方法/属性返回.
As far as I know there is not even a way to create NodeLists programatically (i.e. creating an empty one and adding nodes later on), they are only returned by some DOM methods/properties.
这篇关于HTMLCollection、NodeLists 和对象数组的区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
