/

HTML / CSS / JavaScript Tutorial

JavaScript Tutorial: Document Object Model (DOM)

[this page | pdf | back links]

The JavaScript HTML Document Object Model (‘DOM’) provides a way for JavaScript to access all elements of an HTML webpage. Fuller details of the DOM are given here. There is an associated Browser Object Model (BOM), details of which are given here.

 

The browser creates a DOM (i.e. a document object) for a page when the page is first loaded. This has a tree structure, with the root element (or ‘node’) being the page’s <html> element. The root element then has two sub-elements (or ‘nodes’), i.e. the <head> element and the <body> element.

 

The <head> element will in turn often include as one of its ‘child’ nodes a <title> element. The <body> element contains the main body of the webpage and will typically contain many different elements, some nested within others. JavaScript can change all the elements (including all their attributes), can add new elements or remove existing ones, can react to all existing events and create new ones.

 

Formally, the DOM is a W3C (World Wide Web Consortium) standard. It has the following aim, according to W3C: “The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure and style of a document.” It is formally subdivided into three parts: (a) the Core DOM for all document types, (b) the XML DOM for XML documents, and (c) the HTML DOM for HTML documents. It adopts an object-orientated programming approach, with the HTML elements being objects which have properties and to which can be applied methods. The elements can also trigger events.

 

A common way of accessing an element is to assign it an id (i.e. set its id attribute object to a prespecified value). The element can then be identified in Javascript by applying the getElementById method to the document object, returning an object corresponding to the element. Its properties (e.g. its innerHTML property, which is the text within an element) can be set by assigning values to the relevant property of the element object. For example, the following example returns a web page that says “hello”.

 

<html>

<body>

<div id="example"></div>

<script>document.getElementById("example").innerHTML = "hello"</script>

</body>

</html>

 

Common ways of accessing the DOM include:

 

Aim

Example JavaScript

Description

Finding / accessing elements

document.getElementById(id)

Returns object corresponding to element with this id attribute

document.getElementsByTagName(name)

Returns collection of elements by tag name (i.e. by type of element)

document.getElementsByClassName(name)

Returns collection of elements by class name

 

document.querySelectorAll(CSSSelector)

Returns collection of elements by CSSSelector

Changing elements

element.innerHTML = HTMLcontent

Change inner HTML of element

element.attribute = value

Change attribute value of element (value needs to be valid for that attribute)

element.setAttribute(attribute, value)

Change attribute value for a given element

Adding and deleting elements

document.createElement(element)

Creates HTML element

document.appendChildElement(element)

Add HTML element

document.removeChildElement(element)

Remove HTML element

document.replaceChildElement(element)

Remove HTML element

document.write(element)

Write directly to HTML output

 

Other points to note about the DOM include:

 

(a)    The DOM uses the idea of nodes and a node tree. This involves a tree structure where each branching point is a separate node. So, nodes belong to (are children of) just one other node (their parent) back to the root node (which in the DOM is the document object)

(b)   HTML elements are ‘element’ nodes, the attributes of these elements are ‘attribute’ nodes, the text within HTML elements are ‘text’ nodes and comments are ‘comment’ nodes

(c)    A NodeList object represents a set of nodes, e.g. an HTML element’s collection of child nodes. These will be indexed and each node within the NodeList can then be associated with another NodeList (its children)

(d)   The HTML document, once it has been loaded into the web browser, is formally part of the corresponding Window object and can therefore be accessed via window.document

(e)    The DOM supports a range of (own) methods and properties, see here.

(f)     HTML elements (‘nodes’) within the DOM also support a range of more generic methods and properties, see here. These also apply to the document object itself but do not always make much sense when applied in this manner.

(g)    HTML element attributes are represented by an Attr object. These are always children of a specific HTML element. The properties and methods that apply to Attr objects are shown here.

(h)   A NamedNodeMap object represents an unordered collection of nodes, e.g. the set of attributes assigned to a given HTML element. Properties and methods that apply to NamedNodeMap objects are shown here.

(i)     The DOM object and its components can be thought of as an example of an XML document. XML documents have several methods and properties not otherwise covered in the above (such as XMLHTTPRequest, which can be used to send, request and receive data from the server once a webpage has loaded), see here.

 

Further details are set out in the following pages and in links within them:

 

1.      DOM own properties and methods

2.      HTML Element objects: Properties and Methods

3.      HTML Attribute objects: Properties and Methods

4.      NamedNodeMap objects: Properties and Methods

5.      Event objects: Properties and Methods

6.      MouseEvent objects: Properties and Methods

7.      KeyboardEvent objects: Properties and Methods

8.      HashChangeEvent objects: Properties and Methods

9.      PageTransitionEvent objects: Properties and Methods

10.   FocusEvent objects: Properties and Methods

11.   AnimationEvent objects: Properties and Methods

12.   TransitionEvent objects: Properties and Methods

13.   WheelEvent objects: Properties and Methods

14.   TouchEvent objects: Properties and Methods

 

I.       Style objects: Properties and Methods

II.      Creating and Accessing HTML Elements in JavaScript

III.    Standard HTML DOM properties and methods

IV.    The JavaScript BOM (Browser Object Model)

V.     The JavaScript XML DOM

 


NAVIGATION LINKS
Contents | Prev | Next | JavaScript


Desktop view | Switch to Mobile