What is the DOM?
The DOM is a W3C (World Wide Web Consortium) standard.
The DOM defines a standard for accessing HTML and XML documents:
"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."
The W3C DOM standard is separated into 3 different parts:
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?
The XML DOM defines the objects and properties of all XML elements, and the methods to
access them.
What is the HTML DOM?
The HTML DOM is:
A standard object model for HTML
A standard programming interface for HTML
A W3C standard
The HTML DOM defines the objects and properties of all HTML elements, and the methods to
access them.
In other words:
The HTML DOM is a standard for how to get, change, add, or delete HTML elements.
DOM Nodes
According to the W3C HTML DOM standard, everything in an HTML document is a node:
The entire document is a document node
Every HTML element is an element node
The text inside HTML elements are text nodes
Every HTML attribute is an attribute node
Comments are comment nodes
The HTML DOM Node Tree
The HTML DOM views HTML documents as tree structures. The structure is called a Node
Tree:
HTML DOM Tree Example
With the HTML DOM, all nodes in the tree can be accessed by JavaScript. All HTML elements
(nodes) can be modified, and nodes can be created or deleted.
Node Parents, Children, and Siblings
The nodes in the node tree have a hierarchical relationship to each other.
The terms parent, child, and sibling are used to describe the relationships. Parent nodes have
children. Children on the same level are called siblings
In a node tree, the top node is called the root
Every node has exactly one parent, except the root (which has no parent)
A node can have any number of children
Siblings are nodes with the same parent
The following image illustrates a part of the node tree and the relationship between the nodes:
Look at the following HTML fragment:
<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<h1>DOM Lesson one</h1>
<p>Hello world!</p>
</body>
</html>
From the HTML above:
The <html> node has no parent node; it is the root node
The parent node of the <head> and <body> nodes is the <html> node
The parent node of the "Hello world!" text node is the <p> node
and:
The <html> node has two child nodes: <head> and <body>
The <head> node has one child node: the <title> node
The <title> node also has one child node: the text node "DOM Tutorial"
The <h1> and <p> nodes are siblings and child nodes of <body>
and:
The <head> element is the first child of the <html> element
The <body> element is the last child of the <html> element
The <h1> element is the first child of the <body> element
The <p> element is the last child of the <body> element
Programming Interface
The HTML DOM can be accessed with JavaScript (and other programming languages).
All HTML elements are defined as objects, and the programming interface is the object
methods and object properties .
A method is an action you can do (like add or modify an element).
A property is a value that you can get or set (like the name or content of a node).
The getElementById() Method
The getElementById() method returns the element with the specified ID:
Example
<html>
<body>
<p id="intro">Hello World!</p>
<p>This example demonstrates the <b>getElementById</b> method!</p>
<script>
x=document.getElementById("intro");
document.write("<p>The text from the intro paragraph: " + x.innerHTML + "</p>");
</script>
</body>
</html>
HTML DOM Objects - Methods and Properties
Some commonly used HTML DOM methods:
getElementById(id) - get the node (element) with a specified id
appendChild(node) - insert a new child node (element)
removeChild(node) - remove a child node (element)
Some commonly used HTML DOM properties:
innerHTML - the text value of a node (element)
parentNode - the parent node of a node (element)
childNodes - the child nodes of a node (element)
attributes - the attributes nodes of a node (element)
A Real Life Object Illustration:
A person is an object.
A person's methods could be eat(), sleep(), work(), play(), etc.
All persons have these methods, but they are performed at different times.
A person's properties include name, height, weight, age, eye color, etc.
All persons have these properties, but their values differ from person to person.
Some DOM Object Methods
Here are some of the (most common) methods
Method Description
getElementById() Returns the element that has an ID
attribute with the a value
getElementsByTagName() Returns a node list (collection/array of
nodes) containing all elements with a
specified tag name
getElementsByClassName() Returns a node list containing all
elements with a specified class
appendChild() Adds a new child node to a specified
node
removeChild() Removes a child node
replaceChild() Replaces a child node
insertBefore() Inserts a new child node before a
specified child node
createAttribute() Creates an Attribute node
createElement() Creates an Element node
createTextNode() Creates a Text node
getAttribute() Returns the specified attribute value
setAttribute() Sets or changes the specified attribute,
to the specified value
