Html DOM 查看工具

最近做调试时需要经常查看IE和Firefox的DOM及属性,可是网上找不到合适的工具,于是自己写了一个,拿出与给大分享,看看有人是否和我一样也有这样的需要.
代码如下:

 1  <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
 2  < html  xmlns ="http://www.w3.org/1999/xhtml" >
 3  < head >
 4       < title >  HTML DOM Browser  </ title >
 5       < meta  name ="generator"  content ="editplus"   />
 6       < meta  name ="author"  content =""   />
 7       < meta  name ="keywords"  content =""   />
 8       < meta  name ="description"  content =""   />
 9       < style  type ="text/css"  title ="" >
10          #disp  {  border :  inset 1px ;  overflow :  auto ;  width :  640px ;  height :  384px ;   }
11          .object  {  background-color :  #ccc ;  cursor :  hand ;   }
12          .property  {  background :  #efefef  }
13          #result  {  border :  2px solid ;  width :  100% ;   }
14       </ style >
15       < script  type ="text/javascript"  language ="javascript" >
16       // <![CDATA[
17       function  $(o) {  return  document.getElementById(o); }
18       function  about()
19      {
20           var  str  =   "" ;
21          str  +=   "     HTML DOM Browser v1.0\n " ;
22          str  +=   " =================================\n " ;
23          str  +=   " Happy everyday to you ^_^ !\n " ;
24          str  +=   " written by Anders.Zhao\n " ;
25          str  +=   " visit http://anders.zhao.cnblogs.com/ to get new version.\n " ;
26          alert(str);
27      }
28       function  pressEnterKey(evt, path)
29      {
30           if  (evt  ==   null ) evt  ==  window.event;
31           if  (evt.keyCode  ==   13 )
32          {
33              showObject(path);
34          }
35      }
36       function  getParent(s) 
37      {
38           var  pos  =  s.lastIndexOf( " . " );
39           var  ret  =  pos  ==   - 1   ?  s : s.substr( 0 , pos); 
40           return  ret;
41      }
42       function  html2dtext(html)
43      {
44           // if (isNaN(html)) return "NaN";
45          html  +=   "" ;
46          html  =  html.replace( /</ g,  " &lt; " );
47          html  =  html.replace( />/ g,  " &gt; " );
48           if  (html  ==   "" ) html  =   " &nbsp; " ;
49           return  html;
50      }
51       function  showObject(path)
52      {
53          $('property').value  =  path;
54          document.title  =  path  +   "  -- HTML DOM Browser " ;
55           var  func  =   new  Function( " return  "   +  path  +   " ; " );
56 
57           var  html  =   "" ;
58           var  objs  =  func();
59           try
60          {
61               for  ( var  i  in  objs)
62              {
63                   try
64                  {
65                       var  obj  =  objs[i];
66                       var  val  =  html2dtext(obj);
67 
68                      html  +=  ( typeof (obj)  ==  'object'  &&  obj  !=   null )  ?   " <tr class=\ " object\ "  οnclick=\ " showObject(' "  + path +  " . "  + i +  " ')\ " ><td> "   +  i  +   " </td><td> "   +  val  +   " </td></tr>\n "     :  " <tr class=\ " property\ " ><td> "   +  i  +   " </td><td> "   +  val  +   " </td></tr>\n " ;
69                  }
70                   catch  (e) { }
71              }
72          }
73           catch  (e) { }
74          html  =   " <table id='result'> "   +  html  +   " </table> "
75          $( " disp " ).innerHTML  =  html;
76      }
77       // ]]>
78       </ script >
79  </ head >
80  < body >
81       < input  type ="text"  style ="width: 400px;"  value ="window"  id ="property"  onkeypress ="pressEnterKey(event, $('property').value)"   />
82       < input  type ="button"  value ="Show"  onclick ="showObject($('property').value)"   />
83       < input  type ="button"  value ="Back"  onclick ="showObject(getParent($('property').value))"   />
84       < input  type ="button"  value ="About"  onclick ="about()"   />
85       < div  id ="disp" ></ div >
86  </ body >
87  </ html >
88 

这个工具有点问题,就是有部分DOM属性显示不了,如:IE下window.screen显示不了子属性,但在Firefox下却能正常显示, 不知道有人是否知道这个问题, 知道的麻烦告诉我一下.

转载于:https://www.cnblogs.com/anderszhao/archive/2007/07/02/803659.html