反转DOM对象数组可能会出现问题,如下面的代码所示:
var imagesArr = new Array();
imagesArr = document.getElementById("myDivHolderId").getElementsByTagName("img");
imagesArr.reverse();
在Firefox 3中,当我调用该reverse()方法时,脚本停止执行并在Web Developer Toolbar的控制台中显示以下错误:
imagesArr.reverse is not a function
所述imagesArr变量可以通过与一个for循环和元件等被迭代imagesArr[i]可以被访问,那么,为什么不调用时视为一个阵列reverse()的方法？
因为getElementsByTag名称实际上返回了NodeList结构.它具有类似于索引属性的数组,以方便语法,但它不是数组.例如,条目集实际上是不断动态更新的 - 如果在myDivHolderId下添加新的img标记,它将自动出现在imagesArr中.
有关更多信息,请参见http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-536297177.
getElementsByTag()返回NodeList而不是Array.您可以将NodeList转换为Array但请注意该数组将是另一个对象,因此反转它不会影响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);
京公网安备 11010802040832号 | 京ICP备19059560号-6 