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!
}