JS: Intro to DOM Manipulation

Learning Goals

• Access and use the Chrome Developer Tools
• Understand how to query DOM elements
• Understand how to attach event listeners to DOM elements
• Understand how to write functions that can
  • Change styles programatically by adding, removing and toggling classes
  • Manipulate existing text and html on the DOM
  • Add new elements to the DOM programatically

Vocabulary

• HTML Element A building block that makes up the structure of a web page.
• CSS Selector A way to identify a set of elements to which a set of CSS styles apply, typically using a tag, class or id.
• Interface a shared boundary across which two separate components exchange information.
• DOM Document Object Model, the JS interface used to interact with HTML
• Event Any event which takes place in the DOM, these can be generated by users or the browser.
• Event Listener A function invoked on a DOM node which fires the event handler when a specified event occurs on the node or its children
• Event Handler A function that will run when a specific event occurs

Document Object Model

The Document Object Model, DOM, is an interface for HTML. It is what allows us to use JavaScript to manipulate the elements or content of elements on a page. Think about a form on a website (maybe signing up to use an application, or paying for your food delivery). Somehow, JavaScript has to know what was typed into an input field, know that the submission button was clicked, and be able to do whatever needs to happen next (maybe showing you a confirmation message). If we didn’t have the DOM, this wouldn’t be possible.

Once the browser runs/interprets our HTML, it creates the DOM. The DOM represents what is in the HTML, but it is formatted in a way that we can interact with those elements via JavaScript. It is not the exact same thing as your HTML document.

Here’s a small HTML file:

Here’s the DOM tree that would be created:

Image credit: bitsofcode.

This is an abstract concept and can be hard to wrap your mind around - we’ll come back to it. For now, you need to know two things:

1. The DOM is essential to building functionality on a page
2. We can use the document variable in our JavaScript file to interact with the DOM. From there, we can travel through the DOM and ask for specific elements, or instruct the program to change elements.

At any time, you can call document to access the DOM. This is very close to the same thing as viewing the document in the Elements panel of the Dev Tools. We won’t get into the details of those small differences; if you are interested, start by reading this blog post.

Accessing a Specific Element

Our document object - it really is a object! - comes built-in with a lot of methods we can use. Today, we will learn about .querySelector(). This method allows us to request a specific element from the DOM tree, by its selector. It uses the same syntax for selectors that CSS does.

Remember that in JS, unlike Ruby, we can use dot notation to access methods or properties of an object. In JS, we always need () to invoke a method or function.

Here’s an example:

var title = document.querySelector('h1');

title;

//=> <h1>JS: Intro to DOM Manipulation</h1>

We’ve already seen three of the different selector options we can use in our query:

• by html element tag: document.querySelector('h1')
• by class: document.querySelector('.call-to-action')
• by id: : document.querySelector('#explore-querySelector')

Take Note:

• selectors must always be in quotation marks (single or double)
• class selectors must be prefaced with a .
• id selectors must be prefaced with a #

console.log('title', title)

Updating Content of an Element

Now that we know how to query elements, let’s look at how to update the content of an element we’ve accessed.

var title = document.querySelector('h1');

When we query a DOM element and store it in a variable, we now have access to all the properties and methods that are attached to that DOM element. We won’t learn about all of them today. Just a few to get you started.

innerText

The innerText property holds the text that lives inside of a given element. In our codepen, the text content inside of the h1 is Elephants!. We can access that text content by accessing the element’s innerText property. We can use the = assignment operator to change it.

Event Listeners

Changing stuff on the page with JavaScript is great, but you might as well have just written it in the markup to begin with. The real power of JavaScript comes into play when we write code that responds to user actions.

This power emerges when we start listening for user events. This is the crux of front-end engineering. We present a user interface and then as the user interacts with the UI, we change and update what they see.

const studentName = document.querySelector(".student")
const bestGrade = document.querySelector(".grade-2")
const title = document.querySelector("h1")

const newData = {
  studentName: "Heather",
  bestGrade: "A+"
}

title.addEventListener("click", editReportCard)

function editReportCard() {
  studentName.innerText = newData.studentName;
  bestGrade.innerText = newData.bestGrade;
}

Explore

There are many types of events beyond just “click”. Explore this list of Mouse Events on MDN. Scroll beyond just mouse events to explore keyboard events, focus events, etc.

Think of a webpage you often visit. Maybe it’s a social media page, maybe it’s your bank’s website, maybe it’s a news site. Take a moment and consider all the event listeners that might be on that page! What type of events might they be listening for? What functionality occurs when those events happen?

More Programmatic DOM Manipulation

innerHTML

The innerHTML property essentially works the same, but has the capacity to do something a little more complex for us.

It can not only insert plain text, but it can insert HTML elements. For the example below, we will query and manipulate the Try It Together section above.

Check It Out

var box = document.querySelector('#try-it');

box.innerHTML = `
  <h3>Pizza is Tasty</h3>
  <p>Yum!</p>
`;

box.innerHTML += `
  <p>Pepperoni!</p>
`;

Changing Styles Programmatically

It isn’t uncommon to see an application change the color of something after a user interacts with it.

We see things like…

• Toggling light and dark mode
• A grey check mark turn into a green one
• A box or button changing colors once we’ve already clicked it, or visited that link … on almost a daily basis!

We talked earlier about how powerful the DOM is because it allows us to interact with HTML elements via JavaScript. This also gives us the power to modify the styles applied to said elements via JavaScript.

Even though you haven’t yet learned CSS, we will briefly discuss two ways to do this:

1. Directly manipulate the style of the element through inline styles (not best practice)
2. Add or remove classes from the element (the preferred way).

Directly Manipulate the Style of the Element

We can use dot notation to call the .style property on an element, then reference any CSS property and assign a new style value.

var box = document.querySelector('#change-my-border-box');

box.style.borderColor = "purple";

We actually avoid inline styling because we usually want to make more than one tiny change and each inline style change requires it’s own line of code. This can make for long functions that are difficult to read. Adding or removing classes (examples below) is strongly preferred. Plus, that lets us keep all our styling declarations in one place - the CSS file. Much more maintainable!

Add or Remove Classes from the Element

Since it’s common to need to change multiple CSS declarations, we can instead add or remove a class from the list of classes a given element has on it.

In summary, in your CSS file you can **apply styles to a specific class selector - like a “pink” class. Then, in your JS file, you can use button.classList.add('pink') to apply all those styles at once by adding that “pink” class to the specified button. **

Note that if you are going to add/remove a class via JavaScript, that class should be declared below the original styling for the given element in the CSS file. This is because of the cascading nature of CSS; any time rules conflict, the rule declared lower on the sheet will take precedence.

Putting it all together

We’ve seen that DOM manipulation based on user interaction requires at least 3 steps.

• Elements: Querying the elements we’ll need
• Event Listener: Adding the event listener
• Function: Creating the function that the event listener will trigger

As you work through the practice below, first psuedocode out what each of those three steps entail so you can take a methodical approach to writing the code.

Wrap Up

Let’s take a few minutes to look back at what we’ve started to learn!

• What is the DOM? How is it created?
• How can we grab elements from the DOM to work with them in our JS?
• How can we change the text of an element?
• How can we change the html of an element?
• How can we change styling applied to an element?
  
• What are the 3 steps for writing code that response to user interactions?