DOM stands for Document Object Model. DOM is an object oriented representation of
a webpage loaded in the browser window. It is a virual or logical representation of
webpage and forming its content in a tree like structure.
One advantage that JavaScript has over basic HTML is that scripts can manipulate the
web document and its contents. Your script can load a new page into the browser, work
with parts of the browser window and document, open new windows, and even modify
text within the page dynamically.
To work with the browser and documents, JavaScript uses a hierarchy of parent and child
objects called the Document Object Model (DOM). These objects are organized into a tree like
structure, and represent all of the content and components of a web document.
The DOM is an organization chart, created automatically by the browser when your web page loads, for the whole web page. All the things on your web page—the tags, the text blocks, the images, the links, the tables, the style attributes, and more—have spots on this organization chart. This means that your JavaScript code can get its hands on anything on your web page, anything at all, just by saying where that thing is on the chart. What's more, your JavaScript can add things, move things, or delete things by manipulating the chart. If you wanted to (you wouldn't), you could almost create an entire
web page from scratch using JavaScript's DOM methods.
Here's a simplified web page. I've indented the different levels in the hierarchy. The three
top levels of the DOM are always the same for a standard web page. The document is the first
level. Under the document is the second level, the html. And under the html are the co-equal
third levels, the head and the body. Under each of these are more levels.
1st level: document
2nd level: <html>
3rd level: <head>
4th level: <title>
5th level: Simple document
</title>
</head>
3rd level <body>
4th level <p>
5th level There's not much to this.
</p>
</body>
</html>
Here's the same thing, shown as an organization chart
As you can see, every single thing on the web page is included, even the title text and the
paragraph text. Let's make it a little more complicated by adding a div and a second paragraph.
Here it is in HTML form.
1st level: document
2nd level: <html>
3rd level: <head>
4th level: <title>
5th level: Simple document
</title>
</head>
3rd level <body>
4th level <div>
5th level <p>
6th level There's not much to this.
</p>
5th level <p>
6th level Nor to this.
</p>
</div>
</body>
</html>
And in organization chart (minus any junk artifacts)...
In a company organization chart, each box represents a person. In the DOM organization
chart, each box represents a node. The HTML page represented above, in its cleaned-up DOM
form, has 11 nodes: the document node, the html node, the head and body nodes, the title node,
the div node, two paragraph nodes, and three text nodes, one for the title and one for each of
the two paragraphs.
In this particular chart, there are three types of nodes: document, element, and text. The
document node is the top level. Element nodes are <html>, <head>, <body>, <title>, <div>,
and <p>. Text nodes are the strings that comprise the title and the two paragraphs.
With the object model, JavaScript gets all the power it needs to create dynamic HTML:
JavaScript can change all the HTML elements in the page
JavaScript can change all the HTML attributes in the page
JavaScript can change all the CSS styles in the page
JavaScript can remove existing HTML elements and attributes
JavaScript can add new HTML elements and attributes
JavaScript can react to all existing HTML events in the page
JavaScript can create new HTML events in the page
Parents and children
We can designate any node of the DOM by saying the node is the xth child of aparticular parent. You can also designate a node by saying it's the parent of any child.
Take a look at the simplified html document from the last chapter.
1st level: document
2nd level: <html>
3rd level: <head>
4th level: <title>
5th level: Simple document
</title>
</head>
3rd level <body>
4th level <div>
5th level <p>
6th level There's not much to this.
</p>
5th level <p>
6th level Nor to this.
</p>
</div>
</body>
</html>
and <body> nodes are enclosed within the <html> node. The <div> node is enclosed within
the <body> node. Two <p> nodes are enclosed within the <div> node. And a text node is
enclosed within each of the <p> nodes.
When a node is enclosed within another node, we say that the enclosed node is a child of
the node that encloses it. So, for example, the <div> node is a child of the <body> node.
Conversely, the <body> node is the parent of the <div> node. Here's the organization chart
from the last chapter, again cleaned of junk artifacts, showing all the parents and their children.
children of <html>...<div> is the child of <body>...two <p>'s are the children of <div>...each
text node is the child of a <p>. Conversely, the document is the parent of <html>, <html> is
the parent of <head> and <body>, <head> is the parent of <title>, <title> is the parent of a
text node, and so on. Nodes with the same parent are known as siblings. So, <head> and
<body> are siblings because < html> is the parent of both. The two <p>'s are siblings because
<div> is the parent of both.
Starting at the bottom of the chart, the text "Nor to this." is a child of <p>, which is a child
of <div>, which is a child of <body>, which is a child of <html>, which is a child of the
document.
Now look at this markup.
<p>This is <em>important</em>!</p>
If you made a chart for this paragraph, you might think that all the text is a child of the <p>
node. But remember, every node that is enclosed by another node is the child of the node that
encloses it. Since the text node "important" is enclosed by the element node <em>, this
particular text node is the child of <em>, not <p>. The text nodes "This is " and "!" as well as
the element node <em> are siblings, because they're all enclosed by <p>. They're all children
of <p>.
