真排序需转数组再重排节点：HTMLCollection无sort方法，须用[...rows]转换；排序后必须appendChild重排真实DOM；懒加载需重置索引并全量重载；视觉倒序优先用flex-direction:column-reverse；数字列排序须转数值防字符串比较错误。
直接操作 DOM 排序动态内容，90% 的问题出在“误把 HTMLCollection 当数组用”或“排序后没重排真实节点”。真排序不是改 innerHTML，而是提取、比较、再 appendChild。
table.rows.sort() 会报错？因为它是只读类数组
常见错误是写 table.rows.sort(...)，浏览器直接抛 TypeError: table.rows.sort is not a function。HTMLCollection 没有 sort() 方法，也不能直接修改顺序。
- 必须先转成真数组：
[...table.rows]或Array.from(table.rows) - 若含表头，记得跳过第 0 行：
[...table.rows].slice(1) - 排序后不能只改内容，得调用
table.appendChild(row)把行真正移过去——这一步会自动从原位置移除并追加到末尾，天然稳定
懒加载列表排序后滚动错乱？必须重置加载状态
懒加载（infinite scroll）的列表一旦排序，DOM 顺序变了，但 startIndex 还按旧顺序记着，后续滚动会加载错位项，甚至重复或跳过。
- 每次调用排序函数后，立刻清空所有已加载标记，比如移除
.loaded类 - 重置分页/索引变量：
startIndex = 0、hasMore = true - 立即触发首屏加载：
loadMoreItems()，确保新顺序的第一批数据进 DOM - 别试图“局部重排”，懒加载 + 排序必须全量重载可见区逻辑
ul/li 列表视觉倒序显示？优先用 CSS，别碰 JS
只要求视觉上从下往上显示（比如聊天记录最新在底），就别用 JS 移动节点——性能差、可访问性崩、键盘 Tab 顺序错乱。
- 给
display: flex; flex-direction: column-reverse - 配合
flex-direction: column切换正/倒序，用 class 控制即可 - 注意：这会同步反转屏幕阅读器顺序和 Tab 流，如需保留原始语义，得额外加
aria-reversed="true"并手动管理焦点 - 避免用
order属性逐个设置每个，动态增删时维护成本爆炸
数值列排序变成 "10 在 2 前面"？必须显式转数字
JavaScript 默认字符串排序，"10" 为 true，所以表格里数字列一排就乱。
- 提取单元格文本后，立刻用
Number(cell.textContent.trim())转数值 - 防错处理：空值、单位符号（如 "¥123"）、科学计数法都得清洗，建议用
parseFloat()+ 正则预处理 - 比较函数写成
(a, b) => numA - numB（升序），别用localeCompare，它还是字符串比 - 日期、金额等复杂类型，优先提取时间戳或标准数值再比，别依赖格式化后的文本
最易被忽略的一点：排序函数里取值要稳定。比如用 row.cells[1].textContent，但如果某行缺失该单元格，就会取到 undefined，转成 NaN 后所有比较都失效。务必加空值兜底，比如 cell?.textContent?.trim() || '0'。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
