Web Programming

Tufts University
Department of Computer Science
Fall 2009

JavaScript Objects and the Document Object Model (DOM)

JavaScript Objects

• An object in JavaScript is simply a collection of data and functions with a given object name
• Objects that you have seen so far: Math, Date, strings, and arrays
• Work "sort of" like objects in C++
• You must have an Object in order to assign attributes to it
• Attributes are created when assigned to
• Attempts to access undefined attributes return the special value undefined
• More about functions:
  • Functions are data and objects
  • Unlike most other languages, JavaScript functions are simply values
  • You can assign them to variables
  • You can execute them from variables
  • They have (several kinds of) attributes
  • These have names starting with the function name
• Example:

  <script type="text/javascript">
  	function square(x)
  	{
  		return x * x;
  	}
  
  	// Functions as variable values
  	var t = square;
  	document.write("The square of 2 is " + t(2) + "<br/>");
  
  	// Functions as subroutine arguments
  	function apply (func,value)
  	{
  		return func(value);
  	}
  	document.write("The square of 3 is " + apply(square, 3) + "<br/>");
  
  	// Functions as object attributes
  	var o = new Object;
  	o.sq = square;
  	document.write("The square of 4 is " + o.sq(4) + "<br/>");
  
  	// Functions as array elements
  	var a = new Array(20);
  	a[5] = square;
  	document.write("The square of 5 is " + a[5](5) + "<br/");
  </script>
  

• Try the above
• Member functions are simply properties of an object!
• Called with an implicit first argument that is the object itself...
• ...that first argument's name is this (just as in C++)
• Example:

  <script type="text/javascript">
  	function Person_toString()
  	{
  		return this.name+', '+this.address+', '+this.phone;
  	}
  
  	function Person_toTable() {
  		return "<table border=\"1\"><tr><td>" + this.name
  			+ "</td></tr><tr><td>" + this.address
  			+ "</td></tr><tr><td>" + this.phone
  			+ "</td></tr></table>";
  	}
  
  	function Person_toList() {
  		return "<ul>\n<li>" + this.name
  			+ "</li>\n<li>" + this.address
  			+ "</li>\n<li>" + this.phone
  			+ "</li>\n</ul>";
  	}
  
  	var p = new Object;
  	p.name = 'The Barack';
  	p.address = '1600 Pennsylvania Avenue';
  	p.phone = '(111) 111-1111';
  	p.toString = Person_toString;
  	p.toTable=Person_toTable;
  	p.toList=Person_toList;
  	document.write("p is " + p + "<br/>\n");
  	document.write("p.toTable() is " + p.toTable() + "<br/>\n");
  	document.write("p.toList() is " + p.toList() + "<br/>\n");
  </script>
  

• Try the above
• And finally...

  <script type="text/javascript">
  	function circle_area()
  	{
  		return Math.PI * this.radius * this.radius;
  	}
  
  	function circle_inside(x, y)
  	{
  		var xd = this.x - x;
  		var yd = this.y - y;
  		var dist = Math.sqrt(xd * xd + yd * yd);
  		return dist < this.radius;
  	}
  
  	function Circle (r, x, y)
  	{
  		this.radius = r;
  		this.x = x;
  		this.y = y;
  		this.area = circle_area;
  		this.inside = circle_inside;
  	}
  
  	var circle = new Circle(3, 4.5 , 5.3);
  	document.write("Circle area is " + circle.area() + "<br/>");
  	if (circle.inside(2, 2)) {
  		document.write("(2, 2) is inside the circle<br/>");
  	}
  	else {
  		document.write("(2, 2) is outside the circle<br/>");
  	}
  	if (circle.inside(4, 5)) {
  		document.write("(4, 5) is inside the circle<br/>");
  	}
  	else {
  		document.write("(4, 5) is outside the circle<br/>");
  	}
  </script>
  

• Try the above

Document Object Model (DOM)

• A structural representation a la tree of JavaScript objects that represents the HTML document
• Allows you to view and modify page elements in script code after page has loaded. This is browser independent.
• Each document is a hierarchy
• Evolution:
  • DOM 1.0 - limited mutability
  • DOM 2.0 - full mutability via innerHTML
  • DOM 3.0+ - manipulation of child elements
• Very powerful: allows progressive enhancements of pages, and responsive interactions on the client-side
• Can be used for XML parsing
• Standardized by the W3C

Consider the Example

• <!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 tree:
• Your turn: give the graphical representation of the DOM for the following:

  <table>
    <tbody>
      <tr>
        <td>Shady Grove</td>
        <td>Aeolian</td>
      </tr>
      <tr>
        <td>Over the River, Charlie</td>
        <td>Dorian</td>
      </tr>
    </tbody>
  </table>
  

Nodes

• Element nodes - Can have children and/or attributes; example: HTML tags
• Text nodes - A child within an element node; cannot have children; example: text in a block element
• Attribute nodes - A child within an element node; cannot have children; example: attribute-value pair

