如何用JavaScript实现HTML列表页面加载时自动按字母排序

直接用以下代码就能实现页面加载完成后，自动对指定列表按字母顺序排序：

<!DOCTYPE html>
<html>
<body>
  <h3>NBA Teams:</h3>
  <ul id="teamList">
    <li>Sacramento Kings</li>
    <li>Chicago Bulls</li>
    <li>Atlanta Hawks</li>
    <li>Indiana Pacers</li>
    <li>LA Lakers</li>
    <li>Boston Celtics</li>
  </ul>

  <script>
    // DOM加载完成后自动执行排序逻辑
    document.addEventListener('DOMContentLoaded', () => {
      const teamList = document.getElementById('teamList');
      // 将列表项转为数组方便排序
      const items = Array.from(teamList.querySelectorAll('li'));

      // 按文本内容进行字母排序，localeCompare确保排序规则符合语言习惯
      items.sort((a, b) => a.textContent.localeCompare(b.textContent));

      // 重置列表内容，添加排序后的项
      teamList.innerHTML = '';
      items.forEach(item => teamList.appendChild(item));
    });
  </script>
</body>
</html>

关键逻辑说明 #

1. DOM加载监听：通过DOMContentLoaded事件确保页面元素完全加载后再执行排序，避免找不到列表元素的问题。
2. 数组转换：把获取到的li元素集合转为数组，这样才能使用数组的sort方法。
3. 字母排序：使用localeCompare方法比较列表项的文本内容，比直接字符串比较更适配英文（及其他语言）的字母排序规则，能正确处理大小写、特殊前缀等情况。
4. 重置列表：清空原列表后，把排序后的列表项依次添加回去，完成排序展示。

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