HTMLCollection，NodeLists和对象数组之间的区别 [英] Difference between HTMLCollection, NodeLists, and arrays of objects
问题描述
-
document.getElementsByTagName（td）和$（td）？ -
$（＃myTable code>和$（td）是对象（jQuery对象）。为什么console.log也显示在它们旁边的DOM元素数组，它们不是对象而不是数组？ - 所有关于NodeLists的难点是什么？选择一个？
还请提供以下脚本的任何解释。
谢谢
[123，abc，321，cba] = [123，abc cba]
{123：123，abc：abc，321：321，cba：cba} =对象{123 = 123，abc =abc，321 = }
Node = Node {ELEMENT_NODE = 1，ATTRIBUTE_NODE = 2，TEXT_NODE = 3，更多...}
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 // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
< html xmlns =http://www.w3.org/1999/xhtml>
< head>
< meta http-equiv =content-typecontent =text / html; charset = ISO-8859-1/>
< title>集合？< / title>
< script src =http://code.jquery.com/jquery-latest.jstype =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节点。
An HTMLCollection 提供与 NodeList 相同的方法，另外还提供了一个名为 namedItem 。
当需要向多个节点提供访问时，始终使用集合，例如大多数选择器方法（例如 getElementsByTagName ）返回多个节点或获取对所有子节点的引用（ element.childNodes ）。
有关更多信息，请查看 DOM4规范 - 集合。
document.getElementsByTagName（ td）和$（td）？
getElementsByTagName 是DOM界面的方法。它接受一个标签名称作为输入并返回一个 NodeList （某些浏览器选择返回 HTMLCollection 而不是，因为它是 NodeList 的超集。）
$（td）大概是jQuery。它接受任何有效的CSS / jQuery选择器并返回一个jQuery对象。
标准DOM集合和jQuery选择之间的最大区别是DOM集合通常 live（不是所有的方法都返回一个实时集合），即DOM的任何更改都会反映在集合中，如果它们受到影响。它们就像DOM树上的视图，而jQuery的选择是调用函数时DOM树的快照。
为什么console.log也显示在它们旁边的DOM元素数组，它们不是对象而不是数组？
jQuery对象是类似数组的对象，即它们具有数值属性和长度属性（请记住，数组只是对象他们自己）。浏览器往往以特殊的方式显示数组和类似数组的对象，例如 [...，...，...] 。
所有关于难以捉摸的节点列表是什么，如何选择一个？
看到我的答案的第一部分。您不能选择 NodeList ，它们是选择的结果。
据我所知，甚至没有办法以编程方式创建 NodeList （即创建一个空并且稍后添加节点），它们只能由某些DOM方法/属性返回。
I've always been confused between HTMLCollections, objects, and arrays when it comes to DOM. For instance...
- 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.
Thank you
[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>
First I will explain the difference between NodeList and HTMLCollection.
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.
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).
For more information, have a look at DOM4 specification - Collections.
What is the difference between
document.getElementsByTagName("td")and$("td")?
getElementsByTagName is method of the DOM interface. It accepts a tag name as input and returns a NodeList (some browsers chose to return HTMLCollection instead, which is OK, since it is a superset of NodeList).
$("td") is presumably jQuery. It accepts any valid CSS/jQuery selector and returns a jQuery object.
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.
Why is console.log also showing the array of DOM elements beside them, and are they not objects and not an array?
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 [ ... , ... , ... ].
What is the elusive "NodeLists" all about, and how do I select one?
See the first part of my answer. You cannot select NodeLists, they are the result of a selection.
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屋！
