JS: The DOM Part II

Learning Goals

  • Learn how to utilize document.querySelectorAll() to select multiple elements, and utilize our knowledge of iteration
  • Understand the Data Model as your single source of truth for managing the data of your website

Warm Up

In Your Notebook

Spend a few minutes researching the docs for document.querySelectorAll(), and answer the following questions in your notebook.

  • How is this method similar to document.querySelector()?
  • How does it differ?
  • What does document.querySelectorAll() return?

document.querySelectorAll();

document.querySelectorAll() returns a collection (specifically called a “NodeList”) of all the elements that match the query.

This collection is an array-like structure of nodes (or elements) that meet the query we passed through to the document.querySelectorAll() method!

However, in order to do anything to the elements within this collection, we need to iterate through each element to perform the same action, one element at a time. The easiest way to accomplish this is our good pal for loop!

Note

We are intentionally using the for loop throughout this lesson. If at a later point, you want to use an array prototype method on the return value of your document.querySelectorAll() method, you will need to do some additional work in order to get the expected behavior.

Selecting Elements

Let’s say we have a page with the following markup. What will be returned to us in each of the following examples?

  • document.querySelectorAll('p');
  • document.querySelectorAll('.awesome');
  • document.querySelectorAll('#third');
<h1>This is a Page Heading</h1>
<p>The is the first paragraph.</p>
<p class="awesome">The is the second paragraph.</p>
<p id="third" class="awesome">The is the third paragraph.</p>

Updating our HTML

Now, let’s say we want to update the text of all of the awesome paragraphs. Why doesn’t the following work?

var awesomeParas = document.querySelectorAll('.awesome');
awesomeParas.innerText = 'This is so awesome!';

The Answer

That’s because document.querySelectorAll() returns a list of potentially many elements. Even if there only was one match it would be in a NodeList. We need to iterate over the NodeList and change elements one at a time using a for loop! So to get this working, we would need to do the following:

var awesomeParas = document.querySelectorAll('.awesome');

for (var i = 0; i < awesomeParas.length; i++) {
  awesomeParas[i].innerText = 'This is so awesome!'
}

See the Pen Simple HTML Page (Now with JavaScript!) by Turing School (@turing-school) on CodePen.

Your Turn

  • Fork the above Codepen
  • Grab all of the paragraphs and change their innerText to a message of your choice.
  • Finished? Refactor so this happens within a function and then invoking the function.

Pair Practice

The following pair practice will require you to use your knowledge of creating functions, assigning event listeners, and utilizing what we learned about document.querySelectorAll() to achieve the functionality outlined below!

Visit this page and fork the CodePen.

See the Pen HTML Report Card by Turing School (@turing-school) on CodePen.

Pair Practice

In the CodePen above that you forked:

  • Add a button called Change Name. Find all of the elements with a class of student and change them to your name when the button is clicked!
  • Add a button called Change Grades. Find all of the elements with the class of grade. Iterate through all of them and change their content to A+s when the button is clicked.

The Data Model and the DOM

A Data Model is a tool to both hold and organize your data. As you are developing, it is a good practice to keep your website data contained in one model. There are many benefits to encapsulating your data but the most important one is this: There is only one Source of Truth in your program.

When a user starts interacting with your website, they are going to create and change data. Say a user makes an account - your website is going to store information about their account, like their username, their first and last names, the date and time they created their account. You will reference that data throughout your website. Like the report card, we had two places that referenced student name. If the student name is changed, only one piece of data should be changed.

When you start storing data in multiple places on your website, that data can very easily become outdated. If I forget to change BOTH instances of my student name, then one of those instances will be wrong. This is why you should store all of your data in a data model, or a structure that encapsulates your data.

Important Note

The DOM is NOT the place to store your data. The information the DOM displays should be based off of your data model.

Take a look at this code pen to see how the Report Card is generated using a data model. In this instance, the object studentReportCard is the data model. See how the HTML holds placeholder text that is being replaced with my student’s data in the javascript.

See the Pen HTML Report Card with a Data Model by Turing School (@turing-school) on CodePen.

Wrap Up

Journaling and Additional Practice

  • What does document.querySelectorAll() return? How can we interact with and use this return value?
  • Why is it important to keep your data model and your DOM displays separate?
  • Fork the above codepen and complete the extra exercises commented out in the JS section

Lesson Search Results

Showing top 10 results