Compare Revisions

Introduction to DOM Inspector

Revision 99193:

Revision 99193 by penguin_traveller on

Revision 99194:

Revision 99194 by penguin_traveller on

Title:
Introduction to DOM Inspector
Introduction to DOM Inspector
Slug:
DOM_Inspector/Introduction_to_DOM_Inspector
DOM_Inspector/Introduction_to_DOM_Inspector
Tags:
DOM_Inspector
DOM_Inspector
Content:

Revision 99193
Revision 99194
n32      The submenu that displays below the <strong>Inspect a Windon32      The submenu that displays below the <strong>Inspect a Windo
>w</strong> menu item is the list of currently loaded DOM windows.>w</strong> menu item is the list of currently loaded DOM windows.
> Probably a browser window and the DOM Inspector are already open> Probably a browser window and the DOM Inspector are already open
> and displayed in this list already. The DOM Inspector keeps trac> and displayed in this list already. The DOM Inspector keeps trac
>k of all the windows that are open—all the DOMs that it knows abo>k of all the windows that are open—all the DOMs that it knows abo
>ut—so to access the DOM of a particular window in the DOM Inspect>ut—so to access the DOM of a particular window in the DOM Inspect
>or, simply access that window as you would normally and then choo>or, simply access that window as you would normally and then choo
>se it from this dynamically updated menulist in the DOM Inspector>se it from this dynamically updated menulist in the DOM Inspector
> application. For example, to begin inspecting the DOM of the mai> application. For example, to begin inspecting the DOM of the mai
>n Mail window, open Mail and then go back to the DOM Inspector an>n Mail window, open Mail and then go back to the DOM Inspector an
>d choose <strong>File &gt; Inspect a Window &gt; Inbox for <a cla>d choose <strong>File &gt; Inspect a Window &gt; Inbox for <a cla
>ss=" link-mailto" href="mailto:yourname@yourdomain.com" rel="free>ss=" link-mailto" href="mailto:yourname@yourdomain.com" rel="free
>link">yourname@yourdomain.com</a></strong> <img align="none" alt=>link">yourname@yourdomain.com</a></strong>
>"" class="internal" src="/@api/deki/files/179/=Di_menu.gif"> 
33    </p>
34    <p>
35      <img align="none" alt="" class="internal" src="/@api/deki/f
 >iles/179/=Di_menu.gif">
n47      Another DOM you can inspect is that of any web page at the n50      Another DOM you can inspect is that of any web page at the 
>other end of an URL. Use this second menuitem to enter an URL and>other end of an URL. Use this second menuitem to enter an URL and
> load the DOM of that page into the DOM Inspector. In contrast to> load the DOM of that page into the DOM Inspector. In contrast to
> the window DOM, which displays the document object model for the> the window DOM, which displays the document object model for the
> application itself, this "document" DOM shows the structure of t> application itself, this "document" DOM shows the structure of t
>he web page starting from its topmost &lt;HTML&gt; tag. To use th>he web page starting from its topmost &lt;HTML&gt; tag. To use th
>is menuitem, for example, you can enter <strong>www.brownhen.com<>is menuitem, for example, you can enter <strong>www.brownhen.com<
>/strong> at the prompt and see the DOM of the brownhen index page>/strong> at the prompt and see the DOM of the brownhen index page
> <img align="none" alt="DOM of a Web Page" class="internal" src=" 
>/@api/deki/files/43/=Bh_dom.gif"> 
51    </p>
52    <p>
53      &nbsp;
54    </p>
55    <p>
56      <img align="none" alt="DOM of a Web Page" class="internal" 
 >src="/@api/deki/files/43/=Bh_dom.gif">
n65      This allows you to use the DOM Inspector without having to n74      This allows you to use the DOM Inspector without having to 
>use a separate browser window, and it makes it easy to see the DO>use a separate browser window, and it makes it easy to see the DO
>M Inspector's highlighting of the selected nodes in that page. <i>M Inspector's highlighting of the selected nodes in that page.
>mg align="none" alt="DOM Loaded in DI" class="internal" src="/@ap 
>i/deki/files/183/=Di_small.gif"> 
75    </p>
76    <p>
77      &nbsp;
78    </p>
79    <p>
80      <img align="none" alt="DOM Loaded in DI" class="internal" s
 >rc="/@api/deki/files/183/=Di_small.gif">
