javascript - 如何合并 2 个 DOM 元素数组

Question

我正在尝试做我自己的序列化函数(就像在 jQuery 中一样)，我需要获取数组中的输入和选择以便序列化它。

问题是 DOM 元素数组中不存在方法“push”和“pop”(错误:“Undefined is not a function”)。

HTML:

     <form>
        <table>
            <tr>
                <td><label for="name">Name:</label></td>
                <td><input type="text" id="name" name="name"/></td>
            </tr>
            <tr>
                <td><label for="age">Age:</label></td>
                <td><input type="number" id="age" name="age"/></td>
            </tr>
            <tr>
                <td><label for="genre">Genre:</label></td>
                <td><select name="genre" id="genre">
                    <option>Female</option>
                    <option>Male</option>
                </select></td>
            </tr>
        </table>
    </form>

Javascript:

HTMLFormElement.prototype.ownSerialize=function() {

        var inputs = this.getElementsByTagName('input');
        var selects = this.getElementsByTagName('select');

        while(selects.length)inputs.push(selects.pop());//Breaks here
        console.log(inputs);

        var json = {};
        for (var f=0; f<inputs.length; f++) {
            json[inputs[f].id]=inputs[f].value;
        }
        console.log(json);

        var str = "?";
        for(f in json){
            str+=f+"="+json[f]+"&"
        }
        str = str.slice(0,-1); //Delete de last "&"
        console.log(str);
    };
document.getElementsByTagName('form')[0].ownSerialize();

我怎样才能实现它？ http://jsfiddle.net/mpecdv2t/

(希望我的英语是正确的)

Answer 1

您可以使用 Array.prototype.slice 将 HTMLCollection(以及任何其他类似数组的集合)转换为原生数组方法:

var slice = Array.prototype.slice;
var inputs = slice.call(this.getElementsByTagName('input'));
var selects = slice.call(this.getElementsByTagName('select'));

之后 inputs 和 selects 是真正的 javascript 数组，DOM 元素作为数组元素。

演示:http://jsfiddle.net/mpecdv2t/1/