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, on June 3, 2016

Go here for Part I

Skill Level: Intermediate

Fields: JavaScript, HTML

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.

Node Relationships

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

According to the Mozilla Developer Network, there are 12 types of nodes in JavaScript, 5 types of which are deprecated and no longer in service. You will mainly encounter 4 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

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.