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.

DOM tutorial with practice