Using HTML elements

Learning Competencies

By the end of this section, you should be familiar with and able to:

• Explain how we can use HTML elements with the DOM

Time Box

OK, now what do we do with the elements we've got?

For this lesson, we will carry on using the example web page from the previous lesson.

Well, how about if we replace the text of an element? Suppose we wanted to replace the "HTML DOM" in the two <span> elements with "HTML5 Document Object Model". We can use the innerHTML attribute of the element to both get and set the inner HTML (in this case, just text) like so:

document.querySelector('.dom').innerHTML = "HTML5 Document Object Model"

With this line of code we are selecting the element we want to change with the document.querySelector('.dom') part, specifying which attribute we want to change with the .innerHTML part, then assigning the new value with the = "HTML5 Document Object Model" part.

But note, this only changes the first element with the '.dom' class - see below.

To change both, we would need to use querySelectorAll instead, which will return a list of all elements which meet our criteria. The thing to realise here is that while a nodeList looks like an Array, it's not one. So you can't use array methods (like .forEach()) on them - Instead you can use a for loop.

So if we use the following code, it should work:

const spans = document.querySelectorAll('.dom')
for (let i = 0; i < spans.length; i++) {
  spans[i].innerHTML = 'HTML5 Document Object Model'
}

On the first line we are declaring a variable called spans which we are assigning the value of the list of all elements with the '.dom' class. Then we use a for loop to iterate through the nodeList in the same way as we would with an Array. For each element in the nodeList, we are assigning the value of the 'innerHTML' attribute to be "HTML5 Document Object Model"

Here's what that looks like:

What else could we modify?

Now that we know how to change the inner HTML of an element, we can set an attribute on it using setAttribute. Let's give it a try. Earlier, we declared a variable called 'spans', now we are going to use it again in a different loop:

for (let i = 0; i < spans.length; i++) {
  spans[i].setAttribute('style', 'color: red; font-weight: bold')
}

This is looping through the elements in our spans nodeList and setting the style attribute for each of them to color: red; font-weight: bold.

Let's consider how the .setAttribute() method works by taking a look at what a span looks like before and after we run the method.

Before:
<span class="dom">HTML5 Document Object Model</span>

Then we call the method:
exampleSpan.setAttribute('style', 'color: red; font-weight: bold')

And now the span looks like this:
<span class="dom" style='color: red; font-weight: bold'>HTML5 Document Object Model</span>

So when we call the setAttribute() method we are giving it two arguments - the first is the name of the attribute, and the second is the value.

What else could we do with setAtribute then? We could change the src attribute of an image, or change the href of a link, just to name a few examples. You'll be getting the opportunity to practice this more in some upcoming challenges!

Break time

Take a short break! Post questions or blocks on Discord so your cohort and online community can help you. Continue onto the next block when you feel ready to.