The most common DOM methods at a glance
Reaching Elements in a Document                                                      Creating New Nodes
document.getElementById('id'): Retrieves the element with                             document.createElement(element): Creates a new element
the given id as an object                                                             node with the name element. You provide the name as a string.
document.getElementsByTagName('tagname'): Retrieves all                               document.createTextNode(string): Creates a new text node
elements with the tag name tagname and stores them in an array-                       with the node value of string.
like list
                                                                                      newNode = node.cloneNode(bool): Creates newNode as a copy
Reading Element Attributes, Node Values and Other Data                                (clone) of node. If bool is true, the clone includes clones of all the
                                                                                      child nodes of the original.
node.getAttribute('attribute'): Retrieves the value of the
                                                                                      node.appendChild(newNode): Adds newNode as a new (last) child
attribute with the name attribute
                                                                                      node to node.
node.setAttribute('attribute', 'value'): Sets the value
                                                                                      node.insertBefore(newNode,oldNode): Inserts newNode as a
of the attribute with the name attribute to value
                                                                                      new child node of node before oldNode.
node.nodeType: Reads the type of the node (1 = element, 3 = text
                                                                                      node.removeChild(oldNode): Removes the child oldNode from
node)
                                                                                      node.
node.nodeName: Reads the name of the node (either element
                                                                                      node.replaceChild(newNode, oldNode): Replaces the child
name or #textNode)
                                                                                      node oldNode of node with newNode.
node.nodeValue: Reads or sets the value of the node (the text
                                                                                      element.innerHTML: Reads or writes the HTML content of the given
content in the case of text nodes)
                                                                                      element as a string—including all child nodes with their attributes and
Navigating Between Nodes                                                              text content.

node.previousSibling: Retrieves the previous sibling node and                        Known browser quirks:
stores it as an object.
                                                                                      getAttribute and setAttribute are not reliable. Instead, assign
node.nextSibling: Retrieves the next sibling node and stores it                       the property of the element object directly: obj.property = value.
as an object.                                                                         Furthermore, some attributes are actually reserved words, so instead
node.childNodes: Retrieves all child nodes of the object and                          of class use className and instead of for use HTMLfor.
stores them in an list. here are shortcuts for the first and last child               Real DOM compliant browsers will return linebreaks as text nodes in
node, named node.firstChild and node.lastChild.                                       the childNodes collection, make sure to either remove them or test
node.parentNode: Retrieves the node containing node.                                  for the nodeType.




                           Assembled by Christian Heilmann (http://wait-till-i.com), licensed Creative Commons Attribution (http://creativecommons.org/licenses/by/3.0/). Enjoy.