首页 > 编程 > JavaScript > 正文

HTML DOM Viewer

2019-11-21 02:30:29

字体：大中小

来源：转载

供稿：网友

说明：用来查看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需刷新才能执行]

上一篇：页面内查找

下一篇：Popup对象实现右键菜单

学习交流

索泰发布一款GTX 1070 Mini迷你版本:小机

索泰发布一款GTX 1070 Mini迷你版本:小机箱大爱...

热门图片

猜你喜欢的新闻

猜你喜欢的关注

新闻热点

荣耀总裁赵明乌镇演讲：荣耀首款5G手机V30下月发布

2019-10-23 09:17:05

搜狐张朝阳：回归媒体是搜狐重新崛起的关键

2019-10-21 09:20:02

华为轮值董事长郭平：虚拟技术创造现实价值

2019-10-21 09:00:12

滴滴英文服务上线两周年用户已超200万

2019-09-26 08:57:12

华为推出全球至快AI训练集群Atlas900

2019-09-25 08:46:36

马斯克：特斯拉正组建中国技术团队

2019-09-25 08:15:43

疑难解答

图片精选

网友关注