Global DOM Objects

• window - The browser window
  • Example 1: window.close() - Closes the current window
  • Example 2: window.pageYOffset - Sets or returns the Y position of the current page in relation to the upper left corner of a window's display area
• navigator - Information about the web browser you are using
  • Example: navigator.userAgent - Returns the value of the user-agent header sent by the client to the server
• screen - Information about the screen occupied by the web brower
  • Example: screen.width - Returns width of the display screen
• history - List of pages the user has visiteds
  • Example: history.go(-1) - Go back to the previous page (if any)
• location - URL of the current document
  • Example: location.pathname - Sets or returns the path of the current URL
• document - Current HTML page object model
  • Example 1: document.getElementsByTagName("some tag") - Get all elements of a certain type; returns an array
  • Example 2: var element = document.getElementById("some ID") - Get a specific element on the page; returns an element
    • Example 2A: element.getElementsByTagName("some tag") - Same as above; returns an array
  • Example 3: document.createElement("some element")

Traversing the DOM Tree

• Every node's DOM object have the following properties:
  • firstChild, lastChild - Start/end of this node's list of children
  • childNodes - Array of all this node's children
  • nextSibling, previousSibling - Neighboring nodes that have the same parent
  • parentNode - The element that contains this node
• Complete list of DOM node properties

Modifying a DOM Tree

• createElement(), createTextNode()
• appendChild(node) - Add given node at the end of this node's child list
• removeChild(node) - Remove given node from this node's child list
• replaceChild(newChild, oldChild) - Replace old child node with the given new node
• insertBefore(newChild, oldChild) - Add given new node in this node's child list just before oldChild

Example of Modifying a DOM Tree

• Consider the following:

  <people>
    <person first-name="eric" middle-initial="H" last-name="jung">
      <address street="321 south st" city="denver" state="co" country="usa"/>
      <address street="123 main st" city="arlington" state="ma" country="usa"/>
    </person>
  
    <person first-name="jed" last-name="brown">
      <address street="321 north st" city="atlanta" state="ga" country="usa"/>
      <address street="123 west st" city="seattle" state="wa" country="usa"/>
      <address street="321 south avenue" city="denver" state="co" country="usa"/>
    </person>
  </people>
  

• The corresponding DOM expansion (in JavaScript)

  var doc = document.implementation.createDocument("", "", null);
  var peopleElem = doc.createElement("people");
  
  var personElem1 = doc.createElement("person");
  personElem1.setAttribute("first-name", "eric");
  personElem1.setAttribute("middle-initial", "h");
  personElem1.setAttribute("last-name", "jung");
  
  var addressElem1 = doc.createElement("address");
  addressElem1.setAttribute("street", "321 south st");
  addressElem1.setAttribute("city", "denver");
  addressElem1.setAttribute("state", "co");
  addressElem1.setAttribute("country", "usa");
  personElem1.appendChild(addressElem1);
  
  var addressElem2 = doc.createElement("address");
  addressElem2.setAttribute("street", "123 main st");
  addressElem2.setAttribute("city", "arlington");
  addressElem2.setAttribute("state", "ma");
  addressElem2.setAttribute("country", "usa");
  personElem1.appendChild(addressElem2);
  
  var personElem2 = doc.createElement("person");
  personElem2.setAttribute("first-name", "jed");
  personElem2.setAttribute("last-name", "brown");
  
  var addressElem3 = doc.createElement("address");
  addressElem3.setAttribute("street", "321 north st");
  addressElem3.setAttribute("city", "atlanta");
  addressElem3.setAttribute("state", "ga");
  addressElem3.setAttribute("country", "usa");
  personElem2.appendChild(addressElem3);
  
  var addressElem4 = doc.createElement("address");
  addressElem4.setAttribute("street", "123 west st");
  addressElem4.setAttribute("city", "seattle");
  addressElem4.setAttribute("state", "wa");
  addressElem4.setAttribute("country", "usa");
  personElem2.appendChild(addressElem4);
  
  var addressElem5 = doc.createElement("address");
  addressElem5.setAttribute("street", "321 south avenue");
  addressElem5.setAttribute("city", "denver");
  addressElem5.setAttribute("state", "co");
  addressElem5.setAttribute("country", "usa");
  personElem2.appendChild(addressElem5);
  
  peopleElem.appendChild(personElem1);
  peopleElem.appendChild(personElem2);
  doc.appendChild(peopleElem);
  

• Example taken from https://developer.mozilla.org/en/How_to_create_a_DOM_tree

Group Exercises

1. Make a copy of the home page of our course website. Implement a feature that highlights (in yellow) all the paragraphs in the document, and echo all the text inside of the paragraph tags to a console (e.g., in Firebug).
2. Using Firebug (Firefox only), view all the images on the Microsoft home page via DOM tab. How many images are there? Finally, modify the Microsoft logo to something else...

mchow@cs.tufts.edu