Javascript：来自两个 Div ID 的元素

Question

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

选项 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 有一个很好的方法，但考虑到我的代码片段很短，我不想只为几个小函数添加整个库。

感谢您的帮助！

Answer 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 元素可以是锚、链接或两者）。

Answer 2

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 不返回数组，它返回一个 NodeList，它没有 concat 方法。 slice.call 东西将 NodeList 转换为真正的数组。或者，这样做更有效

nav.push.apply(nav, subnav);
// nav is now the equivalent of allnav

Answer 3

getElementsByTagName 返回一个 NodeList。 NodeList 不是 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) 来将 NodeList 转换为 Array。

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

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