DOM Tutorial

The Document Object Model allows interfacing programming languages with XML documents
by associating them with an object oriented model.
It 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.

This tutorial is based on the DOM 2 Core specification implemented by all browsers.

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.

Objects and methods

Throught DOM you can find elements in the document

Overview

What is DOM and how to use it.

Structure and hierarchy of interfaces of DOM Level 2 Core

Objects and sub-objets in a document.

Node

Each element of a HTML page or XML document is a node. The attributes and methode.

NodeList

Methods of a list of nodes.

Document and HTMLDocument

The document itself is a DOM object. HTMLDocument is a sub-object for a webpage.

Case studies

Changing images and the background in a Web page

DOM's objects and properties are sufficient to change dynamically graphical element in a webpage.

Displaying dynamically a video reader with Node

References

• Recommendation from the W3C. DOM 1 defines all the attributes and functions.