DOM Viewer

Autor Original:Mike Hall URL ORIGINAL :http://www.brainjar.com/dhtml/domviewer/ TITULO ORIGINAL :DOM Viewer Traducción al castellano:Pedro Palazón Candel URL CASTELLANO :http://kusor.net/traducciones/brainjar.es/domviewer1.es.html

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.

BrainJar.com · ©1999-2003 by Mike Hall 
Publicado con autorización explícita del autor.
Puedes encontrar más artículos y tutoriales relacionados con dhtml en esta web