使用Array.prototype.sort.call对HTMLCollection进行排序

Question

var down=function(a,b){alert(a)}
Array.prototype.sort.call(table.tBodies[0].childNodes,down)
Array.prototype.sort.call([0,1,2,3],down)

为什么我没有收到第一次打电话的提醒？

Answer 1

首先将NodeList转换为数组：

var elements = [].slice.call(table.tBodies[0].childNodes);

然后通常调用sort：

elements.sort(down);

似乎sort无法处理类似数组的对象。这可能是因为NodeList没有提供任何方法来更改列表，但sort就地对阵列进行排序。

更新：有关更多信息，请访问specification：

执行依赖于实现的调用序列，调用obj的[[Get]]，[[Put]]和[[Delete]]内部方法。

我假设NodeLists没有这些内部方法。但这只是一个假设。也可能是这取决于实现。

我还建议你使用.children ^[MDN]而不是.childNodes来获取元素节点。更新：或@patrick建议的.rows ^{[DOM Spec]}。

Answer 2

我对HTMLCollection进行排序的建议是：

window.onload = function() {
  var parentNode = document.getElementById('test-list');
  var e = document.getElementById('test-list').children;
  [].slice.call(e).sort(function(a, b) {
    return a.textContent.localeCompare(b.textContent);
  }).forEach(function(val, index) {
    parentNode.appendChild(val);
  });
}

<ol id="test-list">
    <li class="lang">Scheme</li>
    <li class="lang">JavaScript</li>
    <li class="lang">Python</li>
    <li class="lang">Ruby</li>
    <li class="lang">Haskell</li>
</ol>

Answer 3

我更正了gaetanoM的代码，这个适用于IE：

window.onload = function() {
  var parentNode = document.getElementById('test-list');
  var e = document.getElementById('test-list').children;
  [].slice.call(e).sort(function(a, b) {
  	if (a.textContent > b.textContent) return 1;
  if (a.textContent < b.textContent) return -1;
  return 0;
   }).forEach(function(val) {
    parentNode.appendChild(val);
  });
}

<ol id="test-list">
    <li class="lang">Scheme</li>
    <li class="lang">JavaScript</li>
    <li class="lang">Python</li>
    <li class="lang">Ruby</li>
    <li class="lang">Haskell</li>
    <li class="lang">Tata</li>
    <li class="lang">Aaaaa</li>
    <li class="lang">Drue</li>
</ol>