The HTML Document Object Model (DOM) defines a standard for accessing and manipulating HTML documents. The DOM is a World Wide Web Consortium (W3C) standard.
According to the W3C, the “W3C Document Object Model 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 HTML DOM defines the objects and properties of all HTML elements, and the methods to access them. It provides a programmatic way to access, change, add, or delete HTML elements.
DOM Node Tree
The HTML DOM represents an HTML document as a tree-structure. The tree structure is also known as a node tree. All HTML nodes can be accessed through the node tree. Their contents can be modified or deleted, and new elements can be created. The node tree below shows the set of nodes and the connections between them.
The nodes in the node tree have a relationship to each other. Parent nodes have children. Children on the same level are known as siblings. In an HTML document, the parent node is the
<html> element. It is also the root node.
Every node will have one parent except the root node. Any node can have one or more children nodes. A node with no children is known as a leaf node.
Common DOM Properties
Here is a list of the more common DOM properties you will be interested in using. The
n below represents a node.
n.attributes– attribute nodes of node
n.childNodes– child nodes of node
n.innerHTML– text value of node
n.nodeName– name of node
n.nodeValue– value of node
n.parentNode– parent node of node
Common DOM Methods
There are also some DOM methods that are very useful. Here is a list that you can use:
n.appendChild(node)– insert a child node to node
n.getElementById(id)– get the element with a specified id
n.getElementsByTagName(name)– get all elements with a specified tag name
n.removeChild(node)– remove a child node from node
In this example, we used the
getElementById method to access the paragraph element with an id of
p1. We then set the text using the
innerHTML property. We could have used a different approach producing the same results. For example…