Question

The bounty expires in 7 days. Answers to this question are eligible for a +50 reputation bounty. Konrad is looking for a canonical answer:

From comments: > That s because the "second match" immediately became the "first match" once the original first match was changed to no longer match. However, once you are done with the first iteration, your iterator will have already moved on to the second item, which would be what originally was the third, causing the originally-second to fall through the cracks

Why exactly iterator skips a value like that? Is it a simple for loop underneath?

I m 试图替换像<span id=“Something”/>等我的超文本中的一些地方持有人。我很想知道,为什么要用以下的 Java本代典代号取代第一起事件:

function set_placeholder(cls, txt)
{
    txt = document.createTextNode(txt);
    for (var e of document.getElementsByClassName(cls)) {
        e.parentNode.replaceChild(txt, e);
    }
}

在更换了<代码>span后,似乎无法找到下一个配对处。

因此,我试图insert<>。相反,使用这一备选案文:

function set_placeholder(cls, txt)
{
    for (var e of document.getElementsByClassName(cls)) {
        e.innerText = txt;
    }
}

现在,所有事件都会被取代,因此我想知道,这是我的过错,还是第一个变量失败时的浏览器(Firefox 102)。

HTML Sample

实际的超文本处理更为复杂,但这里有一些样本:

<html>
 <p><span class="ph-customer" /> bestellte am <span class="ph-customer-date" /> folgende Artikel:</p>
<!-- ... -->
 <table>
  <tr>
    <td><span class="ph-customer-date" />,
    <span class="ph-customer-name" /></td>
  </tr>
 </table>
<!-- ... -->
</html>

例如ph-customer-date 电话:set_place holder (ph-customer-date , 30.12.2023 )只能取代第一种情况。

Answer 1

The implementation is correct, and has been the same for 2 decades. What you are observing is that you are dealing with a live HTMLCollection and for will use the HTMLCollection.prototype[Symbol.iterator] to get the members. As others pointed correctly, replaceChild will pop the 0th item, and 1st will be 0th and 2nd will be first. Instead, cast it to something static:

<代码>Array. from(...)

牢记<代码>超声波是活着的,你还需要看<代码>NodeList,该编码可显示基于生活或不生活而出现类似行为。。

通常通过<代码>Array>从上排入固定阵列是安全的。

Array.from(document.getElementsByTagName("DIV")).forEach((div, i) => {
  if(!i){
    //method1 - DOES NOT WORK
    for (const span of div.getElementsByClassName("a")) {
      div.replaceChild(document.createTextNode("!"), span)
    }
  } else {
    //method2 - WORKS
    for (const span of Array.from(div.getElementsByClassName("b"))) {
      div.replaceChild(document.createTextNode("!"), span)
    }
  }
})

<div>
  <span class="a">x</span>
  <span class="a">y</span>
  <span class="a">z</span>
</div>

<div>
  <span class="b">u</span>
  <span class="b">v</span>
  <span class="b">w</span>
</div>

HTML Sample

友情链接