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.

Esta utilidad de JavaScript te permite recorrer interactivamente la representación del DOM(Document Object Model) de una página. Está diseñada para ayudar a los desarrolladores a encontrar los distintos objetos, propiedades y valores asociados con los elementos y otros objetos de una página web.

El script crea una representación de las propiedades y valores para un objeto del DOM dado con enlaces para expandir cada propiedad que sea, a su vez, otro objeto. Estos objetos son los que los scripts en cliente usan para acceder mediante la programación a realizar cambios en una página.

Navegando el árbol del documento

El DOM consiste en nodos conectados en una estructura de árbol. Los nodos pueden representar un elemento, contenido textual, un atributo, etc. cada uno con distintas propiedades. Pero todos los nodos incluyen propiedades comunes relacionadas con esta estructura de árbol. Entre estas propiedades comunes se encuentran firstChild, previousSibling y parentNode. Empleándolas puedes navegar hacia ariba, hacia abajo o a través del árbol hasta otros nodos.

Por defecto, la representación comienza en la raíz, esto es, el objeto document. Pero cualquier otro objeto puede ser especificado como el punto de partida, tal y como se describe más abajo. La demo proporciona también algunos ejemplos.

Empleando la Utilidad

El script existe en su propia página HTML. Está diseñado para ser abierto en una nueva ventana desde la página en que trabajamos. La razón para esto es que cargar el script en la propia página que está siendo examinada alteraría los contenidos de la páina de trabajo, y como causa de ello su representación del DOM, dramáticamente.

Si lo lanzamos a una ventana separada, el impacto en la página de trabajo se reduce al mínimo. Hay varios modos de llevarlo a cabo, el más sencillo es añadir un simple enlace o una llamada JavaScript window.open() a la página de trabajo:

<a href="domviewer.html" target="_blank">launch viewer</a>
o,

<script>
window.open('domviewer.html');
</script>

Especificando el Objeto Inicial

Para comenzar la representación en un objeto distinto que la raíz del documento, necesitas fijar una serie de variables de JavaScript en la página de trabajo antes de lanzar el visor. Por ejemplo:

<p id="myElement">This is a simple paragraph.</p>

...

<script>
  var DOMViewerObj = document.getElementById("myElement")
  var DOMViewerName = null;
  window.open('domviewer.html');
</script>

El código anterior emplea el método predefinido getElementById para fijar una referencia al objeto específico representado por una etiqueta P. El visor del DOM buscará una variable denominada DOMViewerObj en la página de trabajo cuando sea lanzado. Si ha sido fijada, el objeto que apunta será empleado como el punto de partida para la representación. En este caso, va a usar la etiqueta P.

DOMViewerName es simplemente una cadena de texto que puedes especificar empleándola como un nombre para el objeto. Si se fija a null, el script intentará emplear el nombre dado por el atributo id del objeto, si lo tiene. Por tanto, en el ejemplo anterior, será por defecto "myElement."

El segmento de código de SCRIPT mostrado en los ejemplos anteriores debería estar situado al final del archivo HTML. Esto nos garantizará que el navegador ha finalizado de cargar la página y ha construido el DOM antes de ejecutar el código.

Interpretando los Resultados

Dentro de la vista del DOM, cualquier propiedad que tenga un objeto como valor puede ser expandida dinámicamente haciendo click en el link que se proporciona. Esto incluye colecciones y matrices, que serán enumeradas cuando sean expandidas. Haciendo click en el enlace del objeto de nuevo volveremos a colapsar la representación.

Las propiedades de tipo parent, child y sibling de otras propiedades pueden emplearse para navegar a través de la estructura de árbol del documento. La representación mostrará simplemente el nombre de la propiedad correspondiente junto con el nombre del objeto. Por tento, deberías ver que se muestra algo como lo siguiente:

Obviamente, hay modos más sencillos y mejores de referirse a la mayoría de objetos distintos de descender desde la raíz cuando escribes código JavaScript. Por ejemplo, puedes fijar un atributo id en una etiqueta y usar el método document.getElementById() para hacer referencia a ese elemento directamente:

<p id="myParagraph">Some example text.</p>

...

<script>
var el = document.getElementById("myParagraph");
el.style.color = "#ff0000";
</script>
en lugar de
<script>
  document.body.firstChild.nextSibling.nextSibling.style.color
    = "#ff0000";
</script>

Este tipo de acceso direto es especialmente usual dado que cualquier modificación puede cambiar la jerarquía del DOM, requeriendo cambios en cualquier reerencia basada en la raíz.

Deberías darte cuenta de que la representación es un extracto de la página de trabajo. Si los contenidos de la páina de trabajo cambian, la representación no reflejará esos cambios hasta que se recargue. Del mismo modo, cuando se expande un obeto, el script mostrará el estado actual de dicho objeto, mientras qu eel resto de la representación permanecerá inalterado si otros objetos de la página de trabajo han sido modificados.

Compatibilidad entre Navegadores

Los distintos navegadores van a mostrar representaciones diferentes. Las estructuras de objetos individuales y las propiedades varían de un navegador a otro, incluso en los navegadores que soportan estándares.

En algunos casos, puede deberse a intentos de mantener la compatibilidad haci aatrás con versiones antiguas de ese navegador. O un estándar en particular puede no estar soportado o estar soportado pero el estándar en sí se presta a interpretación.

El punto de partida de la utilidad es permitirte ver la estructura del DOM actual para un navegador determinado. Entonces, podrás emplear esta información cuando escribas código para un navegador en particular o cuando intentes encontrar diferencias entre navegadores.

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