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

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只是节点的只读视图.为了操作节点,您必须使用各种DOM操作方法之一.在你的情况下,碰巧有一个捷径; 您所需要做的就是以相反的顺序追加子节点.

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

编辑:发生的事情是appendChild在附加节点之前从文档中删除节点.这有两个影响:a)它使您不必复制节点列表并在以相反的顺序附加节点之前将其删除,并且b)它会随​​着节点的顺序反转节点的顺序,因为它会附加最后一个节点第一个和第一个子列表.