How To Get HTML DOM Links Collection In JavaScript

admin_img Posted By Bajarangi soft , Posted On 29-09-2020

In Java script we can count the number of links present in the document so today we are going to discuss about finding the links in document in java script

How To Get HTML DOM Links Collection In JavaScript

The links collection returns a collection of all links in the document.

The links in the collection represents <a> elements and/or <area> elements with a href attribute.

Note: If the element is missing the href attribute, nothing is returned and the elements in the collection are sorted as they appear in the source code.

Tip: Also look at the Anchor Object and the Area Object.

Syntax and Usage

document.links
 

Properties

length  Returns the number of <a> and/or <area> elements in the collection.

Note: This property is read-only
 

Methods

Method              Description
[index]             Returns the <a> and/or <area> element from the collection with the specified index (starts at 0).
                    Note: Returns null if the index number is out of range
item(index)         Returns the <a> and/or <area> element from the collection with the specified index (starts at 0).
                    Note: Returns null if the index number is out of range
namedItem(id)       Returns the <a> and/or <area> element from the collection with the specified id.
                    Note: Returns null if the id does not exist
 

Example(1)

        <a href="https://blog.bajarangisoft.com/blogs">
            <img src="../image/demo1.jpg" alt="girl" width="152" height="128">
        </a>
        <a href="https://blog.bajarangisoft.com/blogs">
            <img id="black_girl" src="../image/demo2.jpg" alt="girl" width="152" height="128">
        </a>
        <a href="https://blog.bajarangisoft.com/blogs">
            <img src="../image/demo3.jpg" alt="girl" width="152" height="128">
        </a>
        <h3>To learn more about Java Script Visit Our <a href="https://blog.bajarangisoft.com/blogs">Bajarangisoft</a></h3>
        <h3><a id="Link" href="https://blog.bajarangisoft.com/blogs">JavaScript</a></h3>
        <br>
        <br>
        <h2 id="demo1"></h2>
        <button class="btn btn-primary" type="button" onclick="count_links()">Click it</button><br><br>
        
<script>
    function count_links() {
        var x = document.links.length;
        document.getElementById("demo1").innerHTML = x;
    }
</script>

In above example when i click the button it wil display the number of links in the document. 



Example(2)

        <a href="https://blog.bajarangisoft.com/blogs">
            <img src="../image/demo1.jpg" alt="girl" width="152" height="128">
        </a>
        <a href="https://blog.bajarangisoft.com/blogs">
            <img id="black_girl" src="../image/demo2.jpg" alt="girl" width="152" height="128">
        </a>
        <a href="https://blog.bajarangisoft.com/blogs">
            <img src="../image/demo3.jpg" alt="girl" width="152" height="128">
        </a>
        <h3>To learn more about Java Script Visit Our <a href="https://blog.bajarangisoft.com/blogs">Bajarangisoft</a></h3>
        <h3><a id="Link" href="https://blog.bajarangisoft.com/blogs">JavaScript</a></h3>
        <br>
        
        <h2 id="demo2"></h2>
        <button class="btn btn-primary" type="button" onclick="get_single_url()">Click it</button><br><br>
   
<script>
    function get_single_url() {
        var x = document.links[0].href;
        document.getElementById("demo2").innerHTML = x;
    }
</script>

In above example when i click the button it will display the URL of the first link (index 0) in the document.



Example(3)

        <a href="https://blog.bajarangisoft.com/blogs">
            <img src="../image/demo1.jpg" alt="girl" width="152" height="128">
        </a>
        <a href="https://blog.bajarangisoft.com/blogs">
            <img id="black_girl" src="../image/demo2.jpg" alt="girl" width="152" height="128">
        </a>
        <a href="https://blog.bajarangisoft.com/blogs">
            <img src="../image/demo3.jpg" alt="girl" width="152" height="128">
        </a>
        <h3>To learn more about Java Script Visit Our <a href="https://blog.bajarangisoft.com/blogs">Bajarangisoft</a></h3>
        <h3><a id="Link" href="https://blog.bajarangisoft.com/blogs">JavaScript</a></h3>
        
        <h2 id="demo3"></h2>
        <button class="btn btn-primary" type="button" onclick="use_idname()">Click it</button><br><br>

<script>
    function use_idname() {
        var x = document.links.namedItem("Link").href;
        document.getElementById("demo3").innerHTML = x;
    }
</script>

In above example when i  click the button it will display the URL of the element with id="Link".


