必须用javascript操作dom实现排序；页面刷新常见因按钮在form内且type为submit，需preventdefault或改type；nodelist需转数组才能sort；排序前要trim、数字需parseint；表格只排tbody；用data-sort存原始值；异步加载需确保dom渲染完成后再排序。
不能靠 <button></button> 自身实现排序，必须配合 JavaScript 操作 DOM；刷新与否取决于你有没有触发表单提交或页面跳转。
为什么点按钮后页面会刷新
常见原因是按钮被放在 <form></form> 里，且 type 是 submit（默认值）。点击即触发表单提交，浏览器自动刷新。
- 检查按钮是否在
<form></form>内：是 → 必须加e.preventDefault()或改type="button" - 检查是否有
href="#"或onclick="location.reload()"类似逻辑：删掉 - 用开发者工具 Console 看有没有报错，比如
Cannot read property 'sort' of undefined—— 说明 NodeList 没转数组就调用了.sort()
document.querySelectorAll('li') 不能直接 .sort()
NodeList 是类数组，但不是 Array，没有 .sort() 方法。强行调用会报错或静默失败。
- 正确写法：
[...document.querySelectorAll('li')]或Array.from(document.querySelectorAll('li')) - 排序前务必
.trim()：避免空格导致" apple"排在"banana"前 - 数字字符串要显式转换：
parseInt(a.textContent) || 0，否则"10""2"（字典序） - 忽略大小写推荐用：
a.textContent.trim().localeCompare(b.textContent.trim(), undefined, { sensitivity: 'base' })
排序后如何正确重插 DOM 元素
DOM 元素移动不等于“复制”，appendChild() 会自动从原位置移除再插入新位置——这是高效做法，不用手动 removeChild()。
- 对
<ul></ul>或<ol></ol>排序时，只操作其子元素：list.appendChild(item)即可，无需清空再 appendAll - 别用
innerHTML +=拼接 HTML 字符串：会销毁所有绑定事件、丢失 input 值、触发重排重绘 - 如果列表项有事件监听器（如 click），用
appendChild()移动不会丢失监听器；用 innerHTML 会全部丢失 - 示例关键行：
items.forEach(item => list.appendChild(item));
表格排序要特别注意 <thead> 和 <code><tbody> 分离
<p>直接对 <code>table.querySelectorAll('tr') 排序，会把表头也拖进排序队列，导致表头消失或错位。
- 只取
tbody.querySelectorAll('tr')，永远绕过 thead 和 tfoot
- 用
data-sort 属性存原始值（如日期存 2024-05-20，数字存 42），避免运行时反复解析文本
- 升/降序状态必须存在变量里（如
let sortDirection = 'asc'），不能靠 class 名判断——class 可能被其他逻辑干扰
- 箭头图标等视觉反馈建议用 CSS class 控制，不要硬写
<span>↑</span>，方便主题切换
tbody.querySelectorAll('tr')，永远绕过 thead 和 tfoot
data-sort 属性存原始值（如日期存 2024-05-20，数字存 42），避免运行时反复解析文本let sortDirection = 'asc'），不能靠 class 名判断——class 可能被其他逻辑干扰<span>↑</span>，方便主题切换最易被忽略的点：排序逻辑写在按钮 click 里没问题，但如果你的列表是异步加载（比如 fetch 后渲染），必须确保排序代码在数据真正写入 DOM 之后执行——放错时机就会排了个空数组。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
