Readings: W3Schools DOM Reference.

Instant lab: redot.html.

1. The Document Object Model represents the current page to Javascript.
   1. Each element in the document is represented by an object of type Element.
   2. Elements objects contain each other as elements in HTML, forming a tree.
   3. The DOM tree is built by the browser when it reads the HTML document.
   4. Some of the HTML translated into the tree may come from document.write instead of HTML text.
   5. Javascript can use the DOM to access or modify the document.
   6. The object will have properties corresponding to the attributes on the tag.
2. Getting the element object you need.
   1. Events specified in HTML can pass this.
   2. Event objects contain a currentTarget attributes.
   3. document.getElementById("idname")
      1. Returns the element object having the specified identifier.
      2. Probably the most common way to get the element you want.
   4. elt.getElementsByClassName() and elt.getElementsByTagName()
      1. Returns a node list, an array-like object.
      2. Can be run on any node, and searches only its contents.
   5. Given an element, you may wander around the document tree (see here).
      1. elt.parentNode Going up.
      2. elt.childNodes Returns a node list giving all the child nodes, in the order listed in the document.
      3. elt.firstChild Gives the first child, in document order.
      4. elt.nextSibling The sibling following.
      5. And many more.
3. Attributes and Properties. (See here.)
   1. Properties are object data.
      1. You can fetch or set them with the usual dot notation. var x = obj.prop; obj.prop = 'value';
      2. Properties have whatever type you assign.
   2. Attributes represent the attributes in the HTML tags.
      1. You can fetch them with obj.getAttribute("name"), or set with obj.setAttribute("name","value").
      2. Values are always strings.
      3. Generally, setting one sets the other.
         1. There seem to be some exceptions.
         2. Don't think setting a property will create a corresponding attribute.
         3. I'm quite vague about all these details.
      4. You can set custom attributes in HTML, which are available to Javascript.
      5. Attributes that start with data- are for programmers use; will not become standard in the future.
   3. Can modify the document by setting the the properties or attributes.
      [ Tabs Source ] [ Image Index Source ]
4. Updating the tree
   1. elt.innerHTML
      1. The HTML code contained in the element (excluding the element itself).
      2. Can be fetched or assigned.
      3. Simple way to replace a section of the document.
      4. Works nicely on a div.
         [ Client-Side Guessing Game Source Support JS ]
         1. Note that Javascript is event-driven: Most of the time, nothing is running. Code runs when something happens.
         2. For this version of the game, you can cheat using the javascript console under development tools.
   2. elt.textContent
      1. Represents the contained text, ignoring tags.
      2. Most useful for spans and such.
      3. Can be fetched or set. Setting will destroy any existing structure.
   3. You can update the tree directly.
      1. Use var elt = document.createElement("tag", options) to create new element objects.
         1. Options is mostly useless.
         2. Generally use elt.setAttribute() after creating it.
      2. Insert the created element into the tree.
         1. elt.appendChild(newchild); Add a new child as the last descendant.
         2. elt.insertBefore(newnode, existingchild); Add a new child before a specified existing child.
      3. elt.removeChild(existingchild); Just what it says.
      [ Using the event object. Source ]
5. Manipulating forms.
   1. Form elements are stored in the form in properties given by their own name attributes.
   2. The value attribute takes on what the user has typed.
   3. The onSubmit() can vet the form data and prevent submission.
   [ Basic Form With Checks Source Processor ]