JS: Basic DOM Methods

By Xah Lee. Date: . Last updated: .

This page shows commonly used DOM (Document Object Model) methods. Learn to use these methods, and you will know 99% of DOM use.

Get Elements

syntaxmeaning
document. getElementById(id)Returns a element object or null. The id should be a string.
document. getElementsByTagName(tag_name)Return a live HTMLCollection. The tag_name are {"div", "span", "p", …}.
document. getElementsByClassName(class_value)Return a live HTMLCollection. The class_value should be a string.
document. querySelectorAll(css_selector)Return a non-live HTMLCollection. The css_selector should be a string of CSS Selector Syntax.

These return array-like object. Some returns a live object, some not.

Examples: JS: Get Elements by ID, Tag, Name, Class, CSS Selector.

Element Attribute

Properties for Working with Element's Attributes
syntaxmeaning
node.hasAttribute(attr)Return true or false. This is especially useful for “boolean attributes” that doesn't have value, such as the attribute checked of input tag for checkboxes.
node.getAttribute(attr)Return the value of element's attribute attr. If doesn't exist, returns null. The attr is any of {"id", "href", …}. 〔►see JS: Get Element's Attribute Value
node.setAttribute(attr, val)Set the value of the attribute named attr to value val. If the attribute does not exist, it will be created. 〔►see JS: Set Element's Attribute Value
node.removeAttribute(attr)Remove the attribute.
node.attributesReturn a live Array-Like Object that are all the attributes. The result object can be indexed by a number of attribute name.

For HTML element's standard attributes, you can use a property directly.

Get/Set Standard Attributes by Properties
syntaxmeaning
html_element.attribute_nameGet a element's attribute's value.
html_element.attribute_name = valueSet a element's attribute.
var myHtmlEle = document.getElementsByTagName("a")[0];

myHtmlEle.getAttribute("href");
// is equivalent to
myHtmlEle.href

Using property does not work with XML such as stroke="…" from SVG, or non-standard attributes such as data-xyz="…" from HTML5 Custom Data Attribute.

「class」 Attribute

For the class attribute, there's more convenient methods:

JS: List/Add/Remove Class Attribute

「style」 Attribute

For the style attribute, there's more convenient properties, but may not work with XML.

syntaxmeaning
node.style.css_attributeget a element's CSS attribute's value.
node.style.css_attribute=valueset a element's CSS attribute.

Example: JS: Change CSS

Get Node {Type, Name, Value}

syntaxmeaning
node.nodeTypea integer representing the type of the node node (1 means HTML element, 3 means text node).
node.nodeNamethe name of the node node (either the name of tag (For example, P, DIV, SPAN, …) or "#text")
node.nodeValuethe text value of text node or attribute node. Else, null.

Detailed explanation: JS: Node Type, Node Name, Node Value.

Navigating Nodes

syntaxmeaning
node.previousSiblingreturn null if none.
node.nextSiblingreturn null if none.
node.firstChildreturn null if none.
node.lastChildreturn null if none.
node.parentNodereturn null if none.
syntaxmeaning
node.hasChildNodes()Return true or false.
node.childNodesReturn read-only live object NodeList. If no child, the object has length 0.
node.childrenReturn read-only live object HTMLCollection. Value is all non-whitespace children of node.

Example: JS: Navigate DOM Tree

Creating New Nodes

syntaxmeaning
document. createElement(tag_name) Creates a new tag_name element node.
document. createTextNode(str) Creates a new text node with the node value of string str.
node.cloneNode(true)Returns a copy of node, including all child nodes if argument is true.
node.innerHTMLThe content of node as string. You can read this value, or set this value to change the node's content. 〔►see JS: What's the difference between textContent, innerHTML, innerText, nodeValue?

Example: JS: Create HTML Element

{Insert, Remove, Replace} Nodes

syntaxmeaning
node.appendChild(new_node)Move new_node to become last child of node, if both nodes are in the same document. Else, just append. It returns the argument new_node. 〔►see JS: .appendChild Example
node.insertBefore(new_node, existing_node) Inserts new_node as a new child of node before existing_node.
node.removeChild(old_node) Removes the child old_node from node.
node.replaceChild(new_node, old_node) Replaces the child node old_node of node with new_node. If new_node is in the same doc, it'll also be removed.

Examples:

Change Element's Text Content

There are 3 ways to change a element's content.

  1. Treat it as a innerHTML, and use property innerHTML . This is for HTML (not XML), works in all browsers.
  2. Treat it as a text content, and use property textContent . This works well if the content is text and contains no HTML. (if you set value to "<b>bold text</b>", the text won't be bold.)
  3. Treat it as a DOM tree node, and use property nodeValue. This is the most general, and works with XML too.

Example: JS: Change Element's Content

Detail: JS: What's the difference between textContent, innerHTML, innerText, nodeValue?

{Add, Remove} Event Handler

syntaxmeaning
node.addEventListener(event, ƒ, false)Add the function ƒ to the event event
node.removeEventListener(event, ƒ …)Remove the function ƒ that was attached to the event event

Example: JS: Add / Remove Event Handler

© this page was originally based on Christian Heilmann's blog.

Basic DOM Methods Topic

  1. JS: Basic DOM Methods
  2. JS: Get Elements by ID, Tag, Name, Class, CSS Selector
  3. JS: Get Element's Attribute Value
  4. JS: Set Element's Attribute Value
  5. JS: List/Add/Remove Class Attribute
  6. JS: Node Type, Node Name, Node Value
  7. JS: Navigate DOM Tree
  8. JS: Add / Remove Event Handler
Like what you read? Buy JavaScript in Depth