JavaScript NodeList

Question

Есть ли способ присоединиться к 2 NodeLists, возвращенным двумя вызовами document.getElementsByTagName?

Скажем, у меня есть следующий код

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

Я хочу Переберите результатов. Возможно ли это в одном цикле?

Спасибо заранее!

Answer 1

Похоже, вы можете использовать один и тот же Array.prototype.slice.call, что делает арг массив как объект становится массивом. (See here)

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

Почему бы вам не попробовать jQuery.

jQuery Traverse API reference

Answer 3

Насколько я знаю, NodeList типа неизменна (см this article, например), что означает, что вы должны будете генерировать свой собственный объект.

Простым методом было бы создать массив и скопировать все элементы в этот массив.

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

Во-первых, я думал, что это возможно Concat массивы, используя Array.prototype, как это:

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

Но это не работает, так что я сделал массивы из коллекций узлов и CONCAT Это. Похоже, что:

(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 5

Вы не можете присоединиться к ним, но вы можете перебрать их последовательно в один цикл, как это:

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 6

document.querySelectorAll("input, select"); 

Answer 7

я бросил это вместе. Там может быть немного накладных расходов от выполнения , если и .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 8

Мой короткий код букмарклеты:

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 9

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

console.log(mergeNodeLists(inputs, selects)); // => [input, select]

Answer 10

В настоящее время я бы определенно использовать следующее:

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+, 30+ Хром (с экспериментами включено)

"= элемент элементов [I]"

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

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

предпочтительнее, чем "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 11

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 12

попробовать мой путь:

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]); 
       }