numeros - Javascript-Concatenar Nodos múltiples juntos

javascript concatenate string variable

Question

Originalmente, pedía una forma elegante de simular la funcionalidad Array.concat() en los resultados de la función getElementsByTagName en IE o en navegadores más antiguos, porque parecía que no era compatible con concat . Solo que, por supuesto que lo es, la razón por la que el objeto devuelto no lo admite es porque no es un Array . Ups!

getElementsByTagName realidad devuelve un NodeList . La verdadera pregunta, entonces, es: ¿cuál es una buena manera de obtener una lista única de todos los elementos del formulario en un documento (entrada, selección, área de texto, botón) para recorrerlos? No se requiere una matriz ... una sola NodeList sería perfecta.

Tenga en cuenta que estoy usando IE6 ya que esto es para una intranet corporativa (aunque pronto IE8).

La respuesta que se me ocurrió fue:

• Se hizo más simple y probablemente se desempeñó mejor simplemente poniendo el código en una función separada y llamándolo tres veces con las diferentes listas de nodos, en lugar de preocuparse por una buena manera de agruparlas en una sola.

• Finalmente, cambié a usar MooTools (después de varias horas leyendo sobre comparaciones de todos los diferentes marcos). Así que ahora, obtener una variedad de los elementos que quiero es muy simple. Recomiendo usar un marco de javascript como este en lugar de que las personas se esfuercen intentando descubrir la mejor manera de hacer las cosas. Por supuesto, estoy totalmente a favor de aprender el lenguaje en bruto (por lo que he dejado de usar un marco durante tanto tiempo), pero no siempre es la forma más rápida de hacer que las cosas funcionen, lo que en una empresa a menudo importa tanto Como mejorar la capacidad del codificador con el lenguaje.

Actualización: casi 2 años después, ¡solo usaría jQuery y terminaría con eso!

Answer 1

Como se indica en la documentación de MDN , también puede usar Array.from para convertir una NodeList en una matriz en los navegadores que lo admiten.

Answer 2

Con el operador de propagación ES6 puedes hacer

let arr = [...nodeList1, ...nodeList2];

Answer 3

Para concatenar listas de nodos, conviértalos en arreglos usando Array.prototype.slice.call y luego concaténtelos normalmente.

var a = Array.prototype.slice.call(document.getElementsByTagName("p")),
    b = Array.prototype.slice.call(document.getElementsByTagName("div"))

var c = a.concat(b);

Edición: (Respondiendo a tu comentario)

Si solo tiene algunos tipos de elementos, está bien, pero el rendimiento disminuye con la cantidad de llamadas DOM que realiza. Puede ser mejor y más rápido hacer un document.getElementsByTagName(''*'') , recorrer la lista y seleccionar los elementos con el nodeName requerido.

Otra cosa a tener en cuenta es que el método Array.prototype.slice utilizado anteriormente puede no funcionar en TODOS los navegadores. Echa un vistazo a la línea de inicio de comentarios # 723 en sizzle.js (el motor de selección detrás de jQuery)

Por supuesto, es mejor usar una biblioteca como jQuery que maneja todo el dolor de cabeza. Simplemente puedes hacer:

$("input, select, textarea, <other tags>")

Answer 4

Pensé que habría habido más respuestas que esta; de todos modos, le di una oportunidad a esto y se me ocurrió la siguiente función, aunque tuve que golpearme un poco la cabeza.

function group_elements(element, tags) {
   var elements = element.getElementsByTagName(''*'');
   var results  = [];
   for ( var i = 0; i < elements.length; ++i ) {
      if ( tags.indexOf(elements[i].nodeName.toLowerCase()) > -1 ) {
         results.push(elements[i]);
      }
   }
   return results;
}


var form  = document.getElementById(''form'');
var tags = [''input'', ''select''];
console.log(group_elements(form, tags));

Answer 5

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 6

var a1=document.getElementsByTagName(''div''),
a2=document.getElementsByTagName(''button'');
a1=[].slice.call(a1, 0,a1.length).concat([].slice.call(a2, 0,a2.length))