微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > web前端 > js教程 > 正文

HTML DOM Viewer_javascript技巧

php中文网

发布： 2016-05-16 19:25:51

原创

913人浏览过

说明：用来查看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(/
/g,"\r").replace(/
/g,"\n").replace(/	/g,"\	").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

大家都在看：

利用srcdoc属性在iframe中显示本地存储HTML 将HTML输入与JavaScript搜索逻辑整合：一个实用的教程 JavaScript与HTML输入交互：实现动态数据筛选设置HTML input type="time" 的默认值正确设置HTML input type="time" 元素的默认时间值

java速学教程(入门到精通)

java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

来源：php中文网

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

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

最新问题

JS排序算法实现_快速排序优化方案快速排序平均时间复杂度为O(nlogn)，通过三数取中和小数组插入排序可优化性能。

2025-11-14 22:29:02

304

前端JS怎样与Spring缓存机制配合_前端JS与Spring缓存机制配合使用方法前端JavaScript通过规范请求与HTTP缓存头，配合Spring后端的@Cacheable、@CachePut等机制实现协同：1.使用一致GET请求触发缓存命中；2.更新时调用对应接口使后端刷新缓存；3.利用Cache-Control、ETag等响应头让浏览器自动管理缓存；4.需实时数据时添加时间戳或设no-cache绕过缓存，确保数据一致性。

2025-11-14 22:23:16

471

JS装饰器编程_Decorator应用指南装饰器是一种函数，用于在不修改原始代码的情况下增强类、方法、属性或参数的行为。通过@符号应用于目标声明，运行时接收元信息并返回修改后的描述符或对象。类装饰器可修改类定义，如冻结实例或添加元数据；方法装饰器通过descriptor控制方法行为，实现只读、日志、性能监控等；属性和参数装饰器主要用于元数据标注，常用于依赖注入和参数标记，需配合ReflectMetadata使用。尽管JavaScript装饰器尚处Stage2，TypeScript和框架如Angular、NestJS已广泛支持，提供声明式

2025-11-14 22:23:02

970

JS元素定位怎么获取_JS DOM元素获取与位置尺寸计算方法使用getBoundingClientRect()可获取元素相对于视口的位置和尺寸，结合offsetWidth、clientHeight等属性可精确控制布局，常用于滚动监听与弹窗定位。

2025-11-14 22:20:02

302

页面生命周期事件剖析_DOMContentLoaded与Load DOMContentLoaded在DOM解析完成后触发，不等待资源加载，适合操作DOM；Load在所有资源加载完毕后触发，适用于依赖完整资源的场景。

2025-11-14 22:19:33

921

JavaScript如何实现全选反选_JavaScript复选框全选反选功能代码实现方法通过原生JavaScript可实现复选框全选、反选与状态同步：1.用checkAll控制所有item类复选框的选中状态；2.通过循环遍历将每个item的checked属性取反实现反选；3.监听每个子项的change事件，判断是否全部选中以同步“全选”状态。

2025-11-14 21:58:34

466

对象合并与拷贝方法_浅拷贝与深拷贝实现答案是浅拷贝仅复制对象第一层属性，深拷贝递归复制所有层级。常用浅拷贝方法有Object.assign()和扩展运算符；深拷贝可使用JSON.parse(JSON.stringify())或递归实现，以避免引用共享导致的数据污染。

2025-11-14 21:55:02

345

JS注解怎么标注Promise对象_ JS Promise类型参数的注解方法使用JSDoc标注Promise类型可提升JavaScript代码的可读性和维护性。1.用@returns{Promise}明确函数返回值类型，如{Promise}，使编辑器能推断异步结果结构；2.用@param{Promise}注解参数类型，如接收字符串数组Promise的函数，明确要求传入resolve为string[]的Promise；3.支持多种泛型形式，包括Promise、Promise、Promise和Promise

2025-11-14 21:54:06

145

js迭代器模式是什么迭代器是符合迭代器协议的对象，拥有next方法，返回包含value和done属性的对象，用于顺序访问集合元素而不暴露内部结构。

2025-11-14 21:51:30

341

JS闭包应用场景_JavaScript高级技巧剖析闭包能访问词法作用域变量并实现数据私有化、事件回调、函数柯里化和防抖节流。1.通过IIFE封装私有变量；2.在循环中用闭包绑定正确索引值；3.柯里化利用闭包保存参数；4.防抖函数依赖闭包维持定时器状态，提升性能。

2025-11-14 21:49:51

377

相关专题

更多>

热门推荐

开源免费商场系统

广告

热门教程

更多>

相关推荐

热门推荐

最新课程

HTML 代码实例

150402次学习
收藏
HTML 开发手册

1524935次学习
收藏
HTML趣味课堂

94237次学习
收藏

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

关于我们免责申明举报中心意见反馈讲师合作广告合作最新更新 English: php中文网：公益在线php培训，帮助PHP学习者快速成长！; 关注服务号技术交流群

PHP中文网订阅号: 每天精选资源文章推送

PHP中文网APP: 随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

PHP学习

技术支持

返回顶部