How To Get HTML DOM Links Collection In JavaScript

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

How To Define Custom Collection In Laravel With Example
What Are The Resource Collection In Laravel With Example
How Can I Create Register Form By Using Html and Css and Bootstrap
How To Create a Register From Just by Using Html and Css and Bootstrap
How Can HTML DOM Images Collection Done Using JavaScript
How To Design a Register Form Easily By Using Html and Css and Bootstrap
Design Valid and Invalid Register Form By Using Html and Css and bootstrap
How Can We understand The HTML Code
How To Get HTML DOM Links Collection In JavaScript
How Many Types Of Links Are Present In HTML
How To a Text Links Colors and Background colors In Bootstrap
How To Set Cursor Style To Pointer For Links Without Href
How Can I Set Styling Links Using CSS With Example
How To Create Collection of Animation Hover Effects Buttons Using Css