Example(4)


        <a href="https://blog.bajarangisoft.com/blogs">
            <img src="../image/demo1.jpg" alt="girl" width="152" height="128">
        </a>
        <a href="https://blog.bajarangisoft.com/blogs">
            <img id="black_girl" src="../image/demo2.jpg" alt="girl" width="152" height="128">
        </a>
        <a href="https://blog.bajarangisoft.com/blogs">
            <img src="../image/demo3.jpg" alt="girl" width="152" height="128">
        </a>
        <h3>To learn more about Java Script Visit Our <a href="https://blog.bajarangisoft.com/blogs">Bajarangisoft</a></h3>
        <h3><a id="Link" href="https://blog.bajarangisoft.com/blogs">JavaScript</a></h3>
       
<button class="btn btn-primary" type="button" onclick="make_border()">Click it</button><br><br>
<script>
    function make_border() {
        document.links[4].style.border = "5px solid red";
    }  
</script>

In above example when i Click the button it will add a red border to the first link in the document.



Example(5)
        <a href="https://blog.bajarangisoft.com/blogs">
            <img src="../image/demo1.jpg" alt="girl" width="152" height="128">
        </a>
        <a href="https://blog.bajarangisoft.com/blogs">
            <img id="black_girl" src="../image/demo2.jpg" alt="girl" width="152" height="128">
        </a>
        <a href="https://blog.bajarangisoft.com/blogs">
            <img src="../image/demo3.jpg" alt="girl" width="152" height="128">
        </a>
        <h3>To learn more about Java Script Visit Our <a href="https://blog.bajarangisoft.com/blogs">Bajarangisoft</a></h3>
        <h3><a id="Link" href="https://blog.bajarangisoft.com/blogs">JavaScript</a></h3>
       
        <h2 id="demo4"></h2>
        <button class="btn btn-primary" type="button" onclick="loops()">Click it</button><br><br>
   
<script>
    function loops() {
        var x = document.links;
        var txt = "";
        var i;
        for (i = 0; i < x.length; i++) {
            txt = txt +  x[i].href + "<br>";
        }
        document.getElementById("demo4").innerHTML = txt;
    }
</script>

In above example when i click the button it will display the URL of each link in the document.


Complete code for finding links present in document using java script

<!DOCTYPE html>
<html>
<head>
    <title>Get HTML DOM Links Collection In JavaScript</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<style>
    h1 {
        color: red;
    }
</style>
<body>
<div class="container">
    <br>
    <br>
    <div class="text-center">
        <h1>Get HTML DOM Links Collection In JavaScript</h1>
    </div>
    <br>
    <div class="well">
        <a href="https://blog.bajarangisoft.com/blogs">
            <img src="../image/demo1.jpg" alt="girl" width="152" height="128">
        </a>
        <a href="https://blog.bajarangisoft.com/blogs">
            <img id="black_girl" src="../image/demo2.jpg" alt="girl" width="152" height="128">
        </a>
        <a href="https://blog.bajarangisoft.com/blogs">
            <img src="../image/demo3.jpg" alt="girl" width="152" height="128">
        </a>
        <h3>To learn more about Java Script Visit Our <a href="https://blog.bajarangisoft.com/blogs">Bajarangisoft</a></h3>
        <h3><a id="Link" href="https://blog.bajarangisoft.com/blogs">JavaScript</a></h3>
        <br>
        <br>
        <h2 id="demo1"></h2>
        <button class="btn btn-primary" type="button" onclick="count_links()">Click it</button><br><br>
        <br>
        <h2 id="demo2"></h2>
        <button class="btn btn-primary" type="button" onclick="get_single_url()">Click it</button><br><br>

        <h2 id="demo3"></h2>
        <button class="btn btn-primary" type="button" onclick="use_idname()">Click it</button><br><br>


        <button class="btn btn-primary" type="button" onclick="make_border()">Click it</button><br><br>
        <h2 id="demo4"></h2>
        <button class="btn btn-primary" type="button" onclick="loops()">Click it</button><br><br>
    </div>
    <br>
</div>
</body>
</html>
<script>
    function count_links() {
        var x = document.links.length;
        document.getElementById("demo1").innerHTML = x;
    }
    function get_single_url() {
        var x = document.links[0].href;
        document.getElementById("demo2").innerHTML = x;
    }
    function use_idname() {
        var x = document.links.namedItem("Link").href;
        document.getElementById("demo3").innerHTML = x;
    }
    function make_border() {
        document.links[4].style.border = "5px solid red";
    }
    function loops() {
        var x = document.links;
        var txt = "";
        var i;
        for (i = 0; i < x.length; i++) {
            txt = txt +  x[i].href + "<br>";
        }
        document.getElementById("demo4").innerHTML = txt;
    }
</script>

Related Post