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.
Authors Christian Heilmann
License CC-BY-3.0