Firefox Hacks [Electronic resources] نسخه متنی

با بیش از 100000 منبع الکترونیکی رایگان به زبان فارسی ، عربی و انگلیسی

Hack 53. Probe HTML with the DOM Inspector

Mozilla's powerful DOM
Inspector tool deconstructs web pages for your benefit.

The standard Firefox install comes complete with the optional
DOM
Inspector tool. This tool gives web developers and Mozilla
programmers a microscope that can be used to examine HTML and XML
documents after they're displayed. This hack shows
how to analyze an HTML page with it. You can also use it to analyze
XUL pages [Hack #76] . In this
hack, we'll work with the following web page
content:

<html>
<head>
<style>
.header { font-family : Arial; }
</style>
<script>
function click_handler( ) {
alert("Click");
}
</script>
</head>
<body>
<h3 class="header">Test Page</h3>
<script>
document.write("<p>Hello, World!</p>");
</script>
<p id="link-para">
<a href=" onclick="click_handler( )">A Link</a>
</p>
</body>
</html>

5.11.1. Inspecting a Page

The DOM Inspector can be a tricky little tool to coordinate with your
web page. There are several ways to start it up:

Display the target web page normally. Choose the menu item
ToolsDOM Inspector, or press Ctrl-Shift-I. The DOM
Inspector window appears with the target page loaded.

Start the DOM Inspector. Type a URL into the top text field and press
the Inspect button at the right (pressing Enter is not sufficient).
The Inspector displays the page in a new panel at the bottom, and the
existing top portion loads that target page.

Start the DOM Inspector. Choose menu items FileInspect a
URL... and matters proceed as detailed in the previous item.

The formatting and indenting of our sample page results in lots of
extra W3C DOM 1 Core Text Nodes being added to the document when
it's displayed. In most cases, and to match the
screenshots in this hack, you should filter out that separator
content for convenience. To do so, just pick ViewShow
Whitespace Nodes, unticking that item. That reduces the output so
that it matches this single-line version of the document:

<html><head><style> .header { font-family : Arial; } </style><script> 
function click_handler(  ) { alert("Click"); } </script></head><body>
<h3 class="header">Test Page</h3><script> document.write("<p>
Hello, World!</p>"); </script><p id="link-para">
<a href=" onclick="click_handler(  )">A Link</a></p>
</body></html>

You can open several DOM Inspector windows if you want. If the window
or pane that displays the target web page ever goes away, the DOM
Inspector will stop working. If that happens, close down the DOM
Inspector and restart it. The FileInspect a Window menu
option is not used for HTML documents; it's for XUL
documents.

5.11.2. Deconstructing a Page

Figure 5-10 shows the page as the DOM Inspector
sees it, with the tree of DOM 1 Core Nodes
in the left pane fully expanded to show detail. The highlighted items
are things that are safe to click once the page is displayed.

Figure 5-10. DOM Inspector view of a target web page

Let's first look at the left pane. Notice how the
<script> element in the body appears in its
original form; such elements are usually static content of the page.
Notice also how the content generated by
document.write() (the first
<p> element) also appears in the tag
hierarchy. The DOM Inspector displays the living state of the page,
not just the content of the source HTML document.

The right pane displays the tag attributes for the selected
<a> element. In this case, the pane displays
tag attributes, but that can be changed with the drop-down menu in
the top-right corner of the page. The two most useful options in that
menu are CSS Style Rules and Computed Style. Unlike other tools, such
as the Web Developer Toolbar, the DOM Inspector display can be used
to report the state of every CSS and Mozilla property that might
apply to a given element.

If the HTML document is big, use the SearchSelect Element
By Click menu option (or the equivalent icon on the toolbar) to pick
out a piece of HTML in the target document. Click in the target
document to reveal and highlight the equivalent element in the DOM
Inspector.

5.11.3. Hacking a Page to Bits

The DOM Inspector is a read/write tool. You can cut, copy, paste,
insert, delete, or update nodes in the target page in a permanent
way. That's more powerful than just applying
display: none styles to existing content. To do
so, just display a target page as in the previous section, select an
item in the tree of nodes in the left pane, and then click in any of
these places to see the set of operations you can apply:

Pick from options in the Edit menu.

Right-click on the selected tree item to expose a context menu.

Right-click on any tree or list item in the right-hand panels to
expose a context menu.

Make any such change and the window displaying your target HTML
document changes to match. Any changes that you make like this will
survive until the target page is reloaded. Cut, copy, and paste
operations cannot deliver content to other applications via the
desktop clipboard. Only the Copy XML operation can do that.

Firefox Hacks [Electronic resources] نسخه متنی

فارسی

کردی

العربیه

اردو

Türkçe

Русский

English

Français

کانال فیلم من

تبیان من

فایلهای من

کتابخانه من

پنل پیامکی

وبلاگ من

اینجــــا یک کتابخانه دیجیتالی است

با بیش از 100000 منبع الکترونیکی رایگان به زبان فارسی ، عربی و انگلیسی