Intro to DOM Manipulation

Back to Lesson Index

🎯 Learning Goals

• Use the console in the Chrome Developer Tools
• Query and update a page after its been loaded
• Respond to user interactions with event listeners

📗 Technical Vocabulary

• CSS Selector
• DOM (Document Object Model)
• Event
• Event Handler
• Event Listener
• HTML Element
• jQuery
• library

🌎 Warm Up

In order to work all the way through this lesson, we will need to learn how to use the Chrome Developer Tools (aka Dev Tools). We’ve used the console in repl quite a bit up until now; the Chrome Dev Tools are a more sophisticated version of that!

Like a true developer, you are going to take some time to do some research to teach yourself how to use this tool. Below are three resources, but feel free to find your own great resources as well!

• This short screencast was made just for you!
• Here is a tutorial on how to open the Dev Tools
• Here is a video on how to use a console.log
• Here is a blog post on how to use console.log (You can stop reading when you get to the debugger section)

What is the DOM?

The DOM, or Document Object Model, represents how the browser reads HTML. It allows JavaScript to interact with your HTML, which ultimately lets us manipulate, structure, and style our websites.

Manipulating the DOM refers to changes that are made in the browser, which are prompted but not directly created by the user.

Here’s a real-life example of DOM Manipulation:

If I type my email in a form, then click “Submit,” I might see a message like “Thanks for signing up!”

I clicked the button, and in response, JavaScript made that message appear. In this lesson, we will learn how to change something on our site based on user interaction.

jQuery

There is a popular library, or chunk of code someone else wrote, called jQuery. There are a lot of things it can do, all of which are still JavaScript, but it’s less for us to write! When using it, it’s essential that the HTML script tag below is included inside of the head element in HTML. Any starter kit will already include this!

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

During camp, we will use jQuery anytime we want to write code that interacts with elements on the DOM. Keep in mind that when we use features of jQuery, we are still writing JavaScript. It’s just a little “extra” on top!

Access Elements from the DOM

Accessing elements is the first step in building out the functionality to respond to user input. By the end of this lesson, you’ll be able to let a user click a button, and see something happen on the screen in response to the click. We have a lot to learn in the meantime, but we’ll take it step by step.

jQuery has some built-in functions that allow us to access elements from the DOM. Here’s an example of accessing an h1 element.

<h1>Hello, World!</h1>

var header = $('h1');
console.log(header);
//=> "k.fn.init(0)"

Let’s break this down:

• $ - This dollar sign is packed with functionality! It gives the instructions: go to the HTML document, and find a specific element.
• ('h1') - this is the argument passed to the $ function. It says: go look in the HTML document for all the h1 elements that you find.
• Since we stored the value of this in the header variable, we can console.log() this and see the HTML element.

The output of k.fn.init(0) may look strange and not helpful. If you click the small arrow to the left of it, you should see something like this:

This still may feel strange, but let’s dig into it. Notice that one the second line, we now see 0: h1. This is saying that the first (and only) element that was found and stored to this variable was an h1 element.

If you hover over that line that says 0: h1, you will see the element in the browser become highlighted.

To make this feel a little more helpful, we can ask for the text inside of the h1 element, with this syntax:

<h1>Hello, World!</h1>

var header = $('h1');
console.log(header.text());
//=> Hello, World!

Accessing Elements with Class Names

We can also access elements by classes. Instead of ('h1') we would need to write something like ('.class-name'), using the same selectors we would when writing CSS rules for classes.

Change Content on the DOM

Now that we can access elements and store them in a variable, the possibilities are endless! Let’s start by programmatically changing the content of an element. We can use .text() to change the text inside of an element.

<h1>hello</h1>

var header = $('h1');
header.text("HIIII");
//=> In the browser, the hi now says HIIII

What’s happening? The h1 element has a method called text. When we originally wrote the h1, we gave it a text value of “hello” by typing “hello” between the tags. jQuery provides us with a method to change that original text. Whatever string is passed into, or typed into the parenthesis after .text, will replace the text inside of the h1.

This was interesting, but we could have just written different text inside the HTML tags to accomplish what we just did here. As was mentioned earlier, we are taking today’s concept step by step. Move on to the next section and you’ll start seeing some ✨magic✨ happen!

Events

Events are really at the core of DOM Manipulation. When we talked about user interaction earlier, that’s exactly what we mean. An event is any action that the user takes while on our site. Clicking a button, scrolling down, hovering over something, and more.

Event Listener

Imagine that you’ve just ordered food for delivery and are waiting for it to arrive. When the doorbell rings, you’ll stand up from the couch, walk over to the door, open it, and take your food. Guess what? You programmed yourself with an event listener.

In order for our site to respond to events, we need to write some code so that our site becomes “smart” enough to look out for a specific event on a specific element. This “look out” is called an event listener. Their job is to sit around and wait for an event to take place in the browser, and call a function for us when it does.

The Glitch project below has an example of the syntax. Click View Source to look at the JavaScript. Back in View App: Click the button. Click the button a second time. What happens each time you click the button?

Takeaways:

• Line 4 declares a variable that stores the button element
• Line 6 creates an event listener. Our program will now be “on the lookout” for a click that takes place on the button. It won’t listen for clicks anywhere else. It won’t listen to any other events on that button. Just a click and only on that button. When that button is clicked, it will call the function doSomething.
• Line 8 declares the function doSomething. It’s just a set of directions, waiting around to do its job. It will be called when the button is clicked.

Event Handlers

The event listener is responsible for monitoring an element for an event and doing something when the event occurs. The event handler is the function that’s called when the event occurs. In our previous example, the function doSomething was our event handler. These terms are commonly used interchangeably.

Access CSS

One cool thing about JavaScript is that since it’s accessing your HTML elements, you can also access the styles that have been applied to each element. It works kind of like text(); there’s a property on the element that we can change. We can add, remove, replace, or toggle CSS classes!

Check this out:

Takeaways:

• .addClass will add a class to an HTML element
• .removeClass will remove a class from an HTML element
• .toggleClass will check if an HTML has a specific class. If it does, it will remove the class. If it doesn’t, it will add that class.

Besides accessing CSS rules by classes, we can also add CSS property/values! Check out the code in the project below:

Let’s break this down.

• On lines 4-5, we declare the changeBackgroundBtn and container variables which are storing the button and div, respectively
• On line 7, we declare an event listener for the changeBackgroundBtn button
• On line 9, we declare the changeBackgroundColor event handler
• Line 10 is where the magic happens:

container.css('backgroundColor', 'mediumaquamarine');

• container references the container variable
• .css says: I’m about to give you directions on adding styles, or CSS rules. .css takes two arguments, a property, and a value.
• 'backgroundColor' says: here is the property I’d like you to add to this element
• 'mediumaquamarine' says: here is the value I’d like you to update this property to. We can give any valid color name, hex code, or rgba value. It must be in a string.

This entire line of code accesses the div element and updates that elements styles, so we see the background color change in the browser!

Back to Lesson Index