在前端开发中，我们经常需要对DOM节点进行排序。比如按照某个属性值进行排序，或者根据用户的操作改变节点顺序等。本文将介绍一种最简单的方法来排序DOM节点。
排序方式
我们可以使用JavaScript的sort()方法来排序数组，而DOM节点可以看作是一个类数组对象，因此也可以使用sort()方法来对DOM节点进行排序。
const nodeList = document.querySelectorAll('.item')
Array.prototype.sort.call(nodeList, (a, b) => {
// 排序逻辑
})其中，第一个参数是一个类数组对象，第二个参数是一个比较函数，用于指定排序逻辑。在比较函数中，需要返回一个数值类型的结果，表示两个节点之间的大小关系：
- 如果返回负数，则表示
a应该排在b的前面。 - 如果返回正数，则表示
b应该排在a的前面。 - 如果返回0，则表示
a和b相等，顺序不会改变。
下面我们分别介绍几种常见的排序方式。
按照属性值排序
如果我们想要按照某个属性值来排序节点，可以直接在比较函数中获取属性值并比较即可。比如，假设我们有一组列表项，每个列表项都有一个数字属性data-value，我们希望按照这个属性值来排序节点：
<ul id="list"> <li class="item" data-value="3">Item 1</li> <li class="item" data-value="1">Item 2</li> <li class="item" data-value="2">Item 3</li> </ul>
const nodeList = document.querySelectorAll('.item')
Array.prototype.sort.call(nodeList, (a, b) => {
const aValue = parseInt(a.getAttribute('data-value'))
const bValue = parseInt(b.getAttribute('data-value'))
return aValue - bValue
})按照文本内容排序
如果我们想要按照文本内容来排序节点，可以直接在比较函数中获取文本内容并比较即可。比如，假设我们有一组列表项，我们希望按照字母表顺序来排序节点：
<ul id="list"> <li class="item">C</li> <li class="item">A</li> <li class="item">B</li> </ul>
-- -------------------- ---- -------
----- -------- - ----------------------------------
----------------------------------- --- -- -- -
----- ------ - -------------
----- ------ - -------------
-- ------- - ------- -
------ --
- ---- -- ------- - ------- -
------ -
- ---- -
------ -
-
--根据用户操作改变节点顺序
如果我们想要根据用户的操作来改变节点顺序，可以先将所有节点按照默认顺序排好序，然后在比较函数中根据用户操作返回不同的结果即可。比如，假设我们有一组拖动排序的列表项，当用户拖动某个列表项时，我们需要根据拖动的位置计算出新的节点顺序：
<ul id="list"> <li class="item">Item 1</li> <li class="item">Item 2</li> <li class="item">Item 3</li> </ul>
-- -------------------- ---- ------- ----- -------- - ---------------------------------- --- ----------- - ---- -------- ------------------ - ----------- - -------- - -------- ----------------- - ------------------ - -------- ------------- - ------------------ ----- ---------- - -------- ----- ---------- - --------------------- ----- ----- - ------------------------------- ----- ------------ - -------------------------- ----- ----------- - ------------------------- ----- - ----------------------------------------------------------- -------- ----------------------------------------------------------------------------------