0

我需要在两个不同的导航面板中选择所有锚元素。最好的方法是什么？有效和/或高效。

选项 1：我可以将每个导航设置为一个类，查找该类，使用该类获取每个 div 中的所有锚点。

选项 2：我可以为每个导航设置一个 ID。出于某种原因，我无法从每个 div id 连接两个锚点数组。知道为什么，它们是数组吗？前任。

<code>
var nav = document.getElementById("nav").getElementsByTagName("a");
var subnav = document.getElementById("subnav").getElementsByTagName("a");

var allnav = nav.concat(subnav); // Didn't seem to work

// neither did this.  Just seemed to break.     
for(var i=0;i<subnav.length;i++){ 
   nav.push(subnav[i]);
}
</code>

选项 3：按 ID 获取每个 div。发送到函数以循环、获取锚点并执行适当的操作。

哪个更快或使用更少的资源，和/或您认为哪个更易于维护？

我知道 jQuery 有一个很好的方法，但鉴于我的代码片段很短，我不想只为几个小函数添加整个库。

谢谢您的帮助！

4

3 回答 3

1

你很接近：

var allnav = []; // initialise allnav as an array

// Store length of NodeList, slight performance boost in some browsers
// and is just neater
for (var i=0, iLen=subnav.length; i<iLen; i++) { 
   allnav.push(subnav[i]);

   // or

   allnav[i] = subnav[i];
}

不要使用Array.prototype.slice.call()，因为您不应该将宿主对象视为原生 ECMAScript 对象，例如它将在 IE < 9 中失败。没有任何规范说明宿主对象必须表现得像原生 ECMA-262 对象（并且 ECMA-262 明确表示他们不必）。

请注意，还有一个document.anchors集合和一个document.links集合（它们不是互斥的，A 元素可以是锚点、链接或两者兼而有之）。

于 2011-09-13T00:26:23.380 回答
0

getElementsByTagName返回一个NodeList。ANodeList不是Array.

NodeList然而是数组，可以使用转换为数组toArray

var toArray = function _toArray(obj) {
     var arr = [];
     for (var i = 0, ii = obj.length; i < ii; i++) {
          arr.push(obj[i]);
     }
     return arr;
};

var allnav = toArray(nav).concat(subnav);

或者，您可以使用Array.prototype.slice.call(nav)将 a 转换NodeList为Array.

您还可以向两个导航添加一个类anchor-nav，然后使用querySelectorAll.

var anchors = document.querySelectorAll("nav.anchor-nav a");

于 2011-09-13T00:06:12.593 回答
0 
var slice = document.body instanceof Object ? // IE < 9 has some really weird issues
    Array.prototype.slice : function () {
        for (var array = [], i = 0, l = this.length; i < l; ++i)
            array[i] = this[i];
    };

var nav = slice.call(document.getElementById("nav").getElementsByTagName("a"));
var subnav = slice.call(document.getElementById("subnav").getElementsByTagName("a"));

var allnav = nav.concat(subnav); // Will work now.

getElementsByTagName不返回一个数组，它返回一个没有concat方法的 NodeList。这些slice.call东西将 NodeList 转换为一个真正的数组。或者，这样做更有效

nav.push.apply(nav, subnav);
// nav is now the equivalent of allnav
于 2011-09-13T00:06:15.400 回答