首頁 > 文章 > web前端 > HTML DOM Viewer_javascript技巧

HTML DOM Viewer_javascript技巧

WBOY原創: 2016-05-16 19:25:51858瀏覽

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

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：滚动经典最新话题[prototype框架]下编写_prototype下一篇：Prototype 1.5.0_rc1 及 Prototype 1.5.0 Pre0小抄本_javascript技巧

相關文章

看更多