Last updated 2015 March 8

HTML Document Object Model

The following two links show an HTML page is a tree structure of elements, where each node has a parent node and an list (array) of child nodes. The top level node is the document node.

• W3schools overview of the HTML DOM.
• The docs.webplatform.org has a Traversing the DOM tutorial.

Example web pages

• An example web page showing a list of the upper level nodes in its HTML element structure.
• The following are some DOM methods.
  • document.createElement("ElementName")
  • document.createTextNode(String)
  • document.getElementById(String)
  • node.innerHtml
  • parent.childNodes
  • parent.appendChild(NewChild)
  • parent.insertBefore(NewChild, OldChild)
  • parent.replaceChild(NewChild, OldChild)
  • parent.removeChild(OldChild)
  • node.nextSibling
  • node.previousSibling
  • node.parentNode
  • node.removeAttribute(Name)
  • node.setAttribute(Name, Value)
• Get display stats: by clicking a button, the computer screen height, width and colour depth is displayed as a new paragraph at the end of the existing content
• Reading files has a browse button where you can select a file to display. A text file is displayed in red, showing how styles can be changed. An image file is displayed in a newly created img element. All other files replace the file-text display area with an error message.
• An example Event Handler showing how an event handler can be added to an HTML element.
• Examples showing how mouse events invoke Javascript functions tha change HTML elements
  • Example 1a Uses Javascript to create every element to be displayed
  • Example 1b Uses Javascript to create a DIV element and changes the innerHTML with a single string.
  • Example 1c Uses jQuery t o create the HTML elements to be displayed

Built-in domain objects

The DOM has objects for all HTML elements, attributes, and styles. For events it has actions. Every object can be created, deleted and modified.

document

Access to all objects in the document. The complete list of methods and properties is here.

Attr

Access to all the attributes within the document. The complete list of methods and properties is here.

HTMLElement

Access to all the HTML elements in the document. The complete list of methods and properties is here. Look at the example for insertBefore. It shows that nodes can only be at one location, as the examples moves a list item from one list to another list.

Events

Access to all the events and ability to create new ones. The complete list of methods and properties is here.

Node

Can be any of the above. The complete list of methods and properties is here.