javascript - 将两个以上的子元素附加到一个元素会产生奇怪的行为

Question

我有一个非常奇怪的行为，我不知道是什么原因造成的。

我遍历了 javascript 可以在我的 html 页面中找到的所有 id。每次当“id”以特定标签开头时，它都会进入我的 if 语句。

在这个 if 语句中，我创建了几个元素，例如 P、H1 和 HR。在我的“html”页面中，我有 3 个唯一的 id，它们是 DIV，应该进入 if 语句。这很有效(左图 [ 1])，直到……

我试图将两个以上的子元素附加到那些 DIV 元素。前两个 DIV 元素按预期扩展。最后一个还没有扩展。在有两个以上的元素添加到父元素的那一刻，第 3 个 DIV(standardArticle3)没有通过 if 语句。 (右图[2])

希望代码和场景图片能让这个故事更清晰:

home.component.ts

var allElements = document.getElementsByTagName("*");
console.log(allElements);
for (var i = 0, n = allElements.length; i < n; ++i) {
  var el = allElements[i];
  var foundElementId = el.id;
  console.log(foundElementId);
  if (foundElementId.startsWith("standardArticle"))
  {
    var standardArticleElement = this.jsonReaderService.getStandardArticleContent(foundElementId.substring(15, foundElementId.length));

    var titleElement = document.createElement("h1");
    var titleText = document.createTextNode(standardArticleElement.title);
    titleElement.appendChild(titleText);

    var contentElement = document.createElement("p");
    contentElement.innerHTML = standardArticleElement.content;

    var thematicBreak = document.createElement("hr");
    thematicBreak.style.borderTopColor = "black";

    var thematicBreakTwo = document.createElement("hr");
    thematicBreakTwo.style.borderTopColor = "black";

    // Child elements are all being appended the right way, but the last DIV will never be extended
    el.appendChild(titleElement);
    el.appendChild(thematicBreak);
    el.appendChild(contentElement);
    el.appendChild(thematicBreakTwo);
  }
}

home.component.html

    // other content
    <div id="standardArticle1" class="col-sm-6">
    </div>
    // other content
    <div id="standardArticle2" class="col-sm-6 pull-right">
    </div>
    // other content
    <div id="standardArticle3" class="col-sm-6">
    </div>

场景 1 和 2。

有人知道为什么会这样吗？

Answer 1

document.getElementsByTagName() 返回一个实时 HTMLCollection，您的集合包括页面上的每个元素。这意味着当您附加新元素时，这些元素会包含在集合中，但是由于您迭代到集合的原始长度，您将错过集合的最后一个元素(元素数量与元素数量相同你添加了)。

对于您的问题，似乎更好的解决方案是为您想要查找的所有元素添加一个类，然后使用 document.getElementsByClassName() 获取这些元素:

var allElements = document.getElementsByClassName("standard-article");

... 然后将类名添加到 HTML 中:

// other content
<div id="standardArticle1" class="standard-article col-sm-6">
</div>
// other content
<div id="standardArticle2" class="standard-article col-sm-6 pull-right">
</div>
// other content
<div id="standardArticle3" class="standard-article col-sm-6">
</div>

使用这种方法，您也不需要 id.startsWith("standardArticle") if 语句。