DOM: Basic DOM Methods

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.

• previousSibling
• nextSibling
• firstChild
• lastChild
• childNodes
• parentNode

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:

• DOM: Create/Insert HTML Element
• DOM: Insert After a Element

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]