1 The DOM tree
Introduction
2
In the HTML DOM (Document Object Model),
everything is a node:
The document itself is a document node
All HTML elements are element nodes
All HTML attributes are attribute nodes
Text inside HTML elements are text nodes
Comments are comment nodes
DOM is HTML viewed as a node tree.
NODE PARENTS, CHILDREN, AND SIBLINGS
In a node tree, the top node
is called the root
Every node has exactly one
parent, except the root
(which has no parent)
A node can have any
number of children
Siblings are nodes with the
same parent
Introduction
5
The HTML DOM is a standard object model
and programming interface for HTML.
It defines:
The HTML elements as objects
The properties of all HTML elements
The methods to access all HTML elements
The events for all HTML elements
In other words: The HTML DOM is a standard for
how to get, change, add, or delete HTML
elements.
Introduction
6
The HTML DOM can be accessed with JavaScript
(and with other programming languages).
DOM gives you access to all the elements on a web
page.
Using Javascript, you can create, modify and remove
elements in the page dynamically.
The DOM tree
7
CS380
Types of DOM nodes
8
<p>
This is a paragraph of text with a
<a href="/path/page.html">link in it</a>.
</p> HTML
element nodes (HTML tag)
can have children and/or attributes
text nodes (text in a block element)
attribute nodes (attribute/value pair)
text/attributes are children in an element node
cannot have children or attributes
not usually shown when drawing the DOM tree
Types of DOM nodes
9
<p>
This is a paragraph of text with a
<a href="/path/page.html">link in it</a>.
</p> HTML
DOM HTML
10
In the DOM, all HTML elements are defined
as objects.
The programming interface is the properties and
methods of each object.
A property is a value that you can get or set (like
changing the content of an HTML element).
A method is an action you can do (like add or
deleting an HTML element).
CS380
Javascript for HTML DOM
11
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
Refer to https://www.w3schools.com/js/js_htmldom.asp
Example
12
The following example changes the content (the
innerHTML) of the <p> element with id="demo":
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
</body>
</html>
getElementById is a method, while innerHTML is a property
DOM - Method
13
The most common way to access an HTML
element is to use the id of the element.
In the example above the getElementById method
used id="demo" to find the element.
DOM – Property
15
The easiest way to get the content of an element is
by using the innerHTML property.
The innerHTML property is useful for getting or
replacing the content of HTML elements.
The innerHTML property can be used to get or
change any HTML element, including <html> and
<body>.
CS380
Traversing the DOM tree
16
name(s) description
start/end of this node's list of
firstChild, lastChild
children
childNodes array of all this node's children
neighboring nodes with the
nextSibling, previousSibling
same parent
the element that contains this
parentNode
node
DOM tree traversal example
17
<p id="foo">This is a paragraph of text with a
<a href="/path/to/another/page.html">link</a>.</p>
HTML
Elements vs text nodes
18
<div>
<p>
This is a paragraph of text with a
<a href="page.html">link</a>.
</p>
</div> HTML
Q: How many children does the div above have?
A: 3
an element node representing the <p>
two text nodes representing "\n\t" (before/after the
paragraph)
Q: How many children does the paragraph have?
The a tag?
Prototype's DOM tree traversal
19
methods
method(s) description
ancestors, up elements above this one
childElements, descendants, elements below this one (not
down text nodes)
siblings, next, nextSiblings,
elements with same parent
previous, previousSiblings,
as this one (not text nodes)
adjacent
DOM tree traversal methods
20
Selecting groups of DOM objects
21
methods in document and other DOM objects for
accessing descendants:
name description
returns array of descendents
getElementsByTagName with the given tag, such as
"div"
returns array of descendants
with the given name attribute
getElementsByName
(mostly useful for accessing
form controls)
Getting all elements of a certain
22
type
var allParas = document.getElementsByTagName("p");
for (var i = 0; i < allParas.length; i++) {
allParas[i].style.backgroundColor = "yellow";
} JS
<body>
<p>This is the first paragraph</p>
<p>This is the second paragraph</p>
<p>You get the idea...</p>
</body> HTML
Combining with getElementById
23
var addrParas = $("address").getElementsByTagName("p");
for (var i = 0; i < addrParas.length; i++) {
addrParas[i].style.backgroundColor = "yellow";
} JS
<p>This won't be returned!</p>
<div id="address">
<p>1234 Street</p>
<p>Atlanta, GA</p>
</div> HTML
$ = document.select; it returns an array instead of a
single DOM object
Creating new nodes
24
name description
creates and returns a new empty
document.createElement("tag") DOM node representing an element
of that type
creates and returns a text node
document.createTextNode("text")
containing given text
// create a new <h2> node
var newHeading = document.createElement("h2");
newHeading.innerHTML = "This is a heading";
newHeading.style.color = "green";
JS
merely creating a node does not add it to the page
you must add the new node as a child of an existing
element on the page...
Modifying the DOM tree
25
name description
places given node at end of this
appendChild(node)
node's child list
places the given new node in this
insertBefore(new, old)
node's child list just before old child
removes given node from this node's
removeChild(node)
child list
replaceChild(new, old) replaces given child with new node
var p = document.createElement("p");
p.innerHTML = "A paragraph!";
$("main").appendChild(p);
JS
Removing a node from the page
26
function slideClick() {
var bullets = document.getElementsByTagName("li");
for (var i = 0; i < bullets.length; i++) {
if (bullets[i].innerHTML.indexOf("children") >= 0)
{
bullets[i].remove();
}
}
} JS
each DOM object has a removeChild method to
remove its children from the page
Problems with reading/changing
27
styles
window.onload = function() {
$("clickme").onclick = biggerFont;
};
function biggerFont() {
var size = parseInt($("clickme").style.fontSize);
size += 4;
$("clickMe").style.fontSize = size + "pt";
} JS
style property lets you set any CSS style for an
element
problem: you cannot (usually) read existing styles
with it
Accessing styles in Prototype
28
function biggerFont() {
// turn text yellow and make it bigger
var size = parseInt($("clickme").getStyle("font-
size"));
$("clickme").style.fontSize = (size + 4) + "pt";
} JS
getStyle function added to DOM object allows
accessing existing styles
addClassName, removeClassName, hasClassName
manipulate CSS classes
Setting CSS classes in Prototype
29
function highlightField() {
// turn text yellow and make it bigger
if (!$("text").hasClassName("invalid")) {
$("text").addClassName("highlight");
}
}
JS
addClassName, removeClassName, hasClassName
manipulate CSS classes
similar to existing className DOM property, but
don't have to manually split by spaces
