Javascript [Electronic resources] : The Definitive Guide (4th Edition) نسخه متنی

14.8 Anchors

The
anchors[] array of the

Document
object contains Anchor objects representing named locations in the
HTML document that are marked with the <a>
tag and its name
attribute. The anchors[] array has existed since
JavaScript 1.0, but the Anchor object is new in JavaScript 1.2. In
previous versions, the elements of the anchors[]
array were all undefined, and only the length
property was useful.

The
Anchor object is a simple one. The only standard property it defines
is name, which is the value of the HTML
name attribute. As with the Link object, the text
that appears between the <a> and
</a> tags of the anchor is specified by
the text property in
Netscape 4 and by the
innerText property
in Internet Explorer 4. Neither of these
properties is supported by the W3C DOM standard, but we'll see
other ways to obtain the text content of an element in Chapter 17.

Example 14-6
shows a function that creates a
navigation window for a specified document. It displays the
text, innerText, or
name of all the anchors in the document. The
anchor text or name is displayed within hypertext
links -- clicking on any anchor causes the original window to
scroll to display that anchor. The code in this example is
particularly useful if you write your HTML documents so that all
section headings are enclosed in anchors. For example:

<a name="sect14.6"><h2>The Anchor Object</h2></a>

Example 14-6. Listing all anchors

/*
* FILE: listanchors.js
* The function listanchors(  ) is passed a document as its argument and opens
* a new window to serve as a "navigation window" for that document. The new 
* window displays a list of all anchors in the document. Clicking on any 
* anchor in the list causes the document to scroll to the position of that
* anchor. A document should not call this function on itself until it is 
* fully parsed, or at least until all the anchors in it are parsed.
*/
function listanchors(d) {
// Open the new window
var newwin = window.open(", "navwin", 
"menubar=yes,scrollbars=yes,resizable=yes," +
"width=600,height=300");
// Give it a title
newwin.document.writeln("<h1>Navigation Window:<br>" +
document.title + "</h1>");
// List all anchors
for(var i = 0; i < d.anchors.length; i++) {
// For each anchor object, determine the text to display. 
// First, try to get the text between <a> and </a> using a 
// browser-dependent property. If none, use the name instead.
var a = d.anchors[i];
var text = null;
if (a.text) text = a.text;                          // Netscape 4
else if (a.innerText) text = a.innerText;           // IE 4+
if ((text == null) || (text == '')) text = a.name;  // Default
// Now output that text as a link. Note the use of the location
// property of the original window.
newwin.document.write('<a href="#' + a.name + '"' +
' onclick="opener.location.hash="' + a.name + 
'"; return false;">'); 
newwin.document.write(text);
newwin.document.writeln('</a><br>');
}
newwin.document.close(  );  // Never forget to close the document!
}