Inspector DOM

[caricatos]

Hola amigos:

Estoy haciendo un "Inspector" de los nodos de un documento html, funciona bien en los navegadores que soportan las especificaciones DOM, pero pienso que se puede mejorar.

La dirección es: http://www.pepemolina.com/DOM/dom.html

Funciona con frames, en el de la izquierda está el inspector, y en la derecha la página que se "inspecciona". En ésta empecé a explicar el funcionamiento, pero no soy muy bueno en "redacción".

Está en formato de árbol y los nodos se pueden expandir y contraer (tienen un "+" y un "-" para esa función). También se marcan en el frame derecho con un parpadeo en rojo.
Los nodos que son etiquetas tienen la lista de sus atributos (es curioso el caso de explorer, que muestra también los que no están definidos). Estos atributos pueden modificarse (no siempre)

Hay un vínculo a otra página que permite modificar estilos desde un popup (como los atributos en el Inspector), pero no está terminada. Incluso trataré de adaptar la manipulación de estilos desde el inspector.

Espero que les guste, y no duden en hacer sus comentarios.

Saludos

[caricatos]

Hola otra vez:

He adaptado la página donde se asignaban estilos al inspector. Tan solo he convertido el objeto seleccionado en una cadena de la forma: document.documentElement.childNodes[n]...

... y en el popup se recibe la cadena en la línea de dirección y se le añade "opener."; obteniéndose el "objeto" con "eval"

Creo que el paso siguiente sería que los estilos pudieran leerse, pero pienso que será más difícil.

Saludos

[fpalomar]

Hola,

Como se haria para mover una capa con las teclas de dirección pero que funcionase tanto para el Explorer como para el Netscape.

Saludos!!!

[caricatos]

Hola otra vez:

Subí una versión que cuando se pasa el cursor por la página principal, se van resaltando los elementos en el Inspector, pero la asignación es directa, y no sé si machacará los eventos que existieran antes.
Con mozilla se puede usar addEventListener, y lo prové y funciona bien, pero en explorer he visto que hay que usar attachEvent, pero no lo he sabido usar.

fpalomar: Es posible conseguir lo que quieres, pero no sé como adaptarlo a esta página. Pero puedes ver como se ubican los elementos con el ratón en el siguiente enlace para hacer postales: http://www.pepemolina.com/postales/index.html

Por cierto, también se leen y modifican los estilos, pero he probado modificar el "float" de la imagen, y en explorer se hace con styleFloat, pero no lo conseguí en Mozilla.

Saludos

[caricatos]

Hola otra vez:

Aunque tardé más tiempo de lo que esperaba, está resuelto el problema de los eventos... también están implementados los FRAMES... ... otra modificación es poder modificar los estilos de cualquier etiqueta incluídas las "html", "head", etc...
Aunque me parece que no tiene sentido los estilos en algunas etiquetas, he consultado la información sobre ello en www.w3.org y entendí que todas las etiquetas los admiten

Pienso seguir con la implementación de los iframes... supongo que será muy parecido a los frames...

Hay algunas curiosidades con los navegadores, y he implementado una versión para lcada uno de los 2 más importantes.

http://www.pepemolina.com/DOM/index.html

saludos