The Document Object Model

Lecture Notes for CS 142
Spring 2012
John Ousterhout

  • Additional reading for this topic: none
    • However, 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;
    • 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):
  • Make element visible or invisible (e.g., for expandable sections):
    • Invisible: = "none";
    • Visible: = "";
      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 = "#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);
  • 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: = "absolute"; = "40px"; = "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, 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.