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

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

Javascript: js支持158、159开头的手机号的验证; javascript学习网址备忘; JScript的条件编译; [原创]站长必须要知道的javascript广告代码; js实现的点击超链显示隐藏层; JCalendar 日历控件 v1.0 beta[兼容IE&Firefox] 有文档和例子; JavaScript 不只是脚本; 把JS与CSS写在同一个文件里的书写方法; Javascript & DHTML 实例编程（教程）基础知识; Javascript & DHTML 实例编程（教程）DOM基础和基本API; javascript实现的一个图片转移效果; 用js实现键盘方向键翻页功能的代码; js实现DIV的一些简单控制; 用CSS+JS实现的进度条效果效果; 爱恋千雪-US-AscII加密解密工具（网页加密）下载; 用javascript实现始终保持打开同一个子窗口以及关闭父窗口同时自动关闭所有子窗口; 非常不错的页面特效建议大家看下; javascript Zifa FormValid 0.1表单验证代码打包下载; 实现javascript的延期执行或者重复执行的两个函数; 推荐一个不错的图片浏览效果

No. « ‹ 69 70 71 72 › »

技术文章搜索

关键字

Javascript 中的 HTML DOM Viewer

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

收藏到网摘: 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