In this section we explore the Document Object Model, its structure and browser features.

DOM Nodes

  1. An idea of DOM
    1. Another document
  2. Walking DOM using Developer Tools
  3. Whitespace nodes
  4. Other node types
    1. DOCTYPE
  5. Summary

The DOM represents a document as a tree. The tree is made up of parent-child relationships, a parent can have one or many children nodes.

Basic DOM Node properties

  1. Structure and content properties
    1. nodeType
    2. nodeName, tagName
    3. innerHTML
    4. innerHTML pitfalls
    5. nodeValue
  2. Summary

A DOM node is an object with properties containing information about node itself and its contents. Some of the properties are read-only, and some can be updated on-the-fly.

Attributes and custom properties

  1. Properties
  2. Attributes
  3. Properties and attribytes synchronization
    1. id
    2. href
    3. value
    4. class/className
    5. The fun with old IEs
    6. Attributes as DOM nodes
  4. Summary

A DOM node may have attributes and properties. Sometimes people mess them up, because they are related, but they are really two different things.

Searching elements in DOM

  1. Methods
  2. XPath in modern browsers
  3. Query results are alive!
  4. Practice
  5. Summary

Most of time, to react on user-triggered event, we need to find and modify elements on the page.

The childNodes, children and other helper links are helpful, but they allow to move between adjacent elements only.

Fortunately, there are more global ways to query DOM.

Modifying the document

  1. Creating elements
  2. Adding elements
  3. Removing nodes
  4. Tasks and examples
  5. Summary

DOM modifications is the key to making pages dynamic. Using the methods described below, it is possible to construct new page elements and fill them on-the-fly.

Using document.write

  1. How document.write works
  2. Open document only
  3. The benefits and uses
  4. Summary

The document.write methods outputs a string directly into page.

This is one of most ancient methods of appending to a document. It is very rarely used in modern web applications, but still it has it’s special place.

More references in forms and tables

  1. Table
  2. Form
  3. Form elements
    1. Select
  4. Summary

DOM forms, tables, selects and other elements contain additional links to simplify navigation.

They are useful to keep the code shorter and smarter.