javascript - 针对多个 ID/元素的 document.getElelementById() 的替代方案

Question

我知道 document.getElementById() 不适用于多个 id。所以我尝试了这个:

document.getElementsByClassName("circle");

但这也根本不起作用。但如果我只使用 document.getElementById() 它就可以使用该 id。这是我的代码:

let toggle = () => {
  let circle = document.getElementsByClassName("circle");
  let hidden = circle.getAttribute("hidden");

  if (hidden) {
    circle.removeAttribute("hidden");
  } else {
    circle.setAttribute("hidden", "hidden");
  }
}

Answer 1

document.getElementsByClassName() 返回一个 NodeList，要将其转换为元素数组，请使用 Array.from()。这将返回一个包含类名 circle

的所有元素的数组

这是一个示例，它使用 circle 类更改每个元素:

const items = document.getElementsByClassName('circle')
const output = Array.from(items)

function change() {
  output.forEach(i => {
    var current = i.innerText.split(' ')
    current[1] = 'hate'
    current = current[0] + ' ' + current[1] + ' ' + current[2]
    i.innerText = current
  })
}

<p class="circle"> I love cats! </p>
<p class="circle"> I love dogs! </p>
<p class="square">I love green!</p>
<p class="circle"> I love waffles! </p>
<p class="circle"> I love javascript! </p>
<p class="square">I love tea!</p>
<button onclick="change()">Change</button>