DOM 对象的 Javascript 集合 - 为什么我不能使用 Array.reverse() 反转？

Question

反转 DOM 对象数组可能会出现什么问题，如以下代码所示：

var imagesArr = new Array();
imagesArr = document.getElementById("myDivHolderId").getElementsByTagName("img");
imagesArr.reverse();

在 Firefox 3 中，当我调用 reverse() 方法脚本停止执行并在 Web 开发人员工具栏的控制台中显示以下错误：

imagesArr.reverse is not a function

这 imagesArr 变量可以使用 for 循环和类似元素进行迭代 imagesArr[i] 可以访问，那么为什么调用的时候看不到数组呢 reverse() 方法？

Answer 1

因为 getElementsByTag name 实际上返回的是一个 NodeList 结构。为了语法方便，它具有类似数组的索引属性，但它是 不是 数组。例如，条目集实际上是在不断动态更新的 - 如果您在 myDivHolderId 下添加新的 img 标签，它将自动出现在 imagesArr 中。

看 http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-536297177 了解更多。

Answer 2

getElementsByTag() 返回一个 NodeList 而不是一个 Array。您可以将 NodeList 转换为数组，但请注意该数组将是另一个对象，因此反转它不会影响 DOM 节点的位置。

var listNodes = document.getElementById("myDivHolderId").getElementsByTagName("img");
var arrayNodes = Array.slice.call(listNodes, 0);
arrayNodes.reverse();

为了更改位置，您必须删除 DOM 节点并将它们重新添加到正确的位置。

Array.prototype.slice.call(arrayLike, 0) 是将类数组转换为数组的好方法，但如果您使用 JavaScript 库，它实际上可能提供更好/更快的方法来执行此操作。例如，jQuery 有 $.makeArray(arrayLike).

您还可以直接在 NodeList 上使用 Array 方法：

Array.prototype.reverse.call(listNodes);

Answer 3

getElementsByTag() 返回一个 NodeList 而不是一个 Array。您需要将 NodeList 转换为数组，然后将其反转。

var imagesArr = [].slice.call(document.getElementById("myDivHolderId").getElementsByTagName("img"), 0).reverse();

Answer 4

我知道这个问题很老了，但我认为它需要一些澄清，因为这里的一些答案已经过时了，因为 W3C 改变了定义，从而改变了这些方法的返回值 getElementsByTagName() 和 getElementsByClassName()

这些方法 截至撰写此答案时 返回一个类型的对象（无论是否为空） HTMLCollection 和 不是 NodeList.

就像属性之间的区别 children 它返回一个类型的对象 HTMLCollection 因为它仅由元素组成并且不包括文本或注释节点，并且 childNodes 它返回一个类型的对象 NodeList 因为它也可以包含其他节点类型，例如文本和注释。

笔记：我会在这里继续切线并表达我对原因缺乏洞察力 querySelectorAll() 方法当前返回一个 NodeList 而不是一个 HTMLCollection 因为它只适用于文档中的元素节点，仅适用于其他内容。

可能这与未来其他节点类型的潜在覆盖有关，他们寻求一种更面向未来的解决方案，谁知道呢？:)

编辑：我想我有这个决定背后的理由 NodeList 而不是一个 HTMLCollection 为了 querySelectorAll().

自从他们建造 HTMLCollection 为了完全完全实时，并且由于此方法不需要此实时功能，因此他们决定使用 NodeList 而是为了经济、高效地最好地实现其目的。

Answer 5

你的第一行是无关紧要的，因为它不会强制分配给变量，javascript以另一种方式工作。imagesArr 不是 Array() 类型，而是 getElementsByTagName("img") 的返回类型。在本例中，它是 Firefox 3 中的 HtmlCollection。

该对象的唯一方法是索引器和长度。为了反向工作，只需向后迭代即可。