javascript - 组合 getElementsByWhatever 返回的数组

Question

我正在尝试获取特定 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 不是直接父级。

Answer 1

getElementsByTagName返回 aNodeList不是数组，因此您不能使用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);

Answer 2

这些方法不返回数组。相反，它是一个NodeList或者可能是一个HTMLCollection。（参见语法下的注释。）

您可能会遍历每个节点列表并“手动”形成它们的数组。