Scribd
Upload
26 views30 pages

16 DOMTree

Uploaded by

Arslan Coskun
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
26 views30 pages

16 DOMTree

Uploaded by

Arslan Coskun
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 30

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

You might also like