如何简便排序DOM元素？JS新手求按user_mmr从高到低排序表格行

嘿，作为JS新手能想着去处理DOM元素的排序，已经超棒啦！这里有个简单易懂的方法，帮你把表格里的行按user_mmr数值从高到低排序：

实现步骤与代码 #

首先我们要先获取到目标表格和所有用户行，接着对这些行进行排序，最后把排序后的行重新放回表格里就行啦。直接上代码：

// 获取页面中的表格（如果你的表格有id，用document.getElementById('表格id')会更精准）
const table = document.querySelector('table');
// 提取所有带.user类的行，并转成数组（因为原生NodeList没法直接用sort方法）
const userRows = Array.from(table.querySelectorAll('.user'));

// 按user_mmr降序排序
userRows.sort((rowA, rowB) => {
  // 从每行里提取mmr文本，转成数字类型（避免字符串排序出错）
  const mmrA = Number(rowA.querySelector('.user_mmr').textContent);
  const mmrB = Number(rowB.querySelector('.user_mmr').textContent);
  // 降序排序就用b的mmr减去a的，升序则反过来
  return mmrB - mmrA;
});

// 把排序后的行依次添加回表格（appendChild会自动把原行从旧位置移到新位置，不用手动删除）
userRows.forEach(row => table.appendChild(row));

小提示 #

• 如果你的表格有表头（比如<tr>里是表头内容），不用担心，我们的代码只选中了带.user类的行，表头不会被排序影响。
• 一定要把user_mmr的文本转成数字类型再比较哦！如果直接用字符串比较，遇到类似"1000"和"999"的情况，字符串排序会认为"999"更大，就出错啦。

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