设为首页收藏本站

开启辅助访问切换到宽版

热搜: 手游棋牌素材小程序 92game 视频图片下载商业两性电影游戏娱乐自适应网址帝国CMS 织梦模板插件

源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛»首页 › 教程专区 › 网络编程 › HTML DOM Viewer

发新帖

查看: 398|回复: 25

[JavaScript] HTML DOM Viewer

7万主题	861 回帖	32万积分

Rank: 8 Rank: 8

积分: 329525

发消息

发表于 2006-9-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需刷新才能执行]

HTML, DOM, Viewer

相关帖子

回复

使用道具举报

8 主题	2万回帖	52 积分

Rank: 2

积分: 52

发消息

发表于 2022-12-25 13:36:29 | 显示全部楼层

论坛有你更精彩！

回复支持反对

使用道具举报

0 主题	2万回帖	0 积分

Rank: 3 Rank: 3

积分: 0

发消息

发表于 2022-12-29 17:07:04 | 显示全部楼层

额UI废物iuhfujewfiewnnfen

回复支持反对

使用道具举报

1 主题	2万回帖	69 积分

Rank: 2

积分: 69

发消息

发表于 2023-1-22 17:36:17 | 显示全部楼层

刷刷刷刷刷刷刷刷刷刷刷刷刷刷刷

回复支持反对

使用道具举报

0 主题	2万回帖	124 积分

Rank: 2

积分: 124

发消息

发表于 2023-1-26 12:08:37 | 显示全部楼层

呵呵呵呵呵呵呵a

回复支持反对

使用道具举报

1 主题	2万回帖	79 积分

Rank: 2

积分: 79

发消息

发表于 2023-5-5 19:02:13 | 显示全部楼层

来看看！！！

回复支持反对

使用道具举报

1 主题	2万回帖	319 积分

Rank: 3 Rank: 3

积分: 319

发消息

发表于 2023-8-9 15:28:28 | 显示全部楼层

还有人在不。。。。。。。。。。啊

回复支持反对

使用道具举报

0 主题	1万回帖	0 积分

Rank: 3 Rank: 3

积分: 0

发消息

发表于 2023-9-15 20:51:55 | 显示全部楼层

激动人心，无法言表！

回复支持反对

使用道具举报

0 主题	1万回帖	0 积分

Rank: 3 Rank: 3

积分: 0

发消息

发表于 2023-9-21 00:27:31 | 显示全部楼层

儿童服务绯闻绯闻绯闻

回复支持反对

使用道具举报

2 主题	2万回帖	69 积分

Rank: 2

积分: 69

发消息

发表于 2023-11-30 18:32:09 | 显示全部楼层

哈哈哈哈哈哈

回复支持反对

使用道具举报

发新帖

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2024-11-26 06:02 , Processed in 0.075623 second(s), 26 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表