getelement - JavaScript NodeList

javascript get by tag

Question

¿Hay alguna manera de unir 2 NodeLists devuelto por 2 llamadas de document.getElementsByTagName?

Diga, tengo el siguiente código

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

Quiero recorrer los resultados. ¿Es posible en un ciclo?

¡Gracias de antemano!

Answer 1

Array.prototype.slice.call () falla en IE 7, usa esto:

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 2

Hasta donde yo sé, el tipo NodeList es inmutable (vea este artículo, por ejemplo), lo que significa que tendrá que generar su propio objeto.

Un método simple sería simplemente crear una matriz y copiar todos los elementos en esa matriz.

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

La variable all entonces contiene la unión de los dos conjuntos de nodos.

Answer 3

Hoy en día definitivamente usaría lo siguiente:

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+ (con experimentos habilitados)

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

"element = elements [i]" se prefiere a "elements.length" ya que:

"Las listas de nodos a menudo se implementan como iteradores de nodos con un filtro. Esto significa que obtener una propiedad como la longitud es O (n) e iterar sobre la lista volviendo a verificar la longitud será O (n ^ 2)".

A diferencia del acceso a la matriz, que es lo que recuerdo O (1).

Más detalles:

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

Answer 4

Mi código corto para bookmarklets:

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 5

No puedes unirte a ellos, pero aún puedes recorrerlos secuencialmente en un ciclo como este:

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

Alternativamente, al usar jQuery, puede seleccionarlos todos de una vez:

$(''input, select'')

Answer 6

Parece que puede usar el mismo Array.prototype.slice.call que hace que el objeto args similar a una matriz se convierta en una matriz. ( Ver aquí )

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 7

Primero, pensé que esto es posible para concaturar matrices usando Array.prototype, así:

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

Pero no funciona, por lo que he creado un conjunto de colecciones de nodos y lo hago concatándolo. Tiene este aspecto:

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

Tiré esto juntos. Puede haber un poco de sobrecarga al hacer un if y .length para cada ciclo, pero creo que es menor a menos que la cantidad de elementos sea extrema.

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 9

prueba mi camino:

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

Answer 10

document.querySelectorAll("input, select");

Answer 11

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

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