如何使用 JavaScript 对 HTML 列表进行排序？

在网页开发过程中，经常需要对列表进行排序操作。使用 JavaScript 可以很方便地实现列表排序，本文将介绍如何使用 JavaScript 对 HTML 列表进行排序。

1. 获取列表元素

首先，我们需要获取要排序的列表元素。我们可以使用 querySelectorAll() 方法获取元素并保存在变量中。

var list = document.querySelectorAll('ul li');

2. 将元素转换为数组

使用 JavaScript 内置的 Array.from() 方法可以将 NodeList 对象转换为数组。

var listArray = Array.from(list);

3. 排序

我们可以使用 sort() 方法对列表进行排序。方法会会根据传入的函数，对数组中的所有元素进行排序。

将 listArray 数组作为参数传入 sort() 方法，并定义排序方法。默认的比较函数是按字母顺序排列的。

listArray.sort(function(a, b) {
  return a.innerText.localeCompare(b.innerText);
});

上述代码使用 innerText 属性来比较列表项文本，而 localeCompare() 方法用于比较两个字符串的顺序。 sort() 方法会自动将列表项按字母顺序递增进行排序。

4. 将排序后的数组更新至 HTML 中

现在我们已经有了排序后的数组。接下来，我们需要将该数组按照排序结果更新到 HTML 中。

可以通过将每个元素的新位置与父元素的子元素列表一起使用 appendChild() 方法来更新列表项位置。

var ul = document.querySelector('ul');
listArray.forEach(function(li) {
  ul.appendChild(li);
});

5. 完整代码

下面是完整的 JavaScript 代码块，用于对 HTML 列表进行排序：

var list = document.querySelectorAll('ul li');
var listArray = Array.from(list);
listArray.sort(function(a, b) {
  return a.innerText.localeCompare(b.innerText);
});
var ul = document.querySelector('ul');
listArray.forEach(function(li) {
  ul.appendChild(li);
});

至此，我们已经学会了如何使用 JavaScript 对 HTML 列表进行排序。