14.18 Capturing Document Content
NN 6, IE 5
You want to grab a copy of the current
HTML node tree, including any dynamic changes made to it by scripts.
The need for this feature most commonly occurs when you
haven't prepared for it—for example, as an ad
hoc debugging tool. Therefore, to get an emergency copy of the
page's HTML, enter the following URL as one unbroken
line into the Address/Location box of your browser:
rows=20>" + document.body.parentNode.innerHTML + "</textarea>")
This code produces a new window containing a single
textarea element displaying all HTML inside the
<html> and </html>
tags of the page at that instant.
When you use dynamic element creation, it frequently becomes
difficult to know if a rendering problem is due to a browser problem
or a problem in the document tree caused by your element modification
scripts. Viewing the source in the browser isn't
much help here, because that view tends to mimic only the page as
delivered to the browser, without any of the dynamic modifications
your scripts make to the page after it loads.
An ideal way to diagnose these kinds of problems is to isolate a copy
of the HTML as the browser sees it, paste it into a test document,
and then load that test document into the browsers for which you
develop. Sometimes, simply viewing the HTML quickly reveals problems
such as improperly closed container tags (more common if you use the
IE HTML string modification methods than the W3C DOM
node-modification methods), unbalanced elements in tables, or a
missing attribute. But even if the problem is more elusive, it is far
easier to work in a scriptless and stable HTML environment,
experimenting with tags and attributes to find the combination that
works as desired in all target browsers. Then you can go back to your
content modification scripts to plug the holes in content creation
can be modified to provide a larger or smaller
textarea element. Once you find a combination that
works best for you, create a bookmark for this URL. This kind of
on pages retrieved from any server.
You can even use it in a frameset. Simply reference the frame in
which you're interested:
rows=20>" + top.frames.document.body.parentNode.innerHTML + "</textarea>")
Be aware that IE for Windows may not produce all of the markup,
particularly the head element contents, when the
page is defined as a strictly XHTML file. You can experiment with the
reference in the bookmarklet to point to the desired segment of the
page you're looking at.
14.18.4 See Also
Recipe 14.17 for another way to examine a document's
structure by walking the document node tree.