JavaScript: A quick guide to DOM manipulation

Before I started, I had a lot of feelings about learning JavaScript.

Most of them bad.

me, thinking about learning to code in JS

Honestly, looking at even the simplest JS code made me feel stupid and anxious and overwhelmed.

As a newbie coder, I had only ever coded in one language: Ruby. And Ruby is nice. It has all these built in methods, syntax that reads almost like complete sentences, the implicit return, instance variables… *sigh*

So, yeah. JavaScript was scary and intimidating. But let me you onto a little secret: it doesn’t have to be.

As nice and easy as Ruby seems to me now, when I first was learning to code in Ruby, it definitely didn’t feel easy. Or nice. Learning a new programming language will be hard. But despite the challenges, learning JavaScript was not only doable, but much easier than I thought it would be.

So, let me introduce you to one of the most important parts of JavaScript: the DOM.

Okay, you might already be confused (don’t worry, I was too), but it’s more simple than you think. Basically, the DOM (document object model) represents the HTML document that is displayed in the window.

If you want to see what exactly that means, open your console in your browser and type

document 

This will return

#document 

which when you expand will give you the HTML that makes up this page.

That’s the DOM!

me, thinking about learning JS after figuring out what the DOM is

A key part of JavaScript is manipulating the DOM (basically, finding, creating, and/or removing elements on/off the DOM). Now that you hopefully understand what the DOM is a little bit better, I’m going to quickly show you some easy ways to manipulate the DOM.

Finding elements on the DOM

There are a multitude of ways to find stuff on the DOM, but the most universal is probably querySelector, which will return the first element within the document that matches the specified selector. For example, in your console, type:

document.querySelector(“h1”)

This will return the first h1 element in the document object, which, in this case, should be:

<h1 class="ef b eg en co">JavaScript: A quick guide to DOM manipulation</h1>

Awesome, you’ve just found your first thing on the DOM! Better yet, now that we’ve found this element, we can also use JavaScript to manipulate it.

Changing elements on the DOM

Say you hate the amazing title I came up with for this article (mean, but fair) and you want to change it, go into your console and type:

document.querySelector(“h1”).innerText = "a much cooler and better title" 

By setting the innerText of that element to a new string, you‘ve successfully manipulated the DOM and should now see that title of my article has been changed to a much cooler and better title.

That wasn’t so bad, right?

Removing Elements from the DOM

Removing elements from the DOM is also simple. For example, say you’ve decided that you hate the entire concept of titles in general. All you have to do is type:

document.querySelector(“h1”).remove()

Now, when you look at your page you should see that the title of the article is completely gone!

Adding Elements to the DOM

Adding an element to the DOM can be a little more involved than removing or changing an element on the DOM, but don’t be intimidated, it’s not hard.

The basic steps are 1) creating your new element 2) adding information/data to that element 3) finding the place on the DOM where you would like to add that element and 4) adding that element to the DOM.

Assuming you are a weirdo with an odd vendetta against titles, let’s continue our example from above and put a title back on this argument. To do so, type:

let newTitle = document.createElement("h1")

This creates the a new element that we will be able to add to our DOM. Since we’ve saved this new h1 element to a variable we can easily complete step 2 and add some information to our element:

newTitle.innerText = "Oops, I didn't mean to delete the title!" 
newTitle.className = "ef b eg en co"

Now, that we have our new element created with all the information it should need, we need to find the place we should add it to the DOM. In your console, type:

document.querySelector(".ed")

This will find the div on which we will want to add our newTitle element. Since, we’ve found that div we can set it equal to a variable and then append our newTitle element onto that div.

let titleArea = document.querySelector(".ed")
titleArea.append(newTitle)

You should now see the new title on your page and, moreover, you can pat yourself on the back because you successfully learned a vital JavaScript skill: manipulating the DOM.

me, congratulating myself on successfully learning JS

As you continue in your JS journey, I hope you’ve found this simple tutorial to DOM manipulation helpful. I know how tough learning a new programming language can be, but I hope I’ve shown you that learning JavaScript is within your reach!