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需再刷新一下页面才能执行]

相关文章

bootstrap 模态框（modal）实现水平垂直居中显示
这篇文章主要为大家详细介绍了bootstrap 模态框modal实现水平垂直居中显示，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-01-01
JavaScript实现网页图片等比例缩放实现代码及调用方式
为了保证图片统一大小，直接设置图片大小又会导致图片拉伸,造成图片模糊，接下来将介绍的代码可以在图片加载完成后自动按比例调整图片大小，感兴趣的你可以参考下
2013-02-02
解决layui checkbox 提交多个值的问题
今天小编就为大家分享一篇解决layui checkbox 提交多个值的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
js读取json文件片段中的数据实例
下面小编就为大家带来一篇js读取json文件片段中的数据实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-03-03
JS判断数据类型的常用方法汇总
判断数据类型是JavaScript面试时常常遇到的问题，本文为大家总结了几种常用的方法，文中的示例代码讲解详细，感兴趣的小伙伴可以了解一下
2023-06-06
五段实用的js高级技巧
五段实用的js高级技巧，一些不错的小技巧，学习js的朋友可以看看。
2011-12-12
JavaScript实现数组元素增减的方法示例
数组元素的增删是JavaScript的一个特点,因为其他很多编程语言的数组是不允许增加或者删除元素的,本文给大家介绍了JavaScript实现数组元素增减的方法示例,文中有相关的代码示例供大家参考,需要的朋友可以参考下
2024-07-07
js设计模式之结构型享元模式详解
这篇文章主要为大家详细介绍了js设计模式之结构型享元模式的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-09-09
echarts控制x轴和y轴name位置并加轴箭头代码示例
搞数据展示,很多朋友都会用到免费的echarts,下面这篇文章主要给大家介绍了关于echarts控制x轴和y轴name位置并加轴箭头的相关资料,需要的朋友可以参考下
2024-01-01
详解JavaScript中map()和forEach()的异同
在JavaScript中,map()和forEach()是两个常用的数组方法,它们都用于遍历数组,但在某些方面有一些关键的区别,本文将详细讨论这两种方法的异同,以帮助您更好地理解它们的用法和适用场景,需要的朋友可以参考下
2024-02-02

最新评论