本文介绍如何在网页加载完成后，无需用户交互，自动将 HTML 无序列表（）中的 项按字母顺序升序排列，基于原生 JavaScript 实现，兼容现代浏览器且无需外部库。

本文介绍如何在网页加载完成后，无需用户交互，自动将 html 无序列表（`

`）中的 `
• ` 项按字母顺序升序排列，基于原生 javascript 实现，兼容现代浏览器且无需外部库。

  要实现页面加载即自动排序 HTML 列表，关键在于：在 DOM 完全解析后获取列表项、提取文本内容进行比较、重新按序插入 DOM。以下是一个完整、可直接运行的解决方案：

  
  
    <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>NBA Teams</title><script>
      document.addEventListener("DOMContentLoaded", function () {
        const teamList = document.getElementById("teamList");
        if (!teamList) return;
  
        // 将所有 <li> 元素转为数组（Array.from 兼容性良好）
        const teams = Array.from(teamList.children);
  
        // 使用 localeCompare 确保正确处理大小写、空格及国际化字符（如带重音符号的名称）
        teams.sort((a, b) => a.textContent.trim().localeCompare(b.textContent.trim()));
  
        // 清空原列表并按新顺序逐个追加
        teamList.innerHTML = "";
        teams.forEach(li => teamList.appendChild(li));
      });
    </script><h2>NBA Teams:</h2>
    

  • Sacramento Kings
  • Chicago Bulls
  • Atlanta Hawks
  • Indiana Pacers
  • LA Lakers
  • Boston Celtics

  ✅ 核心要点说明：

  

  Java Maven Code Review

  审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

  下载
  • DOMContentLoaded 事件确保脚本在 HTML 解析完成、DOM 可操作时执行，避免元素未加载导致的 null 错误；
  • Array.from(teamList.children) 将 HTMLCollection 转为真实数组，以便使用 sort() 方法；
  • textContent.trim().localeCompare(...) 比较前去除首尾空白，提升排序鲁棒性，并支持多语言字符（优于简单的 a.textContent > b.textContent）；
  • 直接清空 innerHTML 后逐个 appendChild，可保留
  • 元素上的内联事件监听器或数据属性（若存在），比纯字符串拼接更安全。

  ⚠️ 注意事项：

  • 确保目标
    具有唯一 id="teamList"（或其他对应 ID），否则需调整选择器；
  • 若列表中包含嵌套 HTML（如 或链接），textContent 会忽略标签结构，仅按纯文本排序——这正是本例所需；若需按渲染后可见文本（含样式影响）排序，请改用 innerText（但注意其性能略低且受 CSS display:none 影响）；
  • 如需降序排列，只需将 localeCompare 返回值取反：b.textContent.trim().localeCompare(a.textContent.trim())。

  该方案轻量、可靠、零依赖，适用于静态内容初始化排序场景，是前端自动化整理列表内容的标准实践。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南