The DOM represents a document as a tree. The tree is made up of parent-child relationships, a parent can have one or many children nodes.
An idea of DOM
Let’s consider the following HTML as the starting point:
1 |
<html> |
2 |
<head> |
3 |
<title>The title</title> |
4 |
</head> |
5 |
<body> |
6 |
The body |
7 |
</body> |
8 |
</html> |
The DOM will look like that:
At the top level, there is an html node, with two children: head and body, among which only head has a child tag title.
HTML tags are element nodes in DOM tree, pieces of text become text nodes. Both of them are nodes, just the type is different.
•The idea of DOM is that every node is an object. We can get a node and change its properties, like this:
1 |
// change background of the <BODY> element, make all red |
2 |
document.body.style.backgroundColor = ‘red‘; |
If you have run the example above, here is the code to reset the style to default:
1 |
// revert background of <BODY> to default, put it back |
2 |
document.body.style.backgroundColor = ‘‘; |
•It is also possible to change the contents of nodes, search the DOM for certain nodes, create new elements and insert them into the document on-the-fly.
But first of all we need to know what DOM looks like and what it contains.
Another document
Let’s see the DOM of a more complicated document.
01 |
<!DOCTYPE HTML> |
02 |
<html> |
03 |
<head> |
04 |
<title>The document</title> |
05 |
</head> |
06 |
<body> |
07 |
<div>Data</div> |
08 |
<ul> |
09 |
<li>Warning</li> |
10 |
<li></li> |
11 |
</ul> |
12 |
<div>Top Secret!</div> |
13 |
</body> |
14 |
</html> |
And here is the DOM if we represent it as a tree.
Walking DOM using Developer Tools
It is quite easy to walk DOM using a browser developer tool.
For example:
- Open simpledom2.html
- Open Firebug, the Chrome & IE built in developer tools or any other developer tool
- Go HTML tab in Firebug & IE devtools or Elements tab in Safari/Chrome or.. whatever.
- Here you are.
Below is a screenshot from Firebug for the document above. Basically it’s layout is same as HTML, plus the minus icon [-] for nodes.
The DOM displayed in developer tools is not complete. There are elements, which exist in DOM, that are not shown in developer tools.
Whitespace nodes
Now let’s make the picture closer to reality and introduce whitespace text elements. Whitespace symbols in the HTML are recognized as the text and become text nodes. These whitespace nodes are not shown in developer tools, but they do exist.
The following picture shows text nodes containing whitespaces.
By the way, note that last li does not have a whitespace text tag inside. That’s exactly because there is no text at all inside it.
Whitespace nodes are created from spaces between nodes. So they disappear if we elimitate the space between tags.
The example below has no whitespace nodes at all.
<!DOCTYPE HTML><html><head><title>Title</title></head><body></body></html> |
IE<9
Versions of IE lower than 9 differ from other browsers because they do not generate tags from whitespaces. This was corrected in IE 9 as it complies with standards.
But in older IEs, the DOM tree is different from other browsers because of this.
Other node types
DOCTYPE
Did you notice a DOCTYPE from the example above? That is not shown on the picture, but DOCTYPE is a DOM node too, located at the topmost level to the left from HTML.
DocType is part of the HTML specification and it is an instruction to the web browser about what version of the markup language the page is written in.
Comments
Also, a HTML comment is a DOM node too:
1 |
<html> |
2 |
... |
3 |
<!-- comment --> |
4 |
... |
5 |
</html> |
The comment above is also stored in DOM tree, with comment node type and textual content. It is important when traversing nodes as we’ll see.
Summary
Now you should have understanding of DOM structure, how it looks like, which nodes it includes.
The next chapter describes how to traverse it using JavaScript.