DOM Tutorial => Getting started with DOM

Remarks

The DOM, or Document Object Model, is the API used by web browsers and other applications to access the contents of an HTML document.

The DOM represents the structure as a tree, nodes can contain child-nodes, nodes with no children are said leaf nodes.

With it, one can manipulate the structure and properties of the document and its constituent parts.

Major topics include finding elements, accessing style information, and animation.

Most work with the DOM is done using the JavaScript language, but the API is open to any language.

Versions

W3C DOM

Version	Release Date
1	1998-10-01
2 (Core)	2000-11-13
3 (Core)	2004-04-07
4	2013-11-07

Selectors API Level

Version	Release Date
1	2013-02-21

Getting started

The DOM (Document Object Model) is the programming interface for HTML and XML documents, it defines the logical structure of documents and the way a document is accessed and manipulated.

The main implementers of the DOM API are web browsers. Specifications are standardized by the W3C and the WHATWG groups, and the object model specifies the logical model for the programming interface.

The representation of DOM structure resembles a tree-like view, where each node is an object representing a part of the markup, depending on the type each element also inherits specific and shared functionalities.

The name "Document Object Model" was chosen because it is an "object model" in the traditional object oriented design sense: documents are modeled using objects, and the model encompasses not only the structure of a document, but also the behavior of a document and the objects of which it is composed. In other words, taking the example HTML diagram, the nodes do not represent a data structure, they represent objects, which have functions and identity. As an object model, the Document Object Model identifies:

the interfaces and objects used to represent and manipulate a document
semantics of these interfaces and objects - including both behavior and attributes
the relationships and collaborations among these interfaces and objects

HTML markup

example input:

<html>
  <head>
    <title>the title</title>
    <link href='css/app.css' type='text/css' rel='stylesheet'>
    <script src='js/app.js'></script>
  </head>
  <body>
    <h1>header</h1>
    <div>
      <p>hello!</p>
    </div>
  </body>
</html>

DOM element output:

                             ------------                             
                             | document |    <--- DOM root object.                           
                             ------------                             
                                  |                                   
                                  |                                   
                             ------------                             
                             |   html   |     <--- document.documentElement                  
                             ------------                             
                    ______________|______________                     
                    |                           |                     
               ------------                ------------               
               |   head   |                |   body   |               
               ------------                ------------               
      ______________|______________             |______________       
      |             |             |             |             |       
 ------------  ------------  ------------  ------------  ------------ 
 |  title   |  |   link   |  |  script  |  |    h1    |  |   div    | 
 ------------  ------------  ------------  ------------  ------------ 
                                                              |       
                                                              |       
                                                         ------------ 
                                                         |    p     | 
                                                         ------------

All the above elements inherit from HTMLElement interface and get customized depending on specific tag

Retrieving existing html elements

One of the most common tasks is retrieving an existing element from the DOM to manipulate. Most commonly these methods are executed on document , because it is the root node, but all these methods work on any HTML element in the tree. They will only return children from the node it is executed on.

Retrieve by id

var element = document.getElementById("logo");

element will contain the (only) element that has its id attribute set to "logo", or contains null if no such element exists. If multiple elements with this id exist, the document is invalid, and anything can happen.

Retrieve by tag name

var elements = document.getElementsByTagName("a");

elements will contain a live HTMLCollection (an array-like object) of all link tags in the document. This collection is in sync with the DOM, so any changes made to the DOM are reflected in this collection. The collection provides random access and has a length.

var element = elements[0];
//Alternative
element = elements.item(0);

element contains the first encountered HTML link element, or null if the index is out of bounds

var length = elements.length;

length is equal to the number of HTML link elements currently in the list. This number can change when the DOM is changed.

Retrieve by class

var elements = document.getElementsByClassName("recipe");

elements will contain a live HTMLCollection (an array-like object) of all elements where their class attribute includes "recipe". This collection is in sync with the DOM, so any changes made to the DOM are reflected in this collection. The collection provides random access and has a length.

var element = elements[0];
//Alternative
element = elements.item(0);

element contains the first encountered HTML element with this class. If there are no such elements, element has the value undefined in the first example and null in the second example.

var length = elements.length;

length is equal to the number of HTML elements that currently have the class "recipe". This number can change when the DOM is changed.

Retrieve by name

var elements = document.getElementsByName("zipcode");

elements will contain a live NodeList (an array-like object) of all elements with their name attribute set to "zipcode". This collection is in sync with the DOM, so any changes made to the DOM are reflected in this collection. The collection provides random access and has a length.

var element = elements[0];
//Alternative
element = elements.item(0);

element contains the first encountered HTML element with this name.

var length = elements.length;

length is equal to the number of HTML elements that currently have "zipcode" as their name attribute. This number can change when the DOM is changed.

Use innerHTML

HTML

<div id="app"></div>

document.getElementById('app').innerHTML = '<p>Some text</p>'

and now HTML looks like this

<div id="app">
    <p>Some text</p>
</div>

Wait for DOM to be loaded

Use DOMContentLoaded when the <script> code interacting with DOM is included in the <head> section. If not wrapped inside the DOMContentLoaded callback, the code will throw errors like

Cannot read something of null

document.addEventListener('DOMContentLoaded', function(event) {
    // Code that interacts with DOM
});

^{https://html.spec.whatwg.org/multipage/syntax.html#the-end}

Alternative to `DOMContentLoaded`

An alternative (suitable for IE8)

// Alternative to DOMContentLoaded
document.onreadystatechange = function() {
    if (document.readyState === "interactive") {
        // initialize your DOM manipulation code here
    }
}

^{https://developer.mozilla.org/en/docs/Web/API/Document/readyState}

PDF - Download DOM for free

Previous Next

DOM

Fastest Entity Framework Extensions

Remarks

Versions

W3C DOM

Selectors API Level

Getting started

HTML markup

DOM element output:

Retrieving existing html elements

Retrieve by id

Retrieve by tag name

Retrieve by class

Retrieve by name

Use innerHTML

Wait for DOM to be loaded

Alternative to `DOMContentLoaded`

Got any DOM Question?

DOM

DOM Getting started with DOM

Fastest Entity Framework Extensions

Remarks

Versions

W3C DOM

Selectors API Level

Getting started

HTML markup

DOM element output:

Retrieving existing html elements

Retrieve by id

Retrieve by tag name

Retrieve by class

Retrieve by name

Use innerHTML

Wait for DOM to be loaded

Alternative to DOMContentLoaded

Got any DOM Question?

Alternative to `DOMContentLoaded`