javascript - 如何反转无序列表中列表项的顺序

Question

假设我有一个无序列表，如下所示:

<ul id="birds">
  <li>Bald Eagle</li>
  <li>Falcon</li>
  <li>Condor</li>
  <li>Albatross</li>
  <li>Parrot</li>
</ul>

使用纯 JavaScript(不包括 jQuery)，我希望能够颠倒此列表的顺序 - 以便它匹配以下预期的“输出”:

<ul id="birds">
  <li>Parrot</li>
  <li>Albatross</li>
  <li>Condor</li>
  <li>Falcon</li>
  <li>Bald Eagle</li>
</ul>

这是我尝试编写的 JavaScript，以尝试实现此目标:

var birdList = document.getElementById("birds").getElementsByTagName("li");
var birdListReverse = birdList.reverse();

for(var i = 0; i < birdList.length; i++)
{
  birdList[i] = birdListReverse[i];
}

我认为以某种方式用“反向”列表中的项目覆盖当前列表项就足够了，但并非如此。我是否必须以某种方式操纵列表中的每个 nodeValue？

我想在单击按钮时执行此操作 - 这是最简单的部分，它只是获得反转列表的技术，这对我来说有点阻碍。

Answer 1

HTMLCollection 只是节点的只读 View 。为了操作节点，您必须使用各种 DOM 操作方法中的一种。在您的情况下，恰好有一条捷径；您需要做的就是以相反的顺序附加子节点。

var birds = document.getElementById("birds");
var i = birds.childNodes.length;
while (i--)
  birds.appendChild(birds.childNodes[i]);

编辑:发生的事情是 appendChild 在追加之前从文档中删除节点。这有两个效果:a)它使您不必复制节点列表并在以相反的顺序附加它们之前删除它们，并且 b)它会颠倒节点的顺序，因为它附加了最后一个子节点第一个和第一个子列表。