1 The DOM tree
CS380
The DOM tree
2
CS380
Types of DOM nodes
3
<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
CS380
Types of DOM nodes
4
<p>
This is a paragraph of text with a
<a href="/path/page.html">link in it</a>.
</p> HTML
CS380
Traversing the DOM tree
5
•complete list of DOM node properties
•browser incompatiblity information
CS380
DOM tree traversal example
6
<p id="foo">This is a paragraph of text with a
<a href="/path/to/another/page.html">link</a>.</p>
HTML
CS380
Elements vs text nodes
7
<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
Prototype's DOM element
8
methods
Prototype's DOM tree traversal
9
methods
CS380
Prototype's DOM tree traversal
10
methods
// alter siblings of "main" that do not contain "Sun"
var sibs = $("main").siblings();
for (var i = 0; i < sibs.length; i++) {
if (sibs[i].innerHTML.indexOf("Sun") < 0) {
sibs[i].innerHTML += " Sunshine";
}
} JS
CS380
Selecting groups of DOM
11
objects
methods in document and other DOM objects
for accessing descendants:
CS380
Getting all elements of a certain
12
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
CS380
Combining with getElementById
13
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
CS380
Prototype's methods for
14
selecting elements
var gameButtons = $("game").select("button.control");
for (var i = 0; i < gameButtons.length; i++) {
gameButtons[i].style.color = "yellow";
} JS
Prototype adds methods to the document object
(and all DOM element objects) for selecting groups of elements:
CS380
Prototype's
<ul id="fruits">
methods for
<li id="apples">apples
<ul>
15
selecting elements
<li id="golden-delicious">Golden Delicious</li>
<li id="mutsu" class="yummy">Mutsu</li>
<li id="mcintosh" class="yummy">McIntosh</li>
<li id="ida-red">Ida Red</li>
</ul>
</li>
<li id="exotic" class="yummy">exotic fruits
<ul>
<li id="kiwi">kiwi</li>
<li id="granadilla">granadilla</li>
</ul>
</li>
</ul>HTML
$('fruits').getElementsByClassName('yummy');
// -> [li#mutsu, …]
$('exotic').getElementsByClassName('yummy');
// -> JS
CS380
Prototype's
<ul id="fruits">
<li id="apples"> methods for
<h3 title="yummy!">Apples</h3>
16
selecting elements
<ul id="list-of-apples">
<li id="golden-delicious" title="yummy!" >Golden
Delicious</li>
<li id="mutsu" title="yummy!">Mutsu</li>
<li id="mcintosh">McIntosh</li>
<li id="ida-red">Ida Red</li>
</ul>
<p id="saying">An apple a day keeps the doctor
away.</p>
</li>
</ul>
$('apples').select('[title="yummy!"]');
// -> [h3, li#golden-delicious, li#mutsu]
$('apples').select( 'p#saying', 'li[title="yummy!"]');
//
$('apples').select('[title="disgusting!"]');
// JS
CS380
The $$ function
17
var arrayName = $$("CSS selector"); JS
// hide all "announcement" paragraphs in the "news"
//section
var paragraphs = $$("div#news p.announcement");
for (var i = 0; i < paragraphs.length; i++) {
paragraphs[i].hide();
} JS
$$ returns an array of DOM elements that
match the given CSS selector
like $ but returns an array instead of a single
DOM object
a shorthand for document.select
useful for applying an operation each one of a
set of elements
Common issues with $$
18
Q: Can I still select a group of elements using $$ even if
my CSS file doesn't have any style rule for that same
group? (A: Yes!)
Creating new nodes
19
// 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
Modifying the DOM tree
20
var p = document.createElement("p");
p.innerHTML = "A paragraph!";
$("main").appendChild(p);
JS
CS380
Removing a node from the
21
page
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
Prototype adds a remove method for a node to
remove itself
CS380
DOM versus innerHTML
22
hacking
Why not just code the previous example this
way?
function slideClick() {
$("thisslide").innerHTML += "<p>A paragraph!</p>";
} JS
Imagine that the new node is more complex:
ugly: bad style on many levels (e.g. JS code
embedded within HTML)
error-prone: must carefully distinguish " and '
can only add at beginning or end, not in middle of
childslideClick()
function list {
this.innerHTML += "<p style='color: red; " +
"margin-left: 50px;' " +
"onclick='myOnClick();'>" +
"A paragraph!</p>";
} JS
Problems with reading/changing
23
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
CS380
Accessing styles in Prototype
24
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
CS380
Common bug: incorrect usage
25
of existing styles
the above example computes e.g. "200px" +
100 + "px" , which would evaluate to
"200px100px"
a corrected version:
this.style.top = parseInt(this.getStyle("top")) + 100 +
"px"; // correct
JS
CS380
Setting CSS classes in
26
Prototype
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
CS380
Example: createElements
27
<html>
<head>
<script src="
https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/pr
ototype.js " type="text/javascript"></script>
<script src="paragraph.js "
type="text/javascript"></script>
</head>
<body>
<div id="paragrapharea">
<button id="add">Add a paragraph</button>
</div>
</body>
</html>
CS380
Example: createElements
28
window.onload = function(){
var button = $("add");
button.onclick = addParagraphClick;
}
function addParagraphClick(){
var paragraph = document.createElement("p");
paragraph.innerHTML = "All work and no play makes
Jack a dull boy";
var area = $("paragrapharea");
area.appendChild(paragraph);
}
function addListClick(){
} JS
CS380
Javascript Exercises
29
Create a webpage with an of Homer Simpson
image at the center of the page. Develop a
script that prints an alert: “Duh, you are
hovering!!” every time the mouse crosses over
the image.
Add 5 buttons to your webpage: red, yellow,
green, black, and silver. Every time you click
on one of these buttons the background
should take the corresponding color.
CS380
Javascript Exercises
30
Add a link with the text: “CLICK ME!”. Develop
a function that randomly chooses between the
following websites to link your text:
http://slashdot.org/
http://www.thinkgeek.com/
http://despair.com/
http://www.redbubble.com/
http://googleresearch.blogspot.com/
CS380
