DOM Tutorial

Tutorial based on the DOM 2 Core specification implemented by all browsers

The Document Object Model describes the structure of an XML or HTML document, a web page and allows access to each individual element. We will see in this tutorial that you can modify each element of a page, or create a page or a part through DOM's methods.

DOM history

The first description of the interface was part of HTML 4 and one can speak of DOM Level 0 and date of 1997.

The advent of Dynamic HTML in 1997 on Netscape and Internet Explorer resulted in a definition known as DOM intermediary.

The W3C was founded in 1994 to promote Web standards. In 1998 it established the first specification called DOM Level 1.
DOM Level 2 was introduced in 2000.

Versions of DOM

Core DOM Level 1 specification is the first standard.

DOM Level 2 adds many methods to interfaces already defined in level 1. Among others getElementById that is often used.

HTMLDocument and XMLDocument supplements are specific to HTML page and XML files.

DOM Level 3 adds new interfaces, new types of data and extra methods to DOM 2 interfaces.

DOM 2 interfaces

We will see the details of interfaces and how to use them in examples:

     * List of attributes
     * List of methods
     * Access to the content
     * Add elements
     * Example: Include another page
     * Modify the contents
     * Remove items

Interfaces:

     * Structure and hierarchy of interfaces of DOM Level 2 Core.
     * Node.
     * NodeList.

HTMLDocument

Supplement for the HTML pages.

* Document and HTMLDocument.

XMLDocument

Supplement for XML documents.

DOM 3

We will see the new DOM interfaces 3.

Case study

DOM's objects and properties are sufficient to change dynamically graphical element in a webpage.
Example to change images and the background in a Web page.