Skip to content Skip to navigation

Connexions

You are here: Home » Content » Document Object Model

Navigation

Recently Viewed

This feature requires Javascript to be enabled.
 

Document Object Model

Module by: Hannes Hirzel. E-mail the author

Summary: This module explains what the Document Object Model (DOM) is and how to access the elements of it. There is an example how to add new elements.

Introduction

What is the Document object model?

The Document Object Model (DOM) is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of web pages. (Ref)

Many browsers have a developer mode which allows you to display the document object model in an outline view. The example file taken from the HTML5 module looks like this in the Firefox 10 page inspector (Menu 'tools' / 'web developer' / inspect).

Web developer inspect view in Firefox 10

The top pane shows the web console where JavaScript code may be executed interactively. The example given is document.getElementById("beverages") (see below).

The middle pane shows the rendered document. You may select a part of it with the mouse. Then the corresponding HTML element is highlighted in the middle pane as well as in the third pane. The third page shows the outline of the DOM.

More on the Firefox 10 page inspector

The same file in the Microsoft Internet Explorer 9 web development tools (F12). The white text between the HTML elements is represented as text nodes. Web developer inspect view in Firefox 10

Accessing DOM elements

In connection with the DOM a web page is called a document. The reference document points to the root object.document.getElementById("myList") gets a particular HTML element which has an id attribute of id="myList".

Other access methods are

  • getElementByClassName
  • getElementByName
  • getElementByTagName
  • getElementByTagNameNS

children and childNodes

There are two methods to access the nodes which have a particular node as a parent node -- children and childNodes. The first brings only the HTMLElement nodes, the second one brings all types of nodes, including text nodes (white space) and comment nodes. Most often when working with the content the children method is used.

Console view in IE9 -- childNodes and children

In the example list.children[0].textContent brings the content of the first HTMLElement (a li element) whereas list.childNodes[0].textContent brings back empty space (the content of a text node).

Creating new elements

document.createElement

With the method createElement you may create HTML elements of any type.

Example 1

In this example a pop up window is created and it is populated with document.createElement calls. 

var popup = window.open("", "_blank", 
            "height=400px, width=600px"
            );
var doc = popup.document;
doc.title = 'My Report Window';


var h = doc.createElement( 'h1' );
h.innerHTML = 'The title of the report';
doc.body.appendChild(h);
      
var p = doc.createElement( 'p' );
p.innerHTML = 'text, text, text ...';
doc.body.appendChild(p);

Example 2

In the following example a new list item is created with document.createElement("li"). 

myButton.onclick = function() {

    // create new list element, set the text and add it to the list
    var defineNewListItem = function(content) {var item = document.createElement("li"); 
                                               item.textContent = content; 
                                               return item};

    var newNode = defineNewListItem(new_beverage);

    var list = document.getElementById("beverages");

    list.insertBefore(newNode,list.lastElementChild);

    // display the number of list items  
    var listlength = list.children.length;
    var note = document.getElementById("note");
    note.textContent = listlength - 1 + " types of beverages";
}

The full example (adaptation from 'anonymous functions' module) is here.

Global object window onload event

To work with JavaScript on the DOM one has to make sure that the web page has been completely loaded. When the window.onload event is fired JavaScript code may be executed to work on the DOM. 


<!doctype html>  
  <html>  
  <head>  
    <title>onload test</title>  
    <script>  
	window.onload = function() {  
  	console.log("initialisation....");
  	// doSomethingElse();  
	};  
    </script>  
  </head>  
  <body>  
    <p>The load event fires when the document has finished loading!</p>  
  </body>  
</html>
(more)

References / Further Reading

Document Object Model (DOM) (W3C); DOM Level 3 Core

Mozilla Developer Network DOM reference

Traversing the DOM (Opera Developer Pages)

Content actions

Download module as:

PDF | EPUB (?)

What is an EPUB file?

EPUB is an electronic book format that can be read on a variety of mobile devices.

Downloading to a reading device

For detailed instructions on how to download this content's EPUB to your specific device, click the "(?)" link.

| More downloads ...

Add module to:

My Favorites (?)

'My Favorites' is a special kind of lens which you can use to bookmark modules and collections. 'My Favorites' can only be seen by you, and collections saved in 'My Favorites' can remember the last module you were on. You need an account to use 'My Favorites'.

| A lens I own (?)

Definition of a lens

Lenses

A lens is a custom view of the content in the repository. You can think of it as a fancy kind of list that will let you see content through the eyes of organizations and people you trust.

What is in a lens?

Lens makers point to materials (modules and collections), creating a guide that includes their own comments and descriptive tags about the content.

Who can create a lens?

Any individual member, a community, or a respected organization.

What are tags? tag icon

Tags are descriptors added by lens makers to help label content, attaching a vocabulary that is meaningful in the context of the lens.

| External bookmarks