- An idea of DOM
- Walking DOM using Developer Tools
- Whitespace nodes
- Other node types
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:
<html> <head> <title>The title</title> </head> <body> The body </body> </html>
The DOM will look like that:
At the top level, there is an
html node, with two children:
body, among which only
head has a child tag
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:
// change background of the <BODY> element, *!*make all red*/!* document.body.style.backgroundColor = 'red';
If you have run the example above, here is the code to reset the style to default:
// revert background of <BODY> to default, *!*put it back*/!* 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.
Let’s see the DOM of a more complicated document.
<!DOCTYPE HTML> <html> <head> <title>The document</title> </head> <body> <div>Data</div> <ul> <li>Warning</li> <li></li> </ul> <div>Top Secret!</div> </body> </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.
- 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.
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.
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
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
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.
Also, a HTML comment is a DOM node too:
<html> ... <!-- comment --> ... </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.
Now you should have understanding of DOM structure, how it looks like, which nodes it includes.