DOM Tree in JavaScript

5 min readNov 13, 2020

For this article I decided to focus more on the simple basics of JavaScript. One of the basics in JS is DOM manipulation.

Intro

DOM programming is using JavaScript to:

Ask the DOM to find an HTML element or elements in the rendered page
Remove the selected element(s) or add a new element next to the selected element
Adjust a property of the selected element(s)

Define the Computer Science Version of “Tree”

What do we mean when we say that the DOM is a tree? Trees make a good metaphor for the DOM because almost everyone has seen a tree. Starting at the bottom, you can climb up the tree and out to the farthest — and smallest — branches. The thicker a branch is, the stronger its connections are: the more it holds within it. Likewise, the thinner a branch is, the less it holds inside.

The DOM works basically the same way, except we usually talk about the root as being at the top of the DOM and the leaves being the most deeply nested HTML elements. So basically, we can imagine a tree upside down.

The HTML for this “tree” would be:

<!DOCTYPE HTML>
<html>
<head>
  <title>My Title</title>
</head><body>
   <h1>A heading</h1><a href=”http://example.com">Link text</a></body>
</html>

Describe How the DOM Works as a Tree

Every tree can contain subtrees, which we can treat independently of their parent trees. They repeat the pattern and appearance of the full tree, despite being a smaller part of a tree, like branches. Every child has experienced this sense of wonder when they take a fallen branch and stick it in the ground and think that they’ve planted their own tree.

Practically speaking, the DOM begins at <html>, but for now we should avoid changing what's between the <head></head> tags. Most of the time, we will look at the DOM subtree with its root at <body> and only change things that will be visible on the page. We might also deal with subtrees. For example, if we have

<body>
  <div>
    <p>Hi!</p>
  </div>
  <div>
    <p>Bye!</p>
  </div>
</body>

Our tree looks like this:

        body
        / \
      div div
          / \
          p p
           / \
       “Hi!” “Bye!”

Similarly, if we had a DOM subtree that looked like

<div>
  <div>
    <h1>Hello!</h1>
  </div>
 <div>
   <h5>Sup?</h5>
 </div>
</div>

The tree would look like:

    div
    / \
  div div
      / \
     h1 h5
        / \
   “Hello!” “Sup?”

Ask the DOM to Find or “select” an HTML Element or Elements in the Rendered Page

In creating the HTML for a page, including metadata for a node (e.g., a class or id attribute) will not only provide useful information about that node, but will also make it and its children easier to find. The more specific the metadata is, the more helpful it is for finding the desired element.

For the following exercises, you can experiment with any page on the Internet. It’s fun to change “The New York Times” or Facebook.

Finding a Node

JavaScript exposes a few ways of finding DOM nodes, either directly or in stages, courtesy of the document object.

document.getElementById()

This method provides the quickest access to a node, but it requires that we know a very specific piece of information — its id. This method can only return one element, since CSS ids are expected to be unique.

Given the following DOM tree:

<div>
  <h5 id=”greeting”>Hello!</h5>
</div>

We could find the h5 element with document.getElementById('greeting').

Notice how the id that we pass to getElementById is identical to the id in <h5 id="greeting">.

Note: You can use either single(‘’) or double(“”) quotes around the id within the parentheses in document.getElementById('yourIDGoesHere'), as long as you use the same kind to open and close them.

`document.getElementsByClassName()`

This one is also very commonly used in DOM programming.

This method finds elements by their className. Unlike the previous method, class names do not need to be unique, so this method returns an HTMLCollection of all the elements with the given class. You can iterate over an HTMLCollection with a simple for loop.

Given the following DOM tree:

<! — the `className` attribute is called `class` in HTML →
<div>
   <div class=”banner”>
      <h1>Hello!</h1>
   </div>   <div class=”banner”>
      <h1>Sup?</h1>
   </div>   <div class=”banner”>
      <h5>Tinier heading</h5>
   </div>
</div>

We could find all of the elements with the class name “banner” by calling document.getElementsByClassName('banner').

`document.getElementsByTagName()`

If you don’t know an element’s id or class, but you do know its tag name (the tag name is the thing between the <>, e.g., 'div', 'h1', header, article etc.). Since tag names aren't unique, this method returns an HTMLCollection also.

Finding a Node Without Knowing Anything About It

What if we know next to nothing about an element? Or what if we’re just interested in finding out more about the child nodes of a given element? This is where our knowledge of trees comes in handy!

Given the following DOM tree, how would we go about changing only the second “Hello!” to “Goodbye!”?:

<main>
  <div>
    <div>
       <p>Hello!</p>
    </div>
  </div>   <div>
      <div>
         <p>Hello!</p>
      </div>
   </div>    <div>
       <div>
         <p>Hello!</p>
       </div> 
    </div>
</main>

Let’s start by getting the <main> element

const main = document.getElementsByTagName(‘main’)[0]

Then we can get the children of main using main.children, so we can get the second child with main.children[1].

const div = main.children[1]

Finally, we can get and update our <p> element with

// we can call getElementsByTagName() on an _element_
// to constrain the search to its children!const p = div.getElementsByTagName(‘p’)[0]

And lastly we can change an attribute on the node. Let’s change one’s attribute!

p.textContent = “Goodbye!”

Obviously, this way of accessing that text isn’t efficient and won’t work on all pages, but it does a good job of demonstrating the basic tools available to us for finding and manipulating HTML elements.

Hope you enjoyed and see you next time!