组合 getElementsByWhatever 返回的数组答案

【问题标题】：Combining arrays returned by getElementsByWhatever组合 getElementsByWhatever 返回的数组
【发布时间】：2012-03-01 19:29:25
【问题描述】：

我正在尝试获取特定 div 中的所有表单元素，并使用数组 concat() 方法将它们组合成一个数组：

var div_id = 'some_div_id'; // in real life this is passed as a function parameter

var child_inputs = document.getElementById(div_id).getElementsByTagName('input');
var child_textareas = document.getElementById(div_id).getElementsByTagName('textarea');
var child_selects = document.getElementById(div_id).getElementsByTagName('select');

var field_elements = child_inputs.concat(child_textareas, child_selects); // this doesnt work?

但是脚本在最后一行失败了，我不知道为什么。我不能使用 .childNodes 因为传递的 div_id 不是直接父级。

【问题讨论】：

数组结构必须相同才能使用 concat。这些元素选择器产生的结果并非如此。这些不是简单的列表——它们是对象。
另外看这个：stackoverflow.com/questions/2735067/…
另见：http://stackoverflow.com/questions/914783/javascript-nodelist
你可以：var elems = document.getElementById( div_id ).querySelectorAll( 'input, textarea, select' );

标签： javascript arrays concat getelementsbytagname

【解决方案1】：

getElementsByTagName 返回一个NodeList 而不是一个数组，所以你不能使用concat。

如果你想将 nodeList “转换”成一个数组，你可以从 Array 原型链中调用 slice：

var div_id = 'some_div_id',
    divIdElement = document.getElementById(div_id); //cache the element

var getArrayFromTag = function(tagname) {
     //get the NodeList and transform it into an array
     return Array.prototype.slice.call(divIdElement.getElementsByTagName(tagname));
}

//Get the arrays
var child_inputs = getArrayFromTag('input');
var child_textareas = getArrayFromTag ('textarea');
var child_selects = getArrayFromTag ('select');

//use concat
var field_elements = child_inputs.concat(child_textareas, child_selects);

【讨论】：

【解决方案2】：

这些方法不返回数组。相反，它是NodeList 或HTMLCollection。（见the note under Syntax.）

您可以loop over each nodelist 并“手动”形成一个数组。

【讨论】：