MODULE - 2
THE DOM TREE IS А
MODEL OF A WEB PAGE
As a browser loads a web page, it creates a model of that page.
The model is called a DOM tree, and it is stored in the browsers' memory.
It consists of four main types of nodes.
BODY OF HTML PAGE
<html>
<body>
<div id="page">
<hl id="header">List</h1>
<h2>Buy groceries</h2>
<u1>
<li id="one" class="hot"><em>fresh</em> figs</1i>
<li id="two" class="hot">pine nuts</1i>
<li id="three" class="hot">honey</1i>
<li id="four">balsamic vinegar</1i>
</ul>
<script src="js/[Link]"></script>
</div>
</body>
</html>
THE DOCUMENT NODE ELEMENT NODES
Above, you can see the HTML code for a shopping HTML elements describe the structure of an HTML
list, and on the right hand page is its DOM tree. page. (The <h1> <h6> elements describe what
-
Every element, attribute, and piece of text in the parts are headings; the <p> tags indicate where
HTML is represented by its own DOM node. paragraphs of text start and finish; and so on.)
At the top of the tree a document node is added; it
represents the entire page (and also corresponds to To access the DOM tree, you start by looking for
the document object, which you first met on p36). elements. Once you find the element you want, then
you can access its text and attribute nodes if you
When you access any element, attribute, or text want to. This is why you start by learning methods
node, you navigate to it via the document node. It is that allow you to access element nodes, before
the starting point for all visits to the DOM tree. learning to access and alter text or attributes.
186) DOCUMENT OBJECT MODEL
Note: We will continue to use this list example Relationships between the document and all of
throughout this chapter and the next two chapters the element nodes are described using the same
so that you can see how different techniques allow terms as family tree: parents, children, siblings,
a
you to access and update the web page (which is ancestors, and descendants. (Every node is a
represented by this DOM tree). descendant of the document node.)
Each node object with methods and properties.
is an
Scripts access and update this DOM tree (not the source HTML file).
Any changes made to the DOM tree are reflected in the browser.
DOM TREE document
html
body
div attribute
h1 attribute h2 ul script attribute
text text
11 attribute 11 attribute li attribute 11 attribute
text text text
em text
text
ATTRIBUTE NODES TEXT NODES
The opening tags of HTML elements can carry Once you have accessed an element node, you
attributes and theseare represented by attribute can then reach the text within that element. This is
nodes in the DOM tree. stored in its own text node.
Attribute nodes are not children of the element that Text nodes cannot have children. If an element
carries them; they are part of that element. Once contains text and another child element, the child
you access an element, there are specific JavaScript element is not a child of the text node but rather
methods and properties to read or change that a child of the containing element. (See the <em>
element's attributes. For example, it is common to element on the first <1i> item.) This illustrates how
change the values of class attributes to trigger new the text node is always a new branch of the DOM
CSS rules that affect their presentation. tree, and no further branches come off of it.
DOCUMENT OBJECT MODEL 187