HTML DOM Viewer

更新时间：2006年09月24日 00:00:00 作者：

说明：用来查看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 全选注:引入外部Js需再刷新一下页面才能执行]

相关文章

js中如何把字符串转化为对象、数组示例代码
在本文为大家介绍下把字符串转化为对象：把文本转化为对象、把文本转化为数组，具体实现如下，感兴趣的朋友可以参考下哈，希望对大家有所帮助
2013-07-07
JavaScript中遍历对象的property的3种方法介绍
这篇文章主要介绍了JavaScript中遍历对象的property的3种方法介绍,本文先是讲解了3种方法并用一张图片加深理解,然后给出代码实例,需要的朋友可以参考下
2014-12-12
浅谈js中调用函数时加不加括号的问题
下面小编就为大家带来一篇浅谈js中调用函数时加不加括号的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-07-07
JavaScript实现简单图片翻转的方法
这篇文章主要介绍了JavaScript实现简单图片翻转的方法,涉及javascript操作图片与数组的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-04-04
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
这篇文章主要介绍了EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)的相关资料,需要的朋友可以参考下
2016-02-02
JavaScript 应用类库代码
S.Sams Lifexperience CopyRight (C) 2003-2007 S.Sams Lifexperience ScriptClassLib MSNLive: S.Sams#msn.com Update by : 2007-01-19 转载传播请保留版权
2008-06-06
一个简单的JS鼠标悬停特效具体方法
这个特效最终实现效果就是当鼠标移动到链接上，文字会横向移动一定距离，貌似总有人喜欢这些花花草草。添加此效果方法很简单。
2013-06-06
15个顶级开源JavaScript框架和库
今天小编就为大家分享一篇关于15个顶级开源JavaScript框架和库的文章，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
2018-10-10
JavaScript实现搜索框的自动完成功能(一)
在很多需要搜索的网站, 都会有一个自动完成的搜索框. 方便用户查找他们想要的搜索词. 帮助用户快速找到自己想要的结果.接下来通过本文给大家介绍JavaScript实现搜索框的自动完成功能(一)，需要的朋友参考下吧
2016-02-02
ES6 Promise对象概念与用法分析
这篇文章主要介绍了ES6 Promise对象概念与用法,简单分析了Promise对象的基本状态与三种重要方法,并结合实例形式给出相关使用技巧,需要的朋友可以参考下
2017-04-04

最新评论