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');
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>
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;