对于DOM,我一直对HTMLCollections,对象和数组感到困惑。例如…
document.getElementsByTagName("td")
$("td")
$("#myTable")
还请提供以下脚本的任何解释。
谢谢
[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。
NodeList
HTMLCollection
两个接口是 集合 DOM节点。它们在提供的方法和可以包含的节点类型方面有所不同。尽管NodeList可以包含任何节点类型,但是HTMLCollection假定仅包含元素节点。 一个HTMLCollection提供相同的方法作为一个NodeList和另外一个被调用的方法namedItem。
namedItem
当必须提供对多个节点的访问时,总是使用集合,例如,大多数选择器方法(例如getElementsByTagName)返回多个节点或获取对所有子节点的引用(element.childNodes)。
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属性(请记住,数组本身就是对象本身)。浏览器倾向于以特殊方式显示数组和类似数组的对象,例如[ ... , ... , ... ]。
length
[ ... , ... , ... ]
什么是难以捉摸的“ NodeLists”,以及如何选择一个?
请参阅我的答案的第一部分。您不能 选择 NodeList s,它们是 选择 的 结果 。
据我所知,甚至没有办法以NodeList编程方式创建s(即创建一个空的并稍后添加节点),它们仅由某些DOM方法/属性返回。