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)
document.styleSheets — get an array of external stylesheets|
document.styleSheets[0].cssRules; — array of rules in the styleSheet
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)
node.cloneNode(true)
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 to create the HTML elements to be displayed
JavaScript and HTML DOM Reference
The DOM has objects for all HTML elements, attributes, and styles. For
events it has actions. Every object can be created, deleted and modified.
The complete reference of all objects
Browser objects
Window
represents an open window in a browser
Navigator
info about current browser
Screen
information about the display screen
History
access stored URLS within a window
Location
information about the current URL
HTML DOM Reference
document
Access to all objects in the document. It is in a document node.
HTMLElement
Access to all the HTML elements in the document. 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. Elements
are in element nodes.
Attr
Access to all the attributes within the document. Attributes are in
attribute nodes
Text
The text in a document. All text is in text nodes
Events
Access to all the events and ability to create new ones.