代码之家 › 专栏 › 技术社区 › zappan

DOM对象的javascript集合-为什么我不能用array.reverse()反转?

arrays javascript

zappan · 技术社区 · 16 年前

如下面的代码所示,颠倒DOM对象数组可能有什么问题:

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

在Firefox 3中,当我调用 reverse() 方法脚本停止执行,并在Web Developer工具栏的控制台中显示以下错误:

imagesArr.reverse is not a function

这个 imagesArr 变量可以通过for循环和类似于 imagesArr[i] 可以访问,所以在调用 回复() 方法?

5 回复 | 直到 8 年前

Adam Wright 16 年前

因为getElementsBytag名称实际上返回一个nodelist结构。为了方便语法,它具有类似数组的索引属性,但是不数组。例如,一组条目实际上一直在动态更新-如果在mydivholderid下添加一个新的img标记,它将自动显示在imagesarr中。

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

Vincent Robert 16 年前

getElementsByTag() 返回节点列表而不是数组。可以将节点列表转换为数组,但请注意,该数组将是另一个对象,因此反转它不会影响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.prototype.reverse.call(listNodes);

iProDev 10 年前

getElementsByTag() 返回节点列表而不是数组。您需要将节点列表转换为数组,然后反转它。

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

Mr. X 9 年前

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

这些方法 在写这个答案的时候 返回类型为“空”或“非”的对象 HTMLCollection 和不 NodeList .

就像是属性之间的区别 children 它返回一个类型的对象 HTML收藏 因为它只由元素组成,不包括文本或注释节点,以及 childNodes 它返回一个类型的对象 NODLIST 因为它也可以包含其他节点类型,如文本和注释。

注意:我会在这里继续切线,并表达我对为什么缺乏洞察力。 querySelectorAll() 方法当前返回 NODLIST 而不是 HTML收藏 因为它只在文档中的元素节点上工作,而不在其他节点上工作。

可能这与未来其他节点类型的潜在覆盖率有关,他们寻求一种更具前瞻性的解决方案,谁知道呢?:)

编辑:我想我有理由选择 NODLIST 而不是 HTML收藏 对于 查询选择单元格()。 .

因为他们建造 HTML收藏 为了实现完全独立的活动,并且由于此方法不需要此活动功能,他们决定 NODLIST 相反,实施以经济高效地实现其目标。

DevelopingChris 16 年前

您的第一行是不相关的,因为它不会强制给变量赋值,所以JavaScript的工作方式是相反的。imagesarr不是array()类型,它属于getElementsByTagname(“img”)的返回类型。在本例中,它是火狐3中的HTMLCollection。

这个对象上唯一的方法是索引器和长度。为了逆向工作,只需向后迭代。