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

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

Javascript: 自己开发Dojo的建议框架; js每次Title显示不同的名言; 不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术; 无限级别的菜单（侧拉菜单）; 点选TOP后并不是直接跳到页顶的，而是滚动上去; js下拉菜单中自动信息轮换播放; 英文首字母全大写的js实现脚本; 实例区别onClick和onDBClick两事件方法; 改变文本框字体颜色的js脚本; js星空效果代码; 判断li是否有样式的js代码; 文本框点击时文字消失，失去焦点时文字出现; 如何让一个层关闭之后，就算刷新页面了也不显示。除非关闭页面再次打开; 右下角弹出窗口效果代码; JS控制对象移动效果; 验证用户是否修改过页面的数据的实现方法; Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]; 正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度; EXT富客户端后台管理系统初步代码; 不同浏览器javascript变量作用域的处理方法

No. « ‹ 110 111 112 113 › »

技术文章搜索

关键字

Javascript 中的 HTML DOM Viewer

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

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