The DOM API

Browsers come with a set of built-in objects that model data used and operations performed by your applications:

• The Browser Object Model API (BOM) features Window object that models browser's windows and tabs.
• The Document Object Model API (DOM) features Document object that models web pages displayed in browser's windows.

The DOM API specification serves two purposes:

• how browser should make a model of HTML documents using objects:
  When a browser loads a web page, it creates a structure, a DOM tree, that is a live representation of the web page. The DOM tree is made of Node objects and each node represents an element that is part of the web page.
• how JS programs can access this model for changing HTML documents:
  JavaScript program can access the DOM tree for modifying the HTML document. This does not change the HTML code, but only the DOM, the representation of the document.

1 Creating a model of a web page

The image below shows a simple HTML document and the DOM tree as it would be created by the majority of browsers. In the HTML document, the body element includes 3 HTML elements. In the DOM tree, the node for the body element contains 7 child nodes.

The image below displays the same HTML document of the previous example, this time HTML tags are written on a single line. The DOM tree is slightly different: the node for the body element contains 5 child nodes.

2 Accessing elements of a DOM tree

The DOM queries allow you to select an element or a collection of elements from the DOM tree.

DOM queries: methods that return a single elements

returned value	document method
Element	document.getElementById('id')
Element	document.querySelector('CSS selector')

DOM queries: methods that return one or more elements

returned value	document method
HTMLCollection	document.getElementsByClassName('class name')
HTMLCollection	document.getElementsByTagName('tag name')
NodeList	document.querySelectorAll('CSS selector1 [, CSS selector2]')

The document.getElementsByClassName() method was first supported by IE9.
The document.querySelector() and document.querySelectorAll() methods were first supported by IE8.

Example: DOM Queries

See the Pen selecting elements AKA DOM queries by Massimiliano De Simone (@maxdesimone) on CodePen.

Traversing the DOM

Using the Node properties below you can move from a node to a related one.

returned value	Node's properties
NodeList	Node.childNodes
Node	Node.parentNode
Node	Node.previousSibling
Node	Node.nextSibling
Node	Node.firstChild
Node	Node.lastChild

Example: DOM traversing using Node properties

See the Pen DOM traversing by Massimiliano De Simone (@maxdesimone) on CodePen.

3 Updating Nodes Content

Working with text content of elements:

returned value	Node properties
string	Node.textContent (IE9+)
string	Node.nodeValue

Example: use the textContent property to select/update content of Element

See the Pen work with text content of elements using textContent property by Massimiliano De Simone (@maxdesimone) on CodePen.

Example: use the nodeValue property to select/update content of Text

See the Pen work with text content of elements using nodeValue property by Massimiliano De Simone (@maxdesimone) on CodePen.

Working with HTML content of elements:

• using the innerHTML property
• using the DOM manipulation methods

Example: use the innerHTML property to select/update HTML content

See the Pen work with HTML content using innerHTML property by Massimiliano De Simone (@maxdesimone) on CodePen.

Example: use the DOM manipulation methods for updating HTML content

See the Pen work with HTML content using manipulation methods by Massimiliano De Simone (@maxdesimone) on CodePen.

Working with the values of Node attributes :

returned value	Element properties
string	Element.className
string	Element.id
returned value	Element methods
undefined	Element.setAttribute('attrName','attrValue')
string	Element.getAttribute('attrName')
boolean	Element.hasAttribute('attrName')
undefined	Element.removeAttribute('attrName')

Example: update attribute nodes attributes

See the Pen work with nodes attributes by Massimiliano De Simone (@maxdesimone) on CodePen.