JavaScript/Introduction to the Document Object Model (DOM)
HTML pages are internally implemented by a tree that contains the HTML elements (and CSS styles) as its nodes. This tree is called Document-Object Model, or DOM. JavaScript has full access to the DOM. It can navigate through the tree, modify the tree and nodes, ranging from simply adding new nodes to rearranging several areas on the page.
![](http://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/DOM-model.svg/440px-DOM-model.svg.png)
A hint about the terminology: Because of its closeness to XML, HTML uses the term element; and because of its structure as a tree, DOM uses the term node.
Nodes
editWhen loading into the browser, the HTML document is broken down into a tree of nodes. For example, take a look at the following HTML snippet:
<div id="exampleDiv">This is an<br>example HTML snippet.</div>
Through DOM, JavaScript sees this snippet as four nodes.
- The
div
, from its start tag through its end tag, is one node. Thisdiv
happens to have a property assigned inside its start tag. This property is named "id" and has the value "exampleDiv".
- The three other nodes in this example are inside the
div
. They are called child nodes of thediv
, because thediv
contains them. Conversely, thediv
is their parent node.
- The first child of the
div
is a text node, with the value "This is an". Text nodes contain only text; they never contain tags, which is why the tree stops here. - The
br
tag is another node. - The rest of the text is another text node.
Since the text nodes and the br
tag all share the same parent, they are said to be sibling nodes.
Accessing nodes
editYou can access nodes of the DOM tree by various methods. One of them is getElementById
.
<!DOCTYPE html>
<html>
<head>
<script>
function go() {
"use strict";
const p = document.getElementById("p2");
alert(p.innerHTML);
}
</script>
</head>
<body id="body">
<p id="p1" style="background: aqua">one</p>
<p id="p2" style="background: green">two</p>
<p id="p3" style="background: red">three</p>
<button onclick="go()">Show the second paragraph</button>
</body>
</html>
When clicking on the button, the function go
is called. It accesses the element with the id 'p2' and shows its content.
Accessing content
editIf you want to get access to the content of a node, you can use different properties of different classes: Node.textContent
, HTMLElement.innerText
, or Element.innerHTML
. But they are not equal; please consider the differences. To keep our examples clear and easy, we use Element.innerHTML
whenever possible because it is very close to the HTML source code.
const exampleContent = document.getElementById("example").innerHTML;
Changing content
editAfter accessing a node, you can change its content by assigning a new value to its content.
<!DOCTYPE html>
<html>
<head>
<script>
function go() {
"use strict";
const p = document.getElementById("p2");
p.innerHTML = "Another text";
}
</script>
</head>
<body id="body">
<p id="p1" style="background: aqua">one</p>
<p id="p2" style="background: green">two</p>
<p id="p3" style="background: red">three</p>
<button onclick="go()">Change the second paragraph</button>
</body>
</html>
When clicking on the button, the function go
is called. Again, it accesses the element with the id 'p2' and changes its content.
Modifying the tree structure
editJavaScript can manipulate the structure of the DOM tree.
<!DOCTYPE html>
<html>
<head>
<script>
function go() {
"use strict";
// read 'body' node
const b = document.getElementById("body");
// read second 'p' node
const p = document.getElementById("p2");
// moves it to the end of 'body'
b.appendChild(p);
}
</script>
</head>
<body id="body">
<p id="p1" style="background: aqua">one</p>
<p id="p2" style="background: green">two</p>
<p id="p3" style="background: red">three</p>
<button onclick="go()">Move the second paragraph</button>
</body>
</html>
When clicking on the button, the function go
is called. It accesses the elements 'body' and 'p2', then, it moves the 'p' element to the end of the 'body'.