Document Object Model (DOM)

The Document Object Model (DOM) is a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML and XML documents

The DOM is separated into 3 different parts / levels:

• Core DOM - standard model for any structured document

• XML DOM - standard model for XML documents

• HTML DOM - standard model for HTML documents

What is the XML DOM?

• A standard object model for HTML

• A standard programming interface for HTML

• Platform- and language-independent

• A W3C standard

All XML Elements Must Have a Closing TagXML Tags are Case SensitiveXML Elements Must be Properly NestedXML Documents Must Have a Root Element
    .....

• The entire document is a document node

• Every HTML element is an element node

• The text in the HTML elements are text nodes

• Every HTML attribute is an attribute node

• Comments are comment nodes

DOM Example                    DOM Lesson one     Hello world!   The HTML DOM Node Tree

---

• x.innerHTML - the text value of x

• x.nodeName - the name of x

• x.nodeValue - the value of x

• x.parentNode - the parent node of x

• x.childNodes - the child nodes of x

• x.attributes - the attributes nodes of x

---

• x.getElementById(id) - get the element with a specified id

• x.getElementsByTagName(name) - get all elements with a specified tag name

• x.appendChild(node) - insert a child node to x

• x.removeChild(node) - remove a child node from x

The XML DOM defines the objects and properties of all XML elements, and the methods (interface) to access them.

What is the HTML DOM?

The HTML DOM is:

The HTML DOM defines the objects and properties of all HTML elements, and the methods(interface) to access them.

 

DOM Nodes

According to the DOM, everything in an HTML document is a node.

The DOM says:

Look at the following HTML document:

The HTML DOM views an HTML document as a tree-structure. The tree structure is called a node-tree.

All nodes can be accessed through the tree. Their contents can be modified or deleted, and new elements can be created.

The programming interface of the DOM is defined by standard properties and methods.

Properties are often referred to as something that is (i.e. the name of a node).

Methods are often referred to as something that is done (i.e. remove a node).

HTML DOM Properties

Some DOM properties:

Note: In the list above, x is a node object (HTML element).

HTML DOM Methods

Some DOM methods:

Note: In the list above, x is a node object (HTML element).