What is DOM?
Topics

DOM - what is that, Document object model
Some light on the DOM tree

What is the "DOM"?

The DOM of the following html looks like this:

DOM-nodes
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8">
<meta name="description" content="DOM">
<meta name="keywords" content="DOM">
<title>Dom</title>
</head><body>
<div id="the_container">
<h1>The DOM - what is that?</h1>
<h6>Some tags</h6>
<div id="Lorem">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
<div id="Inside_of_Lorem">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
sed diam nonumy eirmod tempor invidunt ut labore et dolore 
magna aliquyam erat, sed diam voluptua. At vero eos et 
accusam et justo duo dolores et ea rebum. Stet clita 
kasd gubergren, no sea takimata sanctus est Lorem ipsum 
dolor sit amet. Lorem ipsum dolor sit amet, consetetur 
sadipscing elitr, sed diam nonumy eirmod tempor invidunt 
ut labore et dolore magna aliquyam erat, sed diam voluptua. 
At vero eos et accusam et justo duo dolores et ea rebum. 
Stet clita kasd gubergren, no sea takimata sanctus est 
Lorem ipsum dolor sit amet.
</div>
</div>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
sed diam nonumy eirmod tempor invidunt ut labore et dolore 
magna aliquyam erat, sed diam voluptua. At vero eos et 
accusam et justo duo dolores et ea rebum. Stet clita 
kasd gubergren, no sea takimata sanctus est Lorem ipsum 
dolor sit amet. Lorem ipsum dolor sit amet, consetetur 
sadipscing elitr, sed diam nonumy eirmod tempor invidunt 
ut labore et dolore magna aliquyam erat, sed diam voluptua. 
At vero eos et accusam et justo duo dolores et ea rebum. 
Stet clita kasd gubergren, no sea takimata sanctus est 
Lorem ipsum dolor sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
sed diam nonumy eirmod tempor invidunt ut labore et dolore 
magna aliquyam erat, sed diam voluptua. At vero eos et 
accusam et justo duo dolores et ea rebum. Stet clita 
kasd gubergren, no sea takimata sanctus est Lorem ipsum 
dolor sit amet. Lorem ipsum dolor sit amet, consetetur 
sadipscing elitr, sed diam nonumy eirmod tempor invidunt 
ut labore et dolore magna aliquyam erat, sed diam voluptua. 
At vero eos et accusam et justo duo dolores et ea rebum. 
Stet clita kasd gubergren, no sea takimata sanctus est 
Lorem ipsum dolor sit amet.
</p>
</div>
</body>
</html>

The DOM can be described best as a hierarchical structure of all the tags in a document. In this example html code you can find two div tags, where one div is contained by the other. The div with the id "Inside_of_Lorem" is inside the div with the id "Lorem". Therefore it is called a child node of "Lorem". Everything in the document is a node, a tag is a node, an attribute is a node, text is a node... that is how the document is structured. The tag with the id "Lorem" has got two child nodes: Lorem's text and the tag with the id "Inside_of_Lorem". The id attribute itself is not a child node, but a so called attribute node. The DOM makes sense when you use javascript to access the nodes in order to manipulate them. Dynamic html is just this, creating html tags and content on the fly, that is dynamically.

The div with the id "Inside_of_Lorem" is highlighted blue. This is another way of looking at the dom. In the inspector of your browser (this is the native inspector of opera) you can see the attributes and properties of each tag, in this case you can see the user agent (default) stylesheet since the document doesn't have any css applied:

dom, structure of html, tag hierarchy

This is the simple html document.

Now let's look at these two divs and integrate them right here:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Let's now use Javascript to analyze these two tags: Click on the "Lorem" above to show the childnodes of "Lorem".

Let's also do this same thing dynamically, creating these nodes on the fly and appending the same structure before this div. (Click on this div now and then after the red div appears click on it to analyze it.)

This time it's not three nodes, but two. That is because generating tags dynamically does not include word wrap and other whitespace. This is "clean-shaven" html. It therefore doesn't count this kind of text. The node types are stored in the object as numbers. 1 is an element node and 3 is a text node.

submit to reddit





Sneak peek of the server side code