Intro to DOM Manipulation

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 CodePen quite a bit up until now; the Chrome Dev Tools are a bigger 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.

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.

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

var header = document.querySelector('h1');
console.log(header);
//=> "<h1>hello</h1>"

Let’s break this down:

• document - this tells the computer: please go over to the HTML document
• .querySelector - now that the computer is looking at the HTML document, this instruction says: I’d like you to look for something specific
• ('h1') - this is the argument passed to the .querySelector function. It says: go look in the HTML document for the first h1 that you find.
• Since we stored the value of this in the header variable, we can console.log() this and see the HTML element.

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.

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! Here’s one example:

var header = document.querySelector('h1');    // JavaScript

var header = $('h1');                         // jQuery

In jQuery, we can use the $ in place of the document.querySelector which saves us time typing!

Load jQuery into a CodePen

jQuery doesn’t just magically “work” in a JavaScript file; we have to import the library. To do this, click the gear icon to open the settings next to “JS.” Under “Add External Scripts/Pens,” start typing in “jQuery,” then select the first option. Click “Save & Close.”

Keep in mind that when we use features of jQuery, we are still writing JavaScript. It’s just a little “extra” on top! From here on out, we will use the jQuery $ to access DOM elements.

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 a tool called .text to change the text inside of an element.

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

What’s happening? The h1 element has an attribute 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 Event Listeners,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

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.

This CodePen has an example of the syntax. Click “Edit on CodePen” to open it in the browser. Click the button. Click the button a second time. What happens each time you click the button?

See the Pen Check It Out: Event Listeners by Turing KWK (@turing-kwk) on CodePen.

Takeaways:

• Line 1 declares a variable that stores the button element
• Line 3 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 5 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:

See the Pen Check It Out: ClassList Property by Turing KWK (@turing-kwk) on CodePen.

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 pen below:

See the Pen Check It Out: DOM Manipulation of CSS by Turing KWK (@turing-kwk) on CodePen.

Let’s break this down.

• On lines 1-2, we declare the changeBackgroundBtn and container variables which are storing the button and div, respectively
• On line 4, we declare an event listener for the changeBackgroundBtn button
• On line 6, we declare the changeBackgroundColor event handler
• Line 7 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!