使用纯Javascript无循环地选择和修改元素集合

我正在尝试选择和设置相同样式和/或类的元素。到目前为止，我发现这样做需要在元素数组中循环，如下所示：

var examples = document.getElementsByClassName("example");

for (var i = 0; i < examples.length; i++) {
  examples[i].style.color = "cornflowerblue";
}

带有for循环的示例

var examples=document.getelementsbyclassnamexample； 对于var i=0；i.长度；i++{ 示例[i].style.color=矢车菊蓝； }

示例一

例二

示例三

---

示例四

如注释中所述，如果不是因为getElementsByClassName的返回值行为类似于一个数组，实际上是一个节点列表，并且没有内置forEach方法，则可以使用数组的forEach成员函数

编写一个小函数来执行循环，另一个函数对每个元素执行操作，可以很容易地避免这种情况

下面的代码将解决您提出的问题

一,。泛型函数

三,。做实际工作

显然，对于对元素列表进行操作的“一次性”需求，这种方法过于冗长，最好用您已经提供的代码替代

在需要频繁执行此操作的情况下，此代码可以减少重复次数，并有助于使代码更易于快速阅读，同时还可以防止复制粘贴错误或其他不必要的错误。您只需为需要在元素列表上执行的每个任务编写函数2，然后获取该列表，并让forEachNode使用您编写的函数2处理该列表

---

当然，jQuery总是一个选项。虽然仅仅为几个函数包含一个100kb的库是相当大的开销：

这并不完全相同，但可以达到相同的效果。您可以在DOM中动态添加和修改样式表元素：

var sheet = document.createElement('style')
sheet.innerHTML = ".example { color: cornflowerblue }";
document.body.appendChild(sheet);

然后，要在以后将颜色更改为红色，只需执行以下操作：

sheet.innerHTML = ".example { color: red }";

更多信息请访问

更新的代码片段

var sheet=document.createElement'style' sheet.innerHTML=.example{color:cornflowerblue}； document.body.appendChildsheet；

示例一

例二

示例三

---

示例四

可以通过使用CSS和JS来完成。您需要做的是将“p”元素包装到另一个元素中，例如div，并在本例中更改div的类。在CSS中，您将拥有更改p元素样式的父子CSS

document.changeStyle=函数{ document.getElementByIdparent.className=turnStyleOn； } .turnStyleOn.示例{ 颜色：矢车菊蓝； }

示例一

例二

示例三

例四

---

我不得不问一个非常愚蠢的问题，但是你为什么不直接使用CSS呢。示例{颜色：矢车菊蓝}。可能是我没有正确理解这个问题，“标准”数组有forEach方法，允许您传递一个数组和一个将为每个数组调用的函数。不幸的是，从getElements*和querySelector*函数返回的结果不是数组，而是NodeList类型，因此没有此方法可用。@enhzflep那么我唯一可行的选择是使用jQuery选择器方法吗？@CarlEdwards-nope。请参阅下面的jQuery免费解决方案。感谢您的详细介绍。对于itemCallback函数，list参数代表什么？@CarlEdwards-没关系。list参数引用包含当前元素的整个列表。我还没有使用这个参数或索引，但是编写了这个函数，以便它镜像数组的forEach成员。我猜您可以在回调函数中计算列表中包含的项目数，如果元素数为偶数，则执行一项操作，如果元素数为奇数，则执行另一项操作。有了索引，我想你可以在除以2后检查余数，即索引%2，这将允许你对列表中的项目进行不同的替换。无论是谁投了反对票，都可以证明自己的观点是正确的。因此，of then也应该被否决，因为它采用了相同的方法，使用了更多的代码。另一方面，我提出的解决方案与OP要求的方案非常接近，因为在给定的情况下，它是可以实现的。每个人都得到了无法解释的否决票，包括@enhzflep——可能是有人搞砸了，没有得到，或者只是有效地行使了他们选择的投票权。很烦人，但这些事情都会发生。不幸的是，没有办法通知下一个投票者你正在向他们上诉，所以下一个投票者也会被扔得满地都是。请解释下一个投票者可能从未读过的评论。无论如何+1是一个有用的建议，尽管我会在不循环部分的情况下用question@CupawnTae，谢谢你的解释。

---

我会仔细阅读所有其他有效的答案，可能会自由投票或不投票。这里的普遍态度是，你总是可以出于几乎任何原因对任何答案投票——正如我看到有人说的，即使你不喜欢他们使用的字体——只要你没有完全滥用系统。如果你搜索downvote，你会发现关于这个话题的无休止的讨论会持续数小时，包括一些人建议像please explain downvote这样的评论应该自动删除。而且，从技术上讲，我也不应该在这里讨论这个问题。

function itemCallback(elem, index, list)
{
    elem.style.color = 'cornflourblue';
}

function changeExampleElemStyles()
{
    var examples = document.getElementsByClassName('example');
    forEachNode(examples, itemCallback);
}

var sheet = document.createElement('style')
sheet.innerHTML = ".example { color: cornflowerblue }";
document.body.appendChild(sheet);

sheet.innerHTML = ".example { color: red }";

Array
  .apply([], document.getElementsByClassName("example"))
  .forEach(function (elmNode) {
    elmNode.style.color = "cornflowerblue";
  })
;