DOM: Basic DOM Methods

By Xah Lee. Date: . Last updated: .

Here are the essential Document Object Model methods. Learn these and you will know 99% of practical DOM.

Get Elements

document. currentScript
return the current script element.
document. getElementById(id)
Return a non-live element object or null.
document. getElementsByTagName(tag_name)
Return a live HTMLCollection.
document. getElementsByClassName(class_value)
Return a live HTMLCollection.
document. querySelector(css_selector)
Return a non-live first element that matches.
document. querySelectorAll(css_selector)
Return a non-live HTMLCollection.

Examples:

DOM: Get Elements by ID, Tag, Name, Class, CSS Selector

Element Attribute

node.hasAttribute(attr)
Return true or false. This is especially useful for “boolean attributes” that doesn't have value.
node.getAttribute(attr)
[see DOM: Get Node Attribute Value]
node.setAttribute(attr, val)
[see DOM: Set Node Attribute Value]
node.removeAttribute(attr)
[see DOM: Remove Element's Attribute Value]
node.attributes
Get all attributes. Return a live Array-Like Object.

The following works with standard HTML attributes, such as id, class, name, width, etc.

html_element.attribute_name
Return element's attribute's value, or undefined if it doesn't exist.
html_element.attribute_name = value
Set a element's attribute. Return value. If attribute_name is not a standard html attribute, it's not added.

“class” Attribute

For the class attribute, there's more useful methods.

see DOM: List/Add/Remove Class Attribute

“style” Attribute

For the style attribute, you can use HTML Element properties.

Note, HTML Element properties may not work with XML, example: SVG's stroke. [see SVG: Specifying Styles]

node.style.css_attribute
Return the attribute value, or undefined if it doesn't exist.
node.style.css_attribute=value
Set css attribute. Return value. If attribute is not a standard css attribute, it's not added.

Example: DOM: Change CSS

Get Node {Type, Name, Value}

node.nodeType
A integer representing the type of the node node (1 means HTML element, 3 means text node).
node.nodeName
The name of the node node (either the name of tag (for example, P, DIV, SPAN, etc) or "#text")
node.nodeValue
The text value of text node or attribute node. Else, null.

[see DOM: Node Type, Node Name, Node Value]

Navigate Nodes

The following ignore whitespace nodes.

[see DOM: Whitespace Nodes]

node.previousElementSibling
Return null if none.
node.nextElementSibling
Return null if none.
node.firstElementChild
Return null if none.
node.lastElementChild
Return null if none.
node.hasChildNodes()
Return true or false.
node.children
Return read-only live object HTMLCollection. Value is all non-whitespace children of node. [see DOM: What Does Live Object Mean?]
node.parentElement
Return null if none.

[see DOM: Navigate DOM Tree]

The following do not ignore whitespace nodes.

Create New Nodes

document. createElement(tag_name)
Create a new tag_name element node. Return it.
document. createTextNode(str)
Create a new text node with the node value of string str.
node.cloneNode(true)
Return a copy of node, including all child nodes if argument is true.
node.innerHTML
The content of node as string. You can read or set this value. [see DOM: Difference Between textContent, innerHTML, innerText, nodeValue]

[see DOM: Create/Insert HTML Element]

{Insert, Remove, Replace} Nodes

node.insertAdjacentElement(position, new_node)
[see DOM: insertAdjacentElement]
parent.appendChild(new_node)
[see DOM: .appendChild]
parent.insertBefore(new_node, node_x)
Inserts new_node as a new child of parent before node_x.
parent.removeChild(old_node)
[see DOM: Remove HTML Element]
parent.replaceChild(new_node, old_node)
Replaces the child node old_node of parent with new_node. If new_node is in the same doc, remove it.

See also:

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: DOM: Change Element's Content

Detail: DOM: Difference Between textContent, innerHTML, innerText, nodeValue

{Add, Remove} Event Handler

node.addEventListener(event, f, false)
Add the function f to the event event
node.removeEventListener(event, f etc)
Remove the function f that was attached to the event event

[see DOM: Add/Remove Event Handler]

DOM How-To


Web Scripting Overview


HTML Input


Web Scripting Examples


Web Scripting Misc


jQuery


node.js

Like it? Help me by telling your friends. Or, Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials