Foros del Web » Programando para Internet » Node.js »

Array, HTMLCollection y NodeList

Estas en el tema de Array, HTMLCollection y NodeList en el foro de Node.js en Foros del Web. Holas a todos. He abierto este tema para comentar al respecto de las 3 entidades que he citado en el título del post: Array, HTMLCollection ...
  #1 (permalink)  
Antiguo 22/02/2010, 07:21
Avatar de quinqui  
Fecha de Ingreso: agosto-2004
Ubicación: Chile!
Mensajes: 776
Antigüedad: 20 años, 3 meses
Puntos: 56
Información Array, HTMLCollection y NodeList

Holas a todos.

He abierto este tema para comentar al respecto de las 3 entidades que he citado en el título del post: Array, HTMLCollection y NodeList en Javascript.

Los cito porque no tengo claro qué son y las diferencias, ventajas y desventajas de unos sobre otros, si es que las hay, etc.

Me ha tocado armar el típico formulario con arreglo de controles y cuando he querido validarlo, asumiendo que se trataba de un Array, me he topado con que no lo eran: en una ocasión me dio que era un NodeList y en otra que era un HTMLCollection. Con esa información he podido continuar el validador, pero no me siento segura de los resultados porque no conozco estos tipos o clases (interfaces, leí por ahí) y quisiera vuestro consejo y comentario.

Como nota aparte, les dejo el link al sitio donde inicié mi "descubrimiento": isArray() en javascript sin instanceof por Alfredo Artiles.

Desde ya, muchas gracias por anticipado.
Saludos!! ;)
__________________
pipus.... vieeeeeji plomius!!!
*quinqui site*
  #2 (permalink)  
Antiguo 22/02/2010, 08:24
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.050
Antigüedad: 15 años, 6 meses
Puntos: 1485
Respuesta: Array, HTMLCollection y NodeList

en terminos generales los arrays, nodelist, y htmlcollection comparten la misma estructura pero cada una con una interfaz diferente. otra forma de decirlo seria que htmlcollection y nodelist se parecen a los arrays, lo que cambia son sus funciones.

Los diferentes tipos de datos
Array
un array es un conjunto de valores, que podrian o no estar relacianados entre si, representado en una estructura indexada. es un tipo de dato que viene del propio javascript. estoy casi seguro que estas familiarizada con los arrays. por ejemplo,
Código:
// array literal;
var larray = ['uno', 'dos', 'tres'];

// con el constructor Array;
var carray = new Array('uno', 'dos', 'tres');
HTMLCollection
un HTMLCollection es una estructura que, como dice su nombre, contiene una coleccion de elementos HTML. el estandar DOM define una serie de propiedades para todos los documentos HTML el cual contiene una coleccion de elementos. por ejemplo, document.links es una coleccion que contiene todos los enlaces del documento. asi sucecivamente existen otras propiedades que contienen una coleccion de elementos: document.anchors, document.images, document.forms. sin embargo, cada uno de ellos contiene diferentes elementos del documento.

otra forma de obtener una coleccion de elementos es usando las funciones document.getElementsByTagName, document.getElementsByName, document.getElementsByClassName.

NodeList
los NodeList son una coleccion de elementos al igual que HTMLCollection, solo que estos contienen la referencia de todos los nodos directamente hijos de un elemento. un NodeList se obtiene con la propiedad childNodes de cualquier referencia de un elemento HTML.

¿En qué se parecen todos ellos?
lo unico que los asimilan a todos ellos es que todos los elementos de la estructura son indexados. es decir, se pueden hacer referencia a cada elemento con un entero positivo.
Código:
var array = ['uno', 'dos', 'tres'];

alert(array[0]); // muestra primer elemento del array;
alert(document.links[0]); // muestra el primer enlace del documento;
alert(document.documentElement.childNodes[0]); // muestra el primer nodo hijo del elemento <HTML>
¿Qué los diferencian?
los diferencia su interfaz. es decir, no contienen los mismos metodos y propiedades. mas bien deberia decir que los HTMLCollection y NodeList tienen una interfaz diferente a los arrays porque su implementacion esta basado en DOM. por ejemplo, en los arrays tenemos los metodos join, split, splice, slice, entre otros mas. sin embargo, en HTMLCollection y NodeList solo tenemos el metodo item.
Código:
var array = ['uno', 'dos', 'tres'];
alert(array.join(',')); // crea una cadena uniendo todos los elementos del array con el string indicado;
alert(document.links.item(0)); // muestra el primer enlace del documento utilizando la coleccion;
alert(document.documentElement.childNodes.item(0)); // muestra el primer nodo del elemento <HTML> usando la lista de nodos;
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #3 (permalink)  
Antiguo 22/02/2010, 08:30
Avatar de quinqui  
Fecha de Ingreso: agosto-2004
Ubicación: Chile!
Mensajes: 776
Antigüedad: 20 años, 3 meses
Puntos: 56
Respuesta: Array, HTMLCollection y NodeList

Hola, zerokilled

Mil gracias por la respuesta!! Está super completa, o al menos, explicada con peras y manzanas, por lo que ahora lo he podido entender todo mucho mejor ^________^

Muchísimas gracias! :D
Saludos!
__________________
pipus.... vieeeeeji plomius!!!
*quinqui site*
  #4 (permalink)  
Antiguo 19/03/2010, 14:36
Usuario no validado
 
Fecha de Ingreso: octubre-2006
Mensajes: 1
Antigüedad: 18 años
Puntos: 0
Respuesta: Array, HTMLCollection y NodeList

Wow !! Muchas gracias zerokilled por este post. Una explicación así era lo que estaba buscando. Gracias de nuevo.

Etiquetas: htmlcollection, instanceof, isarray(), javascript, nodelist
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 12:58.