Return to Kroll Design home page

JavaScript Tutorials

 
« Return

The anchors and links arrays of the DOM

A hyperlink specifies the location of content on the web. Hyperlinks that point to another section of the same web page are called anchors. The DOM contains arrays for links and anchors. The links array contains information about hyperlinks to other pages, and the anchors array contains information about hyperlinks internal to the page.

This is an example of an anchor:

<a name="top1"></a><!--This invisible 'destination anchor' is located just after the <body> tag near the top of the web page. When the anchor at the bottom of the page is clicked, the page automatically scrolls up to this location.-->

<!--Page content goes here.-->

<a class="back-to-top" href="#top1">Back to top<br /></a><!--This is the visible part of the anchor, where the user can click on 'Back to top'.-->

Below is code for displaying the contents of the links array and anchors array.

Code:

<script type="text/javascript">
//<![CDATA[
document.write("1. 'innerHTML' is blank for anchors, because it's looking at the destination anchor.<br />2. For links, 'innerHTML' gets interpreted by the browser, which is why you probably see the actual image, not the image tag html markup.<br />3. 'name' is empty for external links, as I didn't need to name them.<br /><br />");

for (i=0; i < document.anchors.length; i++) {
  document.write("<b>anchors[" + i + "].name:</b> " + document.anchors[i].name + "<br /><br />");
  document.write("<b>anchors[" + i + "].href:</b> " + document.anchors[i].href + "<br /><br />");
}

for (j=0; j < document.links.length; j++) {
	document.write("<b>links[" + j + "].href:</b> " + document.links[j].href + "<br /><br />");
  document.write("<b>links[" + j + "].innerHTML:</b> " + document.links[j].innerHTML + "<br /><br />");
  document.write("<br /><br />");
}
//]]>
</script>

Output:


Back to top


 
« Return


©2012 Kroll Design    info@KrollDesign.net    781.910.3694
Last modified: 12/31/1969 7:00 PM