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。发送到函数循环，获取锚点，并执行适当的操作。

哪个会更快或者使用更少的资源，＆amp; /或者您认为哪些更易于维护？

我知道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中失败＆lt; 9.没有任何规范说主机对象必须像本机ECMA-262对象一样（ECMA-262明确表示不必这样做。）

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

Answer 2

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");

Answer 3

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不返回Array，它返回一个NodeList，它没有concat方法。 slice.call内容将NodeList转换为真实数组。或者，执行

更有效

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

Javascript：来自两个Div ID的元素

3 个答案: