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