如何遍历选定的元素并将样式应用于每个元素？

Question

// I am trying to iterate through the collection of "li" that are returned as result of using the getElementsByTagName method and apply styles to each of them //

let listItems = document.getElementsByTagName('li')[0];
const addItemInput = document.querySelector('input.addItemInput');
const addItemButton = document.querySelector('button.addItemButton');
const removeItemButton = document.querySelector('button.removeItemButton');

listItems.addEventListener('click', () => {
    let count = listItems.length;
    for(let i = 0; i < count; i++) {
      listItems[i].style.textDecoration = "line-through";
      listItems[i].style.color = "gray";
    }


});

addItemButton.addEventListener('click', () => {
  let todoList = document.getElementsByTagName('ul')[0];
  let li = document.createElement('li');
  li.innerHTML = addItemInput.value;
  todoList.appendChild(li);
  addItemInput.value = "";
});

removeItemButton.addEventListener('click', () => {
  let todoList = document.getElementsByTagName('ul')[0];
  let li = document.querySelector('li:first-child');
  todoList.removeChild(li);
});

Answer 1

listItems isn't an array; you're immediately indexing (with [0] ) the collection that getElementsByTagName returns and storing that single element in the (now misleadingly-named) variable.

More fundamentally, it doesn't look like you're looping in the right place, and probably misworded your question. It looks like you want to be looping over the elements, adding an even listener to each , and have each listener individually re-style the element it's attached to.

However, that probably still won't actually do what you want, because it'll only hook up the listeners once: new elements won't get one, unless:

1. You add the listener to each new element as you add it. This would work, but there's a better way.
2. You add an event listener to the parent list (that is, the ul element) and catch the click event as it bubbles . This will require a little more logic inside the event handler, but less elsewhere.