n77      When you have selected a node like the "mini-mail" node, yon92      When you have selected a node like the "mini-mail" node, yo
>u can select any one of several <em>types</em> of information to >u can select any one of several <em>types</em> of information to 
>display about that node in the right pane of the DOM Inspector ap>display about that node in the right pane of the DOM Inspector ap
>plication window, all of which are available from the pull-down m>plication window, all of which are available from the pull-down m
>enu in the upper left corner of the right pane. <img align="none">enu in the upper left corner of the right pane.
> alt="" class="internal" src="/@api/deki/files/184/=Di_types.gif" 
>> In order to find out what the actual name of the file is being  
>used to provide the small mail icon, you can select <strong>CSS S 
>tyle Rules</strong> from this menu and see the various selectors  
>and rules that have been applied for those selectors. The rule th 
>at applies the mail icon to the "mini-mail" element is ID-based ( 
>since the icon is unique to the mail item in the taskbar), and us 
>es a <code>list-style-image</code> property to point to a file in 
> the theme JAR. That file turns out to be a GIF located at: <code 
>><a class=" external" href="chrome://commmunicator/skin/taskbar/m 
>ail.gif" rel="freelink">chrome://commmunicator/skin/taskbar/mail. 
>gif</a></code>. The list of types available from this pull-down m 
>enu gives you some idea about how extensive the DOM Inspector's i 
>nspecting capabilities are. The following table provides an overv 
>iew of what these sets of information are about: 
93    </p>
94    <p>
95      <img align="none" alt="" class="internal" src="/@api/deki/f
 >iles/184/=Di_types.gif">
96    </p>
97    <p>
98      In order to find out what the actual name of the file is be
 >ing used to provide the small mail icon, you can select <strong>C
 >SS Style Rules</strong> from this menu and see the various select
 >ors and rules that have been applied for those selectors. The rul
 >e that applies the mail icon to the "mini-mail" element is ID-bas
 >ed (since the icon is unique to the mail item in the taskbar), an
 >d uses a <code>list-style-image</code> property to point to a fil
 >e in the theme JAR. That file turns out to be a GIF located at: <
 >code><a class=" external" href="chrome://commmunicator/skin/taskb
 >ar/mail.gif" rel="freelink">chrome://commmunicator/skin/taskbar/m
 >ail.gif</a></code>. The list of types available from this pull-do
 >wn menu gives you some idea about how extensive the DOM Inspector
 >'s inspecting capabilities are. The following table provides an o
 >verview of what these sets of information are about:
n154      Another way to inspect the DOM is to search for particular n175      Another way to inspect the DOM is to search for particular 
>elements you're interested in by ID, class, or attribute. When yo>elements you're interested in by ID, class, or attribute. When yo
>u select <strong>Search &gt; Find Nodes...</strong> or press <cod>u select <strong>Search &gt; Find Nodes...</strong> or press <cod
>e>Ctrl + F</code>, the DOM Inspector displays a find dialog that >e>Ctrl + F</code>, the DOM Inspector displays a find dialog that 
>lets you find elements in various ways, and that gives you increm>lets you find elements in various ways, and that gives you increm
>ental searching by way of the <code>&lt;F3&gt;</code> shortcut ke>ental searching by way of the <code>&lt;F3&gt;</code> shortcut ke
>y. <img align="none" alt="" class="internal" src="/@api/deki/file>y.
>s/181/=Di_search.gif"> 
176    </p>
177    <p>
178      <img align="none" alt="" class="internal" src="/@api/deki/f
 >iles/181/=Di_search.gif">
t160      A final feature to mention in this introduction is the abilt184      A final feature to mention in this introduction is the abil
>ity is the ability the DOM Inspector gives you to dynamically upd>ity is the ability the DOM Inspector gives you to dynamically upd
>ate information reflected in the DOM about web pages, user interf>ate information reflected in the DOM about web pages, user interf
>ace, and other elements. Note that when the DOM Inspector display>ace, and other elements. Note that when the DOM Inspector display
>s information about a particular node or subtree, it presents ind>s information about a particular node or subtree, it presents ind
>ividual nodes and their values (in the DOM, attributes are subnod>ividual nodes and their values (in the DOM, attributes are subnod
>es of elements, typically) in an active, sortable list. You can r>es of elements, typically) in an active, sortable list. You can r
>ight-click individual items in this list and be presented with a >ight-click individual items in this list and be presented with a 
>context menu that lets you <em>edit</em> the values of those attr>context menu that lets you <em>edit</em> the values of those attr
>ibutes. <img align="none" alt="" class="internal" src="/@api/deki>ibutes.
>/files/176/=Di_edit.gif"> For example, <code>table</code> element 
>s are often used to layout elements in a web page, but when somet 
>hing goes wrong it can be difficult to find the offending cell, e 
>specially when tables are nested several deep, as they often are  
>on complicated web pages. You can use this dynamic editig capabil 
>ity of the DOM Inspector to set tables aside (i.e., by changing t 
>heir background color, adding a border, and so on). This interact 
>ivity allows you to shrink and grow element size, change icons, a 
>nd do other layout-tweaking updates—all without actually changing 
> the DOM as it is defined in the file on disk. 
185    </p>
186    <p>
187      <img align="none" alt="" class="internal" src="/@api/deki/f
 >iles/176/=Di_edit.gif">
188    </p>
189    <p>
190      For example, <code>table</code> elements are often used to 
 >layout elements in a web page, but when something goes wrong it c
 >an be difficult to find the offending cell, especially when table
 >s are nested several deep, as they often are on complicated web p
 >ages. You can use this dynamic editig capability of the DOM Inspe
 >ctor to set tables aside (i.e., by changing their background colo
 >r, adding a border, and so on). This interactivity allows you to 
 >shrink and grow element size, change icons, and do other layout-t
 >weaking updates—all without actually changing the DOM as it is de
 >fined in the file on disk.

Back to History