Update css styles using getElementsByTagName

Question

I want to change the color of all elements with

tags to red.

I'm doing:-

document.getElementsByTagName("li").style.color = "red"

This isn't working. But it's working with querySelectorAll method and getElementsByClassName method.

Does it mean that I can't use this technique with getElementsByTagName or am I doing it wrong?

Answer 1

The return value of the getElementsByTagName() method is a HTMLCollection and not a DOM Element.

You can iterate over the HTMLCollection in different ways. For example:

const els = document.getElementsByTagName("li");
for(const el of els) {
    el.style.color = "red";
}

Answer 2

Try this:

    let listItems = [...document.getElementsByTagName("li")];
    listItems.forEach(li => li.style.color = "red");

Answer 3

Since the getElementsByTagName method returns a live HTMLCollection of elements, you need to iterate over the collection to apply your style.

Please run the snippet below to see this in action:

//declare function to change color of list items
function changeColor() {
  //get li tags by tag name
  let li_tags = document.getElementsByTagName("li")
  //iterate over tags and apply the color red
  for (let i = 0; i < li_tags.length; i++) {
    li_tags[i].style.color = "red"
  }
}

//declare button as variable using the btn id
const btn = document.getElementById("btn")

//when button is clicked run the changeColor function
btn.addEventListener("click", changeColor)

<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>
<br />
<button id="btn">Change Color</button>