Question

试图更改所有具有子类名称的点的文本。

尝试了以下代码，但未更改。

function myFunction() {

  document.getElementsByClassName("child").innerHTML = "Milk";
}

<!DOCTYPE html>
<html>

<body>

  <ul class="example">
    <li class="child">Coffee</li>
    <li class="child">Tea</li>
  </ul>


  <button onclick="myFunction()">Click here!</button>

</body>

</html>

Answer 1

要获取具有特定选择器的所有元素，可以使用Document.querySelectorAll()。然后遍历所有元素以设置内容。

请注意：：如果要设置的值为文本，则最好使用textContent而不是innerHTML：

function myFunction() {
  document.querySelectorAll(".child").forEach(function(li){
    li.textContent = "Milk";
  });
}

<!DOCTYPE html>
<html>

<body>

  <ul class="example">
    <li class="child">Coffee</li>
    <li class="child">Tea</li>
  </ul>

  <button onclick="myFunction()">Click here!</button>

</body>

</html>

Answer 2

document.getElementsByClassName()返回一个HTMLElements数组。因此，您不能立即使用innerHTML。

您需要遍历数组，例如：

var eles = document.getElementsByClassName('child');
for (var i = 0; i < eles.length; i++) {
    eles[i].innerHTML = 'Milk';
}

使用javascript中的类更改文本

2 个答案: