The Document Object Model

Lecture Notes for CS 142
Spring 2012
John Ousterhout

• Additional reading for this topic: none
  • However, www.w3schools.com is a good source of reference material.
  • The most authoritative overall reference on the DOM, with good coverage of browser differences, is Dynamic HTML: The Definitive Reference by Danny Goodman (Third Edition).
• The Document Object Model (DOM)
  • Representation of an HTML document at run time as a collection of Javascript objects and methods
  • Allows a Web page to be queried and modified dynamically under the control of Javascript
• Overall document structure:
  • window (global)
  • window.document
  • window.document.body
• All of the major components of HTML (elements, raw text, etc.) have a common set of properties and methods ("Node" is the term used for these things):
  • Many properties and methods are common to all nodes.
  • Key links: parentNode, nextSibling, prevSibling, firstChild, lastChild.
  • nodeName property is element type (uppercase: P, DIV, etc.) or #text.
  • Simple example: <p>Sample <b>text</b> display</p>
  • getAttribute, setAttribute methods, etc.
• How does Javascript relate to an HTML document?
  • Approach #1: work down through the DOM hierarchy starting at the top:

    node = document.body.firstChild.nextSibling.firstChild;
    node.setAttribute....
    

  • Better solution: ids
    • Include an id attribute in elements that will be referenced dynamically:

      <div id="div42">...</div>
      

    • Call document.getElementById("div42") in Javascript code.
    • Need to ensure that each id is really unique within a page.

Basic DOM Operations

• Change the content of an element:

  element.innerHTML = "This text is <i>important</i>";
  

  Replaces any existing content (but retains existing element attributes); causes node structure of DOM to change.
• Change an image (e.g., toggle appearance on clicks):

  img.src="newImage.jpg";
  

• Make element visible or invisible (e.g., for expandable sections):
  • Invisible:

    element.style.display = "none";
    

  • Visible:

    element.style.display = "";
    

    Or, to be safe, save the original style.
• Change the appearance of an element (e.g., highlight when mouse passes over):
  • Change its class:

    element.className = "active";
    

  • Use separate CSS styles for each appearance.
  • Generally a bad idea to modify style directly in the element, such as

    element.style.color = "#ff0000";
    

• Redirect to a new page:

  window.location.href = "newPage.html";
  
• Create a new element and add it to an existing one:

  element = document.createElement("P");
  parent.insertBefore(element, sibling);
  

  or,

  parent.appendChild(element);
  

• Simple dialog boxes:

  alert("Please click to continue");
  if (confirm("Are you sure you want to ...?")) {
      ...
  }
  
  name = prompt("Enter user name here:");
  

Coordinates and Positioning

• Coordinates (needed, for example, to position a pop-up menu next to an existing element, or for drag-and-drop):
  • The origin is at the upper left; y increases as you go down.
  • Read location with element.offsetLeft, element.offsetTop These are relative to element.offsetParent, which is not necessarily the same as element.parentNode
    • Tricky point: by default, elements do not create new positioning contexts (coordinate system) for their children: children live in same coordinate space as parent.
    • To create a new positioning context, use a div with position attribute set to relative.
  • The position of an element is determined by the upper-left outside corner of its margin.
  • The origin inside an element (for positioning children) is just inside the upper-left corner of its border (for Firefox; for IE it's the outside of the border).
  • Dimensions: offsetWidth and offsetHeight include contents, padding, border, but not margin.
• Positioning elements:
  • Normally elements are positioned automatically by the browser as part of the document.
  • To pull an element out of the document flow and position it explicitly:

    element.style.position = "absolute";
    element.style.left = "40px";
    element.style.top = "10px";
    

    In this case, the element no longer occupies space in the document flow.
• How to learn what DOM facilities are available?
  • Browse the DOM section at www.w3schools.com, look through the properties and methods for various elements, such as window and document.
  • Warning: w3schools doesn't seem to be absolutely complete (some features not in Internet Explorer are omitted). The book Dynamic HTML: The Definitive Reference, by Danny Goodman is more complete.