DOM Viewer
Mira la página demo para encontrar un ejemplo sobre cómo emplear esta herramienta y el código fuente.Detalles del código
Hay algunos puntos interesantes en el script que pueden ser de utilidad cuando se está creando o depurando código para efectos DHTML.
El corazón del script es una función llamada showProperties()
que toma un objeto dado y enumera sus propiedades y valores
en la representación.
Obteniendo las propiedades de un Objeto
En general, puedes recorrer las propiedades de un objeto en JavaScriptempleando
una sentencia for (x in obj). La variable
x será fijada al nombre de la propiedad en cada iteración, y
obj.x nos dará el valor de esa propiedad en paticular.
for (x in obj) document.writeln(x + " = " + obj.x + "<br />");
La función showProperties() va un poco más allá. La sentencia
for no tienen necesariamente que devolver los nombres de las propiedades en un orden
particular. Por eso, los nombres se guardan primero en un array temporal y se ordenan
alfabéticamente.
propertyList = new Array;
for (property in obj)
propertyList[propertyList.length] = String(property);
propertyList.sort();
Este array se emplea entonces para ir a cada propiedad, haciendo posible listarlas ordenadas por su nombre. Esto hace que la representación resultante sea mucho más fácil de leer y que puedas encontrar rápidamente una propiedad y su valor.
for (i = 0; i < propertyList.length; i++) {
property = String(propertyList[i]);
try {
value = String(obj[propertyList[i]]);
}
catch (exception) {
value = "<i>" + String(exception) + "</i>"
}
// ... display the property/value pair ...
Arrays y Colecciones
Aquí hay un ejemplo de donde pueden existir diferencias entre los navegadores. Aunque los Arrays y las
colecciones son objetos, ¿qué sucede con los elementos indexados? En Internet Explorer,
se muestran como propiedades individuales, obj.0, obj.1, obj.2, ... por lo que
no se necesita hacer nada en especial.
Netscape, en cambio, no hace esto. Por él, el script comprueba si el objeto
soporta el método index() y, si es así, los items individuales
son listados después de todas las otras propiedades que estén siendo mostradas.
if (isNS6 && obj.item) {
for (j = 0; j < obj.length; j++) {
objectList[objectList.length] = obj[j];
temp = makeLink(objectList.length - 1, name + "[" + j + "]",
String(obj[j]));
if (obj[j])
s += "<li>" + name + "[" + j + "] " + temp + "</li>";
}
}
Creando la Representación Dinámica
Como se ha mencionado, cualquier valor qu esea un objeto de JavaScript será mostrado como un enlace.
Haciendo click en él llamaremos a una función denominada createList(), pasándole
una referencia al objeto actual.
La función por su parte llamará a showProperties() para ese objeto y
generará una lista HTML que será insertada en la página justo después del elemento que la ha
provocado.
Haciendo click en el enlace de nuevo, llamaremos a la función destroyList() que borrará
el HTML insertado previamente.
La función showProperties() crea estos enlaces cuando comprueba
cada propiedad del objeto. Con el fin de encontrar los objetos, usa un array global denominado
objectList. Así, cuando encuentra un objeto, lo añade al array,
usando el valor del índice del array como un parámetro para createList() de modo que
esta función pueda encontrar el objeto que debe ser expandido.
Notas sobre los Navegadores
Una cosa que debes tener en cuenta es que IE parece incluir cada propiedad que un objeto pueda tener, incluso si ésta no ha sido fijada explícitamente. Verás generalmente un número elevado de propiedades listadas en cada objeto, la mayoría con valor null.
Netscape, por su parte, parece que emplea un grupo más reducido de propiedades genéricas para cada objeto, añadiendo las otras sólo si han sido fijadas explícitamente vía HTML o JavaScript.
Bugs
Dependiendo del navegador y la versión, un intento de accecer a ciertas propiedades
puede generar un error. El código emplea sentencias de JavaScript try y
catch para tratar de prevenir que esto suceda en la mayoría de los casos y en su lugar
mostrará un texto con el mensaje de la excepción.
Además, algunos objetos no proporcionan enumeración de sus propiedades y no serán expandidos cuando se haga click sobre ellos. De nuevo, esto depende completamente del navegador y versión particular que se esté empleando.
Una nota final, el script emplea la propiedad innerHTML para
insertar sublistas cuando se expanden los objetos. Esta propiedad no es parte del actual standard del DOM,
y puede o no ser aceptada eventualmente en el futuro, pero actualmente está
soportada tanto por Netscape como por IE y simplifica mucho el código.