HTML DOM Viewer- Javascript - 软晨网（RuanChen.com）

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > HTML DOM Viewer

技术文章搜索

关键字

Javascript 中的 HTML DOM Viewer

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 95 ::

收藏到网摘: n/a

Popup对象实现右键菜单页面内查找

说明：用来查看DOM的工具，可以当作手册来用，也可以用来Debug,很方便的说
把代码copy到要调试的页面中，浏览时点击DOM Tester链接就会打开DOM查看，双击展开对象，右边的文本框里显示的是属性值，修改文本框会改变对应的属性，用来调试配色什么的还是满方便的说....呵呵
其实代码本身没什么技术含量，核心就是用 for in 语句来取对象的属性而已，要说有什么亮点.....嗯......不知道窗口间的函数调用算不算......
-+-+-+-+-+-+-+-+-+-+偶是传说中的无敌分割线-+-+-+-+-+-+-+-+-+-+
1/21更新
俺这两天在研究兼容性,所以就把代码重写了下,现在支持IE5.0+ & FF 1.5.01
用这个可以明显看出FF与IE的不同,呵呵

点击运行可以看到效果:

<script>
domWin="";
function showDOM(){ try{ domWin=open(""); domWin.opener=top; domWin.document.close(); try{ domWin.moveTo(0,0); domWin.resizeTo(screen.availWidth,screen.availHeight); }catch(e){} initDOMWin(); expandLevels(1); }catch(e){alert(e);}
}
function initDOMWin(){ //set body style with(domWin.document.body.style){ padding=0; margin=0; fontSize=12; fontFamily="Arial"; borderWidth=0; backgroundColor="#FFF"; color="#444"; cursor="default"; overflow="auto"; } //insert a table var theD=domWin.document.createElement("TABLE"); with(theD.style){ width="99%"; height="99%"; fontSize=12; fontFamily="Arial"; borderWidth=0; backgroundColor="#FFF"; color="#444"; cursor="default"; } domWin.document.body.appendChild(theD); //insert the first row to display the object's location var theR=theD.insertRow(theD.rows.length); var theC=theR.insertCell(theR.cells.length); theC.colSpan=2; with(theC.style){ height="20px"; borderWidth=1; borderColor="#000"; borderStyle="solid"; paddingLeft=10; } theC.id="oIDPath"; theC.innerHTML="top"; //insert the main row theR=theD.insertRow(theD.rows.length); //insert the left cell to display the tree theC=theR.insertCell(theR.cells.length); with(theC.style){ width=parseInt(domWin.document.body.clientWidth*0.8); height="100%"; fontSize=12; fontFamily="Arial"; borderWidth=0; cursor="default"; } theD=domWin.document.createElement("DIV"); with(theD.style){ width="100%"; height=domWin.document.body.clientHeight-38; overflow="auto"; fontSize=12; fontFamily="Arial"; cursor="default"; } theC.appendChild(theD); //insert the root-node element addDOMItem(theD,"top","top").id="tRoot"; //insert the textarea to display the attribute theC=theR.insertCell(theR.cells.length); with(theC.style){ width="auto"; height="99%"; fontSize=12; fontFamily="Arial"; borderWidth=0; verticalAlign="top"; cursor="default"; } theD=domWin.document.createElement("textarea"); with(theD.style){ width="100%"; height=domWin.document.body.clientHeight-108; overflow="auto"; color="#444"; cursor="default"; } theD.id="txtAttr"; theD.value=""; theD.onchange=setAtt; theC.appendChild(theD); theD=domWin.document.createElement("input"); with(theD.style){ width="69%"; height=20; borderWidth=1; color="#444"; cursor="default"; } theD.type="button"; theD.value="Expand levels:"; theD.onclick=expandLevels; theC.appendChild(theD); theD=domWin.document.createElement("input"); with(theD.style){ width="28%"; height=21; color="blue"; } theD.value=2; theC.appendChild(theD);
}
function addDOMItem(parentNode,name,oID,oType){ oType=oType?oType:"object"; var strPreTemp="<li>"; var theD=domWin.document.createElement("DIV"); with(theD.style){ width="auto"; height="16px"; overflow="visible"; fontSize=12; fontFamily="Arial"; paddingLeft=5; paddingRight=10; paddingTop=1; paddingBottom=0; borderColor="#FFF"; borderWidth=1; borderStyle="solid"; backgroundColor="#FFF"; color="#444"; cursor="default"; switch(oType){ case "object": listStyle="circle"; break; case "attribute": listStyle="square"; break; case "event": listStyle="";strPreTemp=""; break; } } theD.onmouseover=domItem_onmouseover; theD.onmouseout=domItem_onmouseout; theD.onclick=domItem_onclick; theD.expand=theD.ondblclick=domItem_ondblclick; theD.onselectstart=cancelAll; theD.onselect=cancelAll; theD.innerHTML=strPreTemp+name; theD.oID=oID; return(parentNode.appendChild(theD));
}
function domItem_onmouseover(){ with(this.style){ borderColor="#777"; borderStyle="solid"; backgroundColor="#EAEAF9"; color="#000"; paddingLeft=4; paddingRight=11; paddingTop=0; paddingBottom=1; }
}
function domItem_onmouseout(){ with(this.style){ borderColor="#FFF"; borderStyle="solid"; backgroundColor="#FFF"; color="#444"; paddingLeft=5; paddingRight=10; paddingTop=1; paddingBottom=0; }
}
function domItem_onclick(){ try{ domWin.document.all.oIDPath.innerHTML=this.oID; domWin.document.all.txtAttr.value=eval(domWin.document.all.oIDPath.innerHTML); }catch(e){}
}
function domItem_ondblclick(){ try{ var theO=eval(this.oID); if(typeof(theO)!="object"){return(false);} if(this.nextSibling){ if(this.nextSibling.getAttribute("type")=="sub"){ this.nextSibling.style.display=this.nextSibling.style.display=="block"?"none":"block"; return(false); } } var theD=domWin.document.createElement("DIV"); with(theD.style){ paddingLeft=10; marginLeft=10; paddingTop=paddingBottom=4; borderLeftColor="#999"; borderLeftStyle="dotted"; borderLeftWidth=1; display="block"; } theD.setAttribute("type","sub"); this.parentNode.insertBefore(theD,this.nextSibling); var aryO=new Array();//sub objects var aryA=new Array();//attributes var aryE=new Array();//events for(var i in theO){ try{ if(i.indexOf("on")==0){ aryE[aryE.length]=i; }else{ try{ if(typeof(theO[i])=="object"){ aryO[aryO.length]=i; }else{ aryA[aryA.length]=i; } }catch(e){ aryO[aryO.length]=i; } } }catch(e){} } aryO.sort(); aryE.sort(); aryA.sort(); for(var i=0;i<aryO.length;i++)addDOMItem(theD,aryO[i],this.oID+"."+aryO[i]); for(var i=0;i<aryA.length;i++)addDOMItem(theD,aryA[i],this.oID+"."+aryA[i],"attribute"); for(var i=0;i<aryE.length;i++)addDOMItem(theD,aryE[i],this.oID+"."+aryE[i],"event"); return(false); }catch(e){}
}
function cancelAll(){ try{ domWin.event.cancelBubble=true; domWin.event.returnValue=false; return(false); }catch(e){alert(e);}
}
function setAtt(){ try{ eval(domWin.document.all.oIDPath.innerHTML+"=\""+addSlash(domWin.document.all.txtAttr.value)+"\""); }catch(e){ domWin.alert("设置失败"); }
}
function addSlash(str){ return(str.replace(/\\/g,"\\\\").replace(/\r/g,"\\r").replace(/\n/g,"\\n").replace(/\t/g,"\\\t").replace(/\"/g,"\\\"").replace(/\'/g,"\\\'"));
}
function expandLevels(intLevels){ try{ try{intLevels=intLevels?intLevels:this.nextSibling.value;}catch(e){intLevels=1;} intLevels=isNaN(intLevels)?1:parseInt(intLevels); intLevels=(intLevels<1||intLevels>5)?1:intLevels; var theObj=domWin.document.all.tRoot; var curLevel=1; while(curLevel>0&&theObj){ try{theObj.expand();}catch(e){alert(e);return(false);} if(theObj.nextSibling){ if(theObj.nextSibling.getAttribute("type")=="sub"){ if(theObj.nextSibling.childNodes.length>0&&curLevel<intLevels){ theObj=theObj.nextSibling.childNodes[0]; curLevel++; }else{ theObj=theObj.nextSibling.nextSibling; } }else{ theObj=theObj.nextSibling; } }else{ theObj=theObj.parentNode.nextSibling; curLevel--; } } }catch(e){alert(e);}
}
</script>
<a href="javascript:showDOM();void(0);" target="_self">test DOM</a>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

Popup对象实现右键菜单页面内查找

评论 (0) All