Home > Article > Web Front-end > HTML DOM Viewer_javascript tips

HTML DOM Viewer_javascript tips

WBOYOriginal: 2016-05-16 19:25:51826browse

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Written under the latest topic of scrolling classic [prototype framework]_prototypeNext article：Written under the latest topic of scrolling classic [prototype framework]_prototype

Related articles

See more