Difference between HTMLCollection, NodeLists, and arrays of objects

by

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.

More Related Contents:

  1. How do I check if an element is hidden in jQuery?
  2. jQuery. Find all attribute values within/under elements `script or noscript or iframe` that have attribute keys as `src or href` [closed]
  3. Why does jQuery or a DOM method such as getElementById not find the element?
  4. How do I set/unset a cookie with jQuery?
  5. jQuery .live() vs .on() method for adding a click event after loading dynamic html
  6. How may I sort a list alphabetically using jQuery?
  7. Detect element content changes with jQuery
  8. How can I select an element by name with jQuery?
  9. If a DOM Element is removed, are its listeners also removed from memory?
  10. What is the most efficient way to create HTML elements using jQuery?
  11. Firing event on DOM attribute change
  12. jQuery object and DOM element
  13. How to show Page Loading div until the page has finished loading?
  14. How to bind bootstrap popover on dynamic elements
  15. How to show a spinner while loading an image via JavaScript
  16. How to move an iFrame in the DOM without losing its state?
  17. JavaScript: DOM load events, execution sequence, and $(document).ready()
  18. Get the DOM path of the clicked
  19. How to move table row in jQuery?
  20. Can I change an HTML element’s type?
  21. JavaScript scrollTo method does nothing?
  22. Select div using wildcard ID
  23. how to compare two elements in jquery [duplicate]
  24. How do I wrap a text selection from window.getSelection().getRangeAt(0) with an html tag?
  25. getElementById returning value only for first element [closed]
  26. querySelector vs. getElementById [closed]
  27. How to add DOM element script to head section?
  28. Delaying a jquery script until everything else has loaded
  29. User Activity Tracking using javascript library [closed]
  30. Create a table in SVG

Leave a Comment