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
orfalse
. 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
orfalse
. -
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:
Change Element's Text Content
There are 3 ways to change a element's content.
- Treat it as a innerHTML, and use property
innerHTML
. This is for HTML (not XML), works in all browsers. - 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.) - 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