Document Object Model (DOM)

CSE 190 M (Web Programming), Spring 2007

University of Washington

References: Forbes/Steele, Chipman (much of this content was stolen from them)

Except where otherwise noted, the contents of this presentation are © Copyright 2007 Marty Stepp and are licensed under the Creative Commons Attribution 2.5 License.

Valid XHTML 1.0 Strict Valid CSS!

Recall: Document Object Model (DOM)

DOM

An example XHTML page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/XHTML1/DTD/XHTML1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/XHTML" xml:lang="en" lang="en"> 
<head> 
<title>Page Title</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<meta http-equiv="Content-Language" content="en-us" /> 
</head> 
<body> 
<h1>This is a heading</h1>
<p>A paragraph with a <a href="http://www.google.com/">link</a>.</p>
<ul>
<li>a list item</li>
<li>another list item</li>
<li>a third list item</li>
</ul>
</body>
</html>

The resulting DOM tree

DOM tree

Types of nodes

<p>This is a paragraph of text with a 
<a href="/path/to/another/page.html">link</a> inside.
DOM Tree

Traversing the DOM tree

every node's DOM object has the following properties:

DOM tree traversal example

<p id="foo">This is a paragraph of text with a 
<a href="/path/to/another/page.html">link</a> inside.

navigate tree

Modifying the DOM tree

Every DOM node object has these methods:

Creating new nodes: createElement

// create a new <h2> node
var newHeading = document.createElement("h2");
newHeading.style.color = "green";
newHeading.innerHTML = "This is a heading";

// put it onto the page in the div with id "content"
var contentArea = document.getElementById("content");
contentArea.appendChild(newHeading);

Modifying tree example

    // in window.onload event handler,
    document.getElementById("thisslide").onclick = slideClick;

function slideClick() {
    var p = document.createElement("p"); 
    p.innerHTML = "A paragraph!";
    this.appendChild(p);
}

DOM versus innerHTML

Why not just code the previous example this way?

// equivalent to previous slide, but worse style
function slideClick() {
    this.innerHTML += "<p>A paragraph!</p>";
}

Ugly innerHTML code

Imagine that the new node is more complex:

function slideClick() {
    this.innerHTML += "<p style='color: red; " +
        "margin-left: 50px;' " +
        "onclick='myOnClick();'>" +
        "A paragraph!</p>";
}

Benefits of DOM over innerHTML

function slideClick() {
    var p = document.createElement("p");
    p.style.color = "red";
    p.style.marginLeft = "50px";
    p.onclick = myOnClick;
    p.innerHTML = "A paragraph!";  // here innerHTML is okay
    this.appendChild(p);
}

Practice problem: Rectangles

Click a rectangle to move it to the front. Shift-click a rectangle to delete it.

----- More DOM -----

More DOM features

Accessing nodes by id or tag

document.getElementById("id")

element.getElementsByTagName("tag")

Getting all elements of a certain type

highlight all paragraphs in document

var allParas = document.getElementsByTagName("p");
for (var i = 0; i < allParas.length; i++) {
    allParas[i].style.backgroundColor = "yellow";
}

<body>
<p>This is the first paragraph</p>
<p>This is the second paragraph</p>
<p>You get the idea...</p>
</body>

Combining with getElementById

highlight all paragraphs inside of the section with ID "footer"

var footer = document.getElementById("footer");
var footerParas = footer.getElementsByTagName("p");
for (var i = 0; i < footerParas.length; i++) {
    footerParas[i].style.backgroundColor = "yellow";
}

<p>This won't be returned!</p>
<div id="footer">
  <p>1234 Street</p>
  <p>Atlanta, GA</p>
</div>

Global DOM objects

Every Javascript program can refer to the following global objects:

The window object

The navigator object

The screen object

The history object

The location object

The document object