javascript - 在 DOM 中查找元素并替换

Question

我在这里遇到了一些麻烦，我试图找到另一个 div 容器内的所有 div 元素，然后仅使用 javascript 将匹配项替换为新的 div。

这是一个描述:

我有这些div

<div id="container">
    <div class="oldclass">latency</div>
    <div>latency</div>
    <div>latency</div>
    <div class="oldclass">latency</div>
    <div>latency</div>
    <div>latency</div>
    <div class="oldclass">latency</div>
    <div>latency</div>
    <div>latency</div>
    <div class="oldclass">latency</div>
    <div>latency</div>
    <div>latency</div>
    <div class="oldclass">latency</div>
</div>

而我想要实现的是这个

<div id="container">
    <div class="newclass1">latency</div>
    <div>latency</div>
    <div>latency</div>
    <div class="newclass2">latency</div>
    <div>latency</div>
    <div>latency</div>
    <div class="newclass1">latency</div>
    <div>latency</div>
    <div>latency</div>
    <div class="newclass2">latency</div>
    <div>latency</div>
    <div>latency</div>
    <div class="newclass1">latency</div>
</div>

但我真的很难做到这一点，我已经使用过 childNodes、.match()、replace() 等

非常感谢任何帮助，感谢您的宝贵时间

Answer 1

在下面的代码中，我从文档中选择所有 div 节点并循环遍历它们。如果节点的类名等于“oldclass”，则将类名重命名为“newclass”。

elements = document.getElementsByTagName("div");
firstChanged = false;
for(i=0; i < elements.length; i++)
{
  if(elements[i].className == "oldclass")
  {
    elements[i].className = (firstChanged) ? "newclass2" : "newclass1";
    firstChanged = !firstChanged;
  }
}

编辑: firstChanged bool 值检查脚本是否已到达更改第一个匹配 div 的点。