JavaScript : can I re-order indexes of elements after an insertBefore or an appendChild method?

Question

我在父容器内有 3 个 div 宽度 class="childContainer"，如下所示:

<div id="parentContainer">

    <div class="childContainer"></div>
    <div class="childContainer"></div>
    <div class="childContainer"></div>

</div>

我可以通过以下方式访问这些元素:

parentContainer = document.getElementById("parentContainer");
childContainer = document.getElementsByClassName("childContainer");

然后，我使用以下方法将第一个 childContrainer 移动到最后一个位置:

parentContainer.appendChild(childContainer[0]);

因此子容器的元素索引变为:1,2,0，而不是0,1,2。

但我想重新排序这些索引，使元素索引 1 变为 0，元素索引 2 变为 1，元素索引 0 变为 2。

我怎样才能做到这一点？

Answer 1

当您创建 childContainers 时，您正在创建一个 HTMLCollection object 。并且:

An HTMLCollection in the HTML DOM is live; it is automatically updated when the underlying document is changed.

这意味着当您运行 parentContainer.appendChild(childContainer[0]); 时，HTMLCollection 会更新，结果是:

{
  "0": <div class="childContainer">1</div>,
  "1": <div class="childContainer">2</div>,
  "2": <div class="childContainer">0</div>,
  "length": 3,
  "item": function item() { [native code] },
  "namedItem": function namedItem() { [native code] }
}

它对元素进行了重新排序，因此 0 现在是 2，1 现在是 0，2 现在是 1。

这是一个示例 - 我们将第一个元素附加到末尾，然后将 console.log 添加到 childContainers 以查看索引是否已更改。

parentContainer = document.getElementById("parentContainer");
childContainers = document.getElementsByClassName("childContainer");

parentContainer.appendChild(childContainers[0]);

console.log(childContainers)

<div id="parentContainer">

    <div class="childContainer">0</div>
    <div class="childContainer">1</div>
    <div class="childContainer">2</div>

</div>