如何通过Title对HTMLCollection列表项排序？（原生JavaScript）

我是原生JavaScript入门开发者，尝试将列表中的元素按字母顺序排序并更新DOM，但现有方案执行时会丢失元素，求可行解决方案。

列表项结构 #

<li class="foodListItem" title="potato">
  <div class="img">
    <a href="" title="potato">
      <img src="FoodImages/potato.jpg" alt="Potato">
    </a>
  </div>
  <p class="name">
    <a href="" title="potato"> Potato</a>
  </p>
</li>
<li class="foodListItem" title="brocolli">
  <div class="img">
    <a href="" title="brocolli">
      <img src="FoodImages/brocolli.jpg" alt="brocolli">
    </a>
  </div>
  <p class="name">
    <a href="" title="brocolli"> brocolli</a>
  </p>
</li>

尝试的代码（无效） #

function sortImages()
{
    var foodList= document.getElementsByClassName("foodListItem");
    foodArray = Array.from(foodList);
    foodArray.sort(function (a, b){
        if(a.title < b.title)
        {
            return -1;
        }
        if(a.title > b.title){
            return 1;
        }
        return 0;
    });
    for(var i = 0; i < foodArray.length; i++)
    {
        foodList[i].replaceWith(foodArray[i]);
    }
}

问题原因 #

getElementsByClassName返回的是动态HTMLCollection，它会随DOM的变化实时更新。当你执行replaceWith替换元素时，原元素被移除，foodList的长度和内容会立刻改变，导致循环到后续索引时，foodList[i]指向的元素已经不存在，最终出现元素丢失的情况。

另外原排序逻辑没有处理大小写差异，可能导致排序结果不符合预期（比如大写开头的元素会排在小写前面）。

可行解决方案 #

方案1：通过父容器重新追加排序后的元素（推荐） #

这种方法逻辑简单，避免操作动态集合的问题：

function sortImages() {
  // 用querySelectorAll获取静态NodeList，不会随DOM变化而更新
  const foodItems = document.querySelectorAll(".foodListItem");
  // 转数组并按title小写排序，消除大小写影响
  const sortedItems = Array.from(foodItems).sort((a, b) => {
    const titleA = a.title.toLowerCase();
    const titleB = b.title.toLowerCase();
    return titleA.localeCompare(titleB); // 用localeCompare更简洁
  });
  // 获取列表项的父容器（假设是ul，根据实际DOM结构调整）
  const parentContainer = foodItems[0].parentNode;
  
  // 清空父容器原有内容
  parentContainer.innerHTML = "";
  // 将排序后的元素依次添加到父容器
  sortedItems.forEach(item => {
    parentContainer.appendChild(item);
  });
}

方案2：避免操作动态集合，直接使用排序后的数组 #

如果不想清空父容器，可以先把所有元素从DOM中移除，再重新插入：

function sortImages() {
  const foodList = document.getElementsByClassName("foodListItem");
  const foodArray = Array.from(foodList);
  
  // 按title小写排序
  foodArray.sort((a, b) => {
    return a.title.toLowerCase().localeCompare(b.title.toLowerCase());
  });
  
  // 获取父容器
  const parent = foodArray[0].parentNode;
  // 先将所有元素从父容器中移除（元素是引用，移除后仍保存在数组中）
  foodArray.forEach(item => parent.removeChild(item));
  // 再按排序后的顺序添加回去
  foodArray.forEach(item => parent.appendChild(item));
}

补充说明 #

• 使用querySelectorAll替代getElementsByClassName可以获取静态集合，避免动态更新带来的索引混乱。
• 排序时统一转为小写（或大写），确保排序结果不受大小写影响。
• 用localeCompare方法可以更简洁地实现字符串排序，还能处理多语言字符的排序需求。

内容的提问来源于stack exchange，提问作者iGeron1mo