Photo by Todd Quackenbush on Unsplash

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

Intro

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

Define the Computer Science Version of “Tree”

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

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

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

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 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()

Finding a Node Without Knowing Anything About It

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!

Passionate Programmer. Independent Thinker. Caring Father. Graduate of Flatiron Bootcamp for Software Development. Currently seeking new opportunities.