Notes

Querying the DOM

Edit on GitHub


Web Development
4 minutes

Querying is fancy word for searching/locating DOM elements using API methods, like getElementById() for example. The DOM (Document Object Model) represents a document as a tree. The tree is made up of parent-child relationships, a parent can have one or many children nodes.

Note that generally a DOM is a model for a structured document, it is not restricted to or even invented for HTML or XML. A DOM is a general concept applicable to any document, especially those (the vast majority of them do) showing a hierarchical structure in which you need to navigate. You can speak about the DOM of a MS-Word document and there are APIs to navigate these as well.

There are a few different ways in which you can get HTML elements in JavaScript

  • getElementById() returns an element by it’s ID
  • getElementsByClassName() returns a live HTMLCollection (array-like object)
  • getElementsByTagName() returns a live HTMLCollection
  • getElementsByTagNameNS() returns a live NodeList
  • querySelector() returns the first element, takes a CSS selector (.class, #id, input[type="text"]) as argument
  • querySelectorAll() returns a non-live NodeList of all elements
  • getElementsByName() returns a live NodeList
1getElementById() // return an Element
2getElementsByClassName() // returns an array-like object (HTMLCollection)
3getElementsByName() // returns a NodeList Collection
4getElementsByTagName() // returns an HTMLCollection
5getElementsByTagNameNS() // returns a NodeList

Examples

1// getElementByID()
2// gets an HTML element by providing it's ID attribute in HTML
3// Return an Element
4document.getElementById('modal')
5
6// getElementsByClassName()
7// 
8document.getElementsByClassName('.post') // notice the S in ElementS? Return an array-like object (HTMLCollection) of elements

Notes

DOM, Element, Node

  • The DOM is a tree structure that represents the HTML of the website. It’s the model of your HTML page that the browser cerates
  • A Node is simply an HTML element. Specifically, Node is an interface object that is implemented by multiple other objects, including Document and Element. A parent node can have many children-nodes
  • An Element is an object of a Document

HTMLCollection and NodeList

  • An HTMLCollection is a generic collection (an array-like object similar to arguments) of elements (in document order) and offers methods and properties for selecting from the list
1// HTMLCollection Properties & Methods
2.length // returns no. of items in the collection
3.item() // returns the specific node at the index (zero-based) e.g. forms.item(0)
4.namedItem() // Returns the specific node whose ID or, as a fallback, name matches the string specified by name. e.g. forms.namedItem('myForm')
  • NodeList objects are collections of nodes such as those returned by properties such as Node.childNodes and the document.querySelectorAll() method. Although it’s not an array, it is still possible to run forEach() on it
1// NodeList Properties & Methods
2NodeList.length // The number of nodes in the NodeList.
3NodeList.item() // Returns an item in the list by its index, or null if the index is out-of-bounds; can be used as an alternative to simply accessing nodeList[idx] (which instead returns  undefined when idx is out-of-bounds).
4NodeList.entries() // Returns an `iterator` allowing to go through all key/value pairs contained in this object.
5NodeList.forEach() // Executes a provided function once per NodeList element.
6NodeList.keys() // Returns an `iterator` allowing to go through all keys of the key/value pairs contained in this object.
7NodeList.values() // Returns an `iterator` allowing to go through all values of the key/value pairs contained in this object.

Live vs. Non-live

Live means an HTMLCollection or NodeList is automatically updated when the underlying document is changed (i.e. you make a change to the DOM). An HTMLCollection is pretty much always live, the changes in the DOM are reflected in the collection. A NodeList may or may not be live depending on the method used to get it.

1document.getElementsByClassName() // HTMLCollection, live
2document.getElementsByTagName() // HTMLCollection (NodeList in Webkit), live 
3document.getElementsByName() // NodeList, live
4document.querySelectorAll() // NodeList, non-live
5document.getElementsByTagNameNS() // NodeList (HTMLCollection in Gecko & IE, NodeList with `.nameditem()` in Opera, pure NodeList in Webkit), live
Browse all topics