Analizador DOM en tiempo de desarrollo.
Acabo de terminar un proyecto de considerables dimensones basado en AJAX pero usando un nuevo sistema de conexion DDOM (Dinamic DOM) que no usa httprequest y permite trabajar de forma muy simple usando una modificacion a los forms para las peticiones POST y otra para enlaces GET, de la forma onsubmit=DDOM('url destino','nodo para inscrutar',sustituir o agregar,form), almenos nosotros hemos notado la diferencia y sobretodo la rapidez en el desarrollo. Proximamente posteare el resultado ( es un entorno de escritorio para aplicaciones administrativas y publicacion de contenidos) F11 y tienes un pc online, ahora estamos preparando nuevas aplicaciones para este entorno (hojas de calculo, editor RTF, editor de imagenes).
Durante el desarrollo nos hizo falta algo para controlar el estado del DOM en cada momento y los analizadores Plugin de los diferentes exploradores no llegaban a ciertos nodos. Dejo aqui un codigo que se puede "pegar" y te permite ver el estado del DOM visto desde el punto de vista de cada explorador. (funciones, metodos, propiedades) utilizar notacion por puntos, y selecciones con raton. (no esta del todo depurado) espero que os sea util o inspire algo mejor: Código PHP:
// Lector DOM. ·[ Javier Gallego Martín ]·[ [email protected] ]·
function DOMER(_NOM,_DEST){OBJ=eval(""+_NOM+"");document.getElementById(_DEST).innerHTML="";for (var PROP in OBJ) {if(PROP*1==PROP) {document.getElementById(_DEST).innerHTML+="<table cellspacing='0' class='nula'><tr><td class='nula'><span style='cursor:hand;padding-left:10px' onmousedown='DOMER("+'"'+_NOM+".item("+PROP+')"'+","+'"IDP_'+_NOM+"_"+PROP+'"'+")'><b>· </b>"+_NOM+".<b>item("+PROP+")</b> = <b><i>"+OBJ[PROP]+"</i></b></span></td></tr><tr><td class='nula' style='padding-left:12;'><span id='IDP_"+_NOM+"_"+PROP+"'></span></td></tr></table>";} else {document.getElementById(_DEST).innerHTML+="<table cellspacing='0' class='nula'><tr><td class='nula'><span style='cursor:hand;padding-left:10px' onmousedown='DOMER("+'"'+_NOM+"."+PROP+'"'+","+'"IDP_'+_NOM+"_"+PROP+'"'+")'><b>· </b>"+_NOM+".<b>"+PROP+"</b> = <b><i>"+OBJ[PROP]+"</i></b></span></td></tr><tr><td class='nula' style='padding-left:12;'><span id='IDP_"+_NOM+"_"+PROP+"'></span></td></tr></table>";}}}
function DOM(){Ruta=document.getElementById('Ruta').value;DOMER(""+Ruta+"","DOMTrace");}
// Comentar la siguiente linea para no mostrar el Lector DOM.....>
// document.write('<table class="xtabla"><tr><form action="javascript:DOM();"><td class="xtd"><input class="xinput" id="Ruta" type="text" value="document.styleSheets" size="120"> <input class="xsubmit" type="submit" class="boton" value="DOM" style="font-weight:bold"></td></form></tr><tr><td class="nula"><div id="DOMTrace" style="overflow:scroll;height:400px;"></div></td></tr></table><br><style type="text/css">.xtabla {border-collapse: collapse;border-spacing:0px;font-family:verdana;font-size:11;border:1px solid #99B9C9;background-color:#ffffff;padding:0px;margin:0px;}.xtd {font-family:verdana;font-size:10;border:1px solid #99B9C9;background-color:#EFF6FF;padding:2;color:#12365E;}.xinput {font-family:Verdana;color:#000000;font-size:11;border:1px #99B9C9 solid;background-color:#ffffff;padding-left:8px;}.xsubmit {font-family:Verdana;color:#000000;font-size:11;border:1px #99B9C9 solid;background-color:#E7F0F5}.nula {font-family:verdana;font-size:10;border:1px none #000000;background-color:transparent;padding:0px;margin:0px}</style>');
Perdonad la falta de info segun os interese sigo con el tema ;) | 