The DOM Tree is Your New Best Friend, Part II
Types of Nodes and How to Access and Work with Them
Originally published in The Purple Dog Coding, Tech, and Business Blog at my main site, PurpleDogEnterprises.com on June 3, 2016
Go here for Part I
Skill Level: Intermediate
Part I explained how the Document Object Model (DOM) is like a tree since it has branches, has a clearly defined root (document.documentElement is the DOM root), and has non-cycling ends called nodes. Nodes do not cycle because a node may not directly or indirectly contain itself.
The nodes in the node tree have a hierarchical relationship to each other and the terms parent, child, and sibling are used to describe the relationships.
- In a node tree, the top node is called the root node, or root
- Each node has exactly one parent, except the root (which has no parent)
- A single node can have a number of children
- Siblings are nodes with the same parent
Types of Nodes
1) The Document Node
The document node represents the entire document and is usually represented at the top of the DOM tree.
2) Element Nodes
The items mainly associated with tags in HTML like paragraph, body, headings, and lists comprise element nodes.
3) Attribute Nodes
Attribute nodes are NOT children of the element node but they are PART of the element node.
4) Text Nodes
Text nodes cannot have children nodes*, meaning that a text node is always a new branch of the DOM tree and no further branches come from it.
*If an element has a text node AND another text node, the text node technically becomes the child of the containing element.
Accessing and Working with Nodes Overview
Technically speaking, the DOM is considered an Application Programming Interface (API). Whereas user-interfaces allow humans to interact with computers, APIs allow computers to interact with other computers. The DOM states what your code script can ask the browser about the current page and how the DOM is supposed to tell the browser to update what is shown on that page.
The two major steps of accessing and working with the DOM are 1) locate the node representing the element you want to work with and 2) use its text contents, attributes, and child elements. It is useful to think of targeting a specific element as putting a “handle” on it that allows you to manipulate it.
Without getting very detailed here in this overview, here is a rundown of the methods and properties used to access DOM elements:
Selecting an Individual Element
getElementById() — uses the element’s ID attribute
querySelector() — uses CSS selector to return first matching element
Selecting Multiple Elements
getElementsByClassName() — selects all elements with that class element
getElementsByTagName() — selects all elements with a given tag name
querySelectorAll() — uses a CSS selector to use all matching elements
Moving Between Element Nodes
parentNode — returns the one parent element
previousSibling and nextSibling — selects previous or following node
firstChild and lastChild — selects first or last child of the current element
Accessing and Updating Text Nodes
Since the text node is a separate node from the element node, access it by 1) selecting the element node (such as a <p> node), 2) use the firstChild property, then use 3) nodeValue to get the text.
Working With HTML Content
innerHTML — allows access to the text content
Creating, Adding, and Removing Nodes
appendChild() and removeChild()
Accessing and Updating Values
hasAttribue() — checks if the attribute exists
getAttribute() — gets the attribute value
setAttribute() — updates with new value
removeAttribute() — removes the attribute