Dealing with the DOM

Objectives

explore the DOM (Document Object Model) structure
select elements in the document by ID
select elements in the DOM by tag name
modify elements in the DOM using JavaScript

JavaScript.info tutorials on the DOM

DOM basics

Mozilla Document Object Model reference
DOM stands for Document Object Model.
The DOM is a hierarchical tree-like structure of nodes that represent the document.
The various elements of a web page, such as a paragraph, are nodes.
The nodes have attributes and may have other nodes as children.
The text within a node is contained in a child text node.
If there is whitespace between elements, it becomes a text node.
JavaScript has some basic methods for interacting with the DOM.
Some of the JavaScript libraries (such as jQuery) have much more powerful methods for dealing with the DOM.

References to nodes

document.documentElement: refers to "html" tag
document.body: refers to "body" tag
childNodes: an array-like property of a node that refers to its children, including text nodes
children: an array-like property of a node that refers to its children, excluding text nodes
firstChild: childNodes[0]
lastChild: childNodes[childNodes.length - 1]
parentNode: refers to the parent of the current node
previousSibling: refers to previous sibling (of course)
nextSibling: refers to next sibling (of course)

Important node properties

nodeType: an integer representing the node type (eg. 3 is text, 1 is element)
nodeName: the HTML tag name
tagName: the HTML tag name
innerHTML: contains the content of an element node
nodeValue: contains the content of a text node

Accessing node attributes

attribute names are not case sensitive
attribute values must be strings
attributes: an array-like property of a node that refers to its attributes
hasAttribute(attributeName): useed to see if a node has a specific attribute
getAttribute(attributeName): used to retrieve value of a specific attribute
setAttribute(attributeName): used to set value of a specific attribute
removeAttribute(attributeName): used to delete a specific attribute
the "class" attribute has to be referred to as "className" in JavaScript
attributes aren't used much in JavaScript: one exception is the value attribute of an INPUT element

Modifying the DOM

document.createElement(tag): creates a new element node of the type specified by the tag
document.createTextNode(value): creates a new text node with the specified value
elem.cloneNode(false): creates a copy of a node not including descendants
elem.cloneNode(true): creates a copy of a node including descendants
parent.appendChild(element): adds element as the last child of the parent
parent.insertBefore(element, nextSibling): adds element as a child of the parent before nextSibling
parent.removeChild(element): deletes the element specified
parent.replaceChild(element, currentElement): replaces currentElement with element

Using document.write()

document.write: inserts text directly into an open document
document.writeln: works like document.write and adds a newline at the end in the source code
document.close() should be used when all document.write calls are done
The use of document.write is discouraged.
Using document.write in the HEAD to create BODY content could be a problem since the BODY doesn't exist yet.

Searching for elements in the DOM

document.getElementById(id): returns the element with the specified ID (or null)
document.getElementsByTagName(tagname): returns an array-like list of all elements within the document which have the specified tag name
element.getElementsByTagName(tagname): returns an array-like list of all elements descending from element which have the specified tag name
document.getElementsByName(tagname): returns an array-like list of all elements within the document which have the specified name
document.getElementsByClassName(classname): returns an array-like list of all elements within the document which have the specified class name
element.getElementsByClassName(classname): returns an array-like list of all elements descending from element which have the specified class name
document.querySelector(cssSelector): returns the first element in a depth first tree traversal that matches the specified CSS3 selector
element.querySelector(cssSelector): returns the first element in a depth first subtree traversal starting with element that matches the specified CSS3 selector
document.querySelectorAll(cssSelector): returns a NodeList of all elements within the tree that match the specified CSS3 selector
element.querySelectorAll(cssSelector): returns a NodeList of all elements descended from element that match the specified CSS3 selector

Referring to form and table elements

If you have a reference to a table in a variable named "tbl", you can get access to the contents of a cell in row 5, column 3 using: tbl.rows[4][2]
A form can be referenced using: document.forms[formName]
An element in a form can be referenced using: formref.elements[elementName]
An element in a form can be referenced using: formref.elements[index]
An input element has a "value" property to access its contents.
You can access specific "select" elements using: selectRef[optionName]
You can access specific "select" elements using: selectRef[index]
You can find out which option is selected in a non-multiple "select" element using the selectedIndex property.

Referring to styles

The "className" property of an element contains the element's class attribute value.
The "style" property allows you to read and write most CSS property values. CSS styles set using regular CSS don't show up in the "style" property.
The "cssText" property lets you set and get the complete text value of the CSS style property.
The "getComputedStyle" method returns the style for an element after all styles are applied.

DOM Explorer demonstration

See DOMExplorer.html for a demonstation of how you can traverse the DOM in JavaScript. Use view source on that page to see how the JavaScript code is written.

You can also turn the DOM Explorer code into a GreaseMonkey script to display the DOM for a web page. The code to do that for every page you visit on the web server we use ofr class is at: domExplorer.user.js.