Menu
I've always been confused between HTMLCollections, objects, and arrays when it comes to DOM. For instance...
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?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> 
727
A NodeList may look like an array, but in reality, they both are two completely different things. A NodeList object is basically a collection of DOM nodes extracted from the HTML document. An array is a special data-type in JavaScript, that can store a collection of arbitrary elements.
An HTMLCollection is not an Array! An HTMLCollection may look like an array, but it is not. You can loop through an HTMLCollection and refer to its elements with an index. But you cannot use Array methods like push(), pop(), or join() on an HTMLCollection.
Sometimes, we want to convert an HTMLCollection object into a JavaScript array. This way, we can use array methods to manipulate HTML element objects in the HTMLCollection object.
An HTMLCollection is a list of nodes. An individual node may be accessed by either ordinal index or the node's name or id attributes. Note: Collections in the HTML DOM are assumed to be live meaning that they are automatically updated when the underlying document is changed.
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 HTMLCollection (see DOM4 specification).
$("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.
69
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
