JavaScript 节点列表

Question

有没有办法连接 2 个 document.getElementsByTagName 调用返回的 2 个 NodeList？

假设我有以下代码，

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

我想循环遍历结果。 可以在一个循环中吗？

先感谢您！

Answer 1

似乎您可以使用相同的 Array.prototype.slice.call 使 args 类似数组的对象成为数组。 （参见此处）

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

inputs = Array.prototype.slice.call(inputs);
selects = Array.prototype.slice.call(selects);

var res = inputs.concat(selects);

alert(res.length);

Answer 2

document.querySelectorAll("input, select"); 

Answer 3

据我所知， NodeList 类型是不可变的（参见 例如本文），这意味着您必须生成自己的对象。

一个简单的方法就是创建一个数组并将所有元素复制到该数组中。

var inputs = documentElement.getElementsByTagName('input');
var selects = document.getElementsByTagName('select');
var all = new Array(inputs.length + selects.length);

var index = 0;
for (i = 0; i < inputs.length; i++)
    all[index++] = inputs[i];
for (i = 0; i < selects.length; i++)
    all[index++] = selects[i];

然后，all 变量包含两组节点的并集。

Answer 4

您无法加入它们，但您仍然可以在一个循环中按顺序循环它们，如下所示：

for ( var i = 0; i < inputs.length + selects.length; i++ ) {
    var element = ( i < inputs.length ) ? inputs[i] : selects[i-inputs.length];
}

或者，使用 jQuery，您可以一次性选择它们：

$('input, select')

Answer 5

function mergeNodeLists(a, b) {
  var slice = Array.prototype.slice;
  return slice.call(a).concat(slice.call(b));
}

console.log( mergeNodeLists( 输入, 选择 ) ); // => [输入、选择]

Answer 6

我把这个放在一起。 为每个循环执行 if 和 .length 可能会产生一些开销，但我认为除非元素数量达到极限，否则它的开销很小。

inputs = div.getElementsByTagName('input');
selects = div.getElementsByTagName('select');
for (i=0; i<inputs.length+selects.length; i++) {
    element = (i<inputs.length ? inputs[i] : selects[i-inputs.length]);

    // do whatever with element
}

Answer 7

Array.prototype.slice.call() 在 IE 7 中失败，使用：

Object.prototype.getMyElements = function(tags){
    tags = tags.split(',');
    var i, j, col=[], ci=0;
    for(i=0; i<tags.length; i++) {
        var objs = this.getElementsByTagName(tags[i]);
        for(j=0; j<objs.length; j++) col[ci++] = objs[j];
    }
    return col;
}
var objs = document.getMyElements('INPUT,TEXTAREA');
var objs = document.getElementById('myform').getMyElements('INPUT,TEXTAREA');

Answer 8

现在我肯定会使用以下版本：

Chrome、Firefox 3.5+、IE8+

var elements = document.querySelectorAll('a');

for (var i = 0, element; (element = elements[i]); i++) {
    console.log(element);
}

IE11+、Firefox 24+、Chrome 30+（启用实验）

let elements = document.querySelectorAll('a');

for (let i = 0, element; (element = elements[i]); i++) {
    console.log(element);
}

“element = elements[i]”优于“elements.length”，因为：

“节点列表通常被实现为带有过滤器的节点迭代器，这意味着获取像长度这样的属性是 O(n)，并且通过重新检查长度来迭代列表将是 O(n^2)。

与数组访问不同，据我所知，数组访问的时间复杂度为 O(1)。

更多详细信息：

• https://developer.mozilla.org/en- US/docs/Web/API/Document.querySelectorAll
• http://kangax .github.io/es5-compat-table/es6/

Answer 9

首先，我认为可以使用 Array.prototype 连接数组，如下所示：

Array.prototype.concat.call(selects, inputs);

但它不起作用，因此我从节点集合创建了一个数组并将其连接起来。 看起来像这样：

(function () {

    var inputs = document.getElementsByTagName('input'),
        selects = document.getElementsByTagName('select'),
        result,
        i,
        node;

    function convert (collection) {
        var a = [];
        for (var i = 0, length = collection.length; i < length; i++) {
            a.push(collection[i]);
        }
        return a;
    }

    // concatenation && convertation
    result = Array.prototype.concat(convert(inputs), convert(selects));
    // traversing
    i = result.length;
    while(node = result[--i]) {
        alert(node.getAttribute('name'));
    }

})();

Answer 10

我的小书签的简短代码：

var e, t = d.getElementsByTagName('textarea'), u = d.getElementsByTagName('input'), i = t.length;
    while(e = (i > 0) ? t[--i] : u[-i--]){ if(e.offsetHeight > 0)... }

Answer 11

试试我的方法：

 var allES = [];
 var inputs = document.getElementsByTagName("input");
        for (i = 0; i < inputs.length; i++) {
              allES.push(inputs[i]);
            }
    // gather SELECT elements
         var selects = document.getElementsByTagName("select");
            for ( i=0; i < selects.length; i++){
                allES.push(selects[i]);
                }