Есть ли способ присоединиться к 2 NodeLists, возвращенным двумя вызовами document.getElementsByTagName?
Скажем, у меня есть следующий код
var inputs = documentElement.getElementsByTagName('input');
var selects = document.getElementsByTagName('select');
Я хочу просмотреть результаты. Возможно ли это в одном цикле?
Заранее благодарю вас!
Похоже, вы можете использовать тот же массив 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);
Вы не можете присоединиться к ним, но вы все равно можете прокручивать их последовательно в одном цикле следующим образом:
for ( var i = 0; i < inputs.length + selects.length; i++ ) {
var element = ( i < inputs.length ) ? inputs[i] : selects[i-inputs.length];
}
В качестве альтернативы, используя jQuery, вы можете выбрать их все за один раз:
$('input, select')
document.querySelectorAll("input, select");
Насколько мне известно, тип 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 содержит объединение двух наборов узлов.
function mergeNodeLists(a, b) {
var slice = Array.prototype.slice;
return slice.call(a).concat(slice.call(b));
}
console.log( mergeNodeLists( inputs, selects ) ); // => [input, select]
Я бросил это вместе. Может быть немного накладных расходов на выполнение 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
}
Мой короткий код для букмарклетов:
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)... }
Во-первых, я думал, что это возможно для создания массивов concat с использованием Array.prototype, например:
Array.prototype.concat.call(selects, inputs);
Но это не сработает, поэтому я создал массивы из коллекций node и объединил их. Выглядит так:
(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'));
}
})();
В настоящее время я бы определенно использовал следующее:
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", поскольку:
"Node списки часто реализуются как итераторы node с фильтром. Это означает, что получение свойства, такого как длина, равно O (n), и повторение по списку путем повторной проверки длины будет O (n ^ 2)".
В отличие от доступа к массиву, насколько я помню O (1).
Подробнее:
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');
попробуйте мой путь:
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]);
}
Почему бы вам не попробовать jQuery.