javascript - 如何让所有的子元素都变成红色

Question

这是html代码:

<div id="sm-responsive-one">
  <p> Step one </p>
  <div  style="">1</div>
  <div  style="">2</div>
  <div  style="">3</div>
  <div  style="">4</div>
</div>

<div id="sm-responsive-two">
  <p> Step two </p>
  <div  style="">5</div>
  <div  style="">6</div>
  <div  style="">7</div>
  <div  style="">8</div>
</div>

问题:我想让 1、2、3 和 4(sm-responsive-one 的子元素)使用 JavaScript 读取颜色而不使用任何循环。这可能吗？

这是我正在尝试的代码:

<script>
  document.getElementById("sm-responsive-one").getElementsByTagName("div").style.color="red";

  //document.getElementById("sm-responsive-one").getElementsByTagName("div")[2].style.color="red";
</script>

Answer 1

您需要使用循环，因为 getElements* 返回伪数组。

如果您不想使用文字循环语法，您可以应用 Array.prototype.forEach，但这在内部仍然是一个循环。

var children = document.getElementById("sm-responsive-one").getElementsByTagName("div");
Array.prototype.forEach.call(children, function (it) {
    it.style.color="red";
});