Links Collections

DOM Basic Collections - Part 3

Forward: In this part of the series, we look at the Links Collection.

By: Chrysanthus Date Published: 30 Jul 2012

Introduction

This is part 3 of my series, DOM Basic Collections. In this part of the series, we look at the Links Collection. A collection is an ECMAScript array of the same type of elements in an html document. I assume, you have read the different parts of the series before reaching here; this is a continuation.

Note: If you cannot see the code or if you think anything is missing (broken link, image absent, etc.), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.

The Links Collection
The word, link, here, refers to hyperlinks.

Syntax
To obtain a collection of all links in an html document, you would type:

    document.links

You begin with the reserved word, document, followed by a dot and then followed by the reserved word, links, in plural.

Coding the Links Collection
The links collection (array) and its expressions are coded in the same way that the images collection and its expressions are coded. All collections have the length property to determine the number of references in the collection. Read and try the following code, which displays the total number of links in a document:

<!DOCTYPE HTML>
<html>
<head>
    <title>Illustration</title>
</head>
<body>

    <a href="url1">innerHTML1</a>
    <a href="url2">innerHTML3</a>
    <a href="url3">innerHTML3</a>

    <script type="text/ECMAScript">
        alert(document.links.length);
    </script>

</body>
</html>

There are three hyperlinks and the result displayed is 3.

You can do other things with the links collection. For example, you can add borders (style) to all the hyperlinks at run time:

<!DOCTYPE HTML>
<html>
<head>
    <title>Illustration</title>
</head>
<body>

    <p><a href="url1">innerHTML1</a></p>
    <p><a href="url2">innerHTML3</a></p>
    <p><a href="url3">innerHTML3</a></p>

    <script type="text/ECMAScript">
        for (i=0; i<3; i++)
            {
                document.links[i].style.border = "2px solid brown";
            }
    </script>

</body>
</html>

End of Series
There are other collections, which many browsers do not yet support. Well, this is the end of the series. A short series! The next series, you should read is titled, “DOM Document Object”. I hope you appreciated this one.

Chrys

Broad Network

Related Articles

Links Collections

DOM Basic Collections - Part 3

Introduction

Related Links

Comments