javascript 节点排序 2

JavaScript 节点排序 2 完整攻略

1. 排序方法说明

JavaScript 中对 DOM 节点进行排序的方法有很多种，NodeList 接口提供了一些排序方法，如 sort()。但 NodeList 的 sort 方法比较麻烦，需要使用回调函数和 apply() 方法。

另外，互联网上也有很多 DOM 节点排序比较好的第三方库，如 jQuery 和 lodash 等。大家可以根据具体情况进行选择，但这里仅讨论使用原生 JavaScript 进行节点排序方法。

2. 排序示例说明

下面给出两个排序示例说明：

2.1 按照节点的文本内容排序

在下面的示例代码中，我们将按照节点的文本内容进行排序。需要注意的是节点的文本内容都是在节点的 textContent 属性中。

var list = document.getElementById("list");
var items = list.getElementsByTagName("li");

// 将节点文本内容存储到数组中
var texts = [];
for (var i = 0, len = items.length; i < len; i++) {
  texts.push(items[i].textContent);
}

// 对数组进行排序(从小到大)
texts.sort();

// 将排序结果赋值给原来的节点
for (var i = 0, len = texts.length; i < len; i++) {
  items[i].textContent = texts[i];
}

2.2 按照节点的某个属性排序

在下面的示例代码中，我们将按照节点的某个属性进行排序。例如节点的属性是 data-index，我们需要按照 data-index 的值进行排序。

var list = document.getElementById("list");
var items = list.getElementsByTagName("li");

// 将节点的 data-index 所有属性存储到数组中
var data = [];
for (var i = 0, len = items.length; i < len; i++) {
  data.push(items[i].getAttribute("data-index"));
}

// 对数组进行排序(从小到大)
data.sort(function(a, b) {
  return a - b;
});

// 将排序结果赋值给原来的节点
for (var i = 0, len = data.length; i < len; i++) {
  list.appendChild(items[data[i]]);
}

3. 总结

以上为 JavaScript 节点排序 2 的完整攻略，总结如下：

1. 使用原生 JavaScript 进行节点排序的方法需要比较熟悉 DOM 的相关 API；
2. 排序方法最好根据具体情况来选择，为避免重复造轮子，建议择优而行。