Wednesday, July 3, 2024
HomeLanguagesJavascriptDisplay the number of links present in a document using JavaScript

Display the number of links present in a document using JavaScript

Any webpage that is loaded in the browser can be represented by the Document interface. This serves as an entry point to the DOM tree and the DOM tree contains all elements such as <body> , <title>, <table> ,<a> etc. We can create a Document object using the Document() constructor. 

There are many properties of these Document objects. One such property is links. The links property gives us a collection of all <area> elements and <a> elements in a document. One more property is the length property. The length property tells us the number of links present in the document.links array. 

So, the document.links.length statement gives us the number of links present in a document. Below HTML document contains a JavaScript piece of code that tells the number of links present in the document.

Example 1: In this example, we will print the count of links on the console.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        Display the number of links present
        in a document using JavaScript
    </title>
</head>
 
<body>
    <h1 style="color: green;">
        neveropen
    </h1>
     
    <h3>
        Display the number of links present
        in document
    </h3>
 
    <a href="www.neveropen.co.za">
        neveropen Home Page
    </a>
     
    <a href="practice.neveropen.co.za">
        neveropen Practice
    </a>
 
    <script>
        console.log("Number of links: "
            + document.links.length);
    </script>
</body>
</html>


Output:

 

Example 2: In this example, we will print the number of links on the document.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        Display the number of links present
        in a document using JavaScript
    </title>
</head>
 
<body>
    <h1 style="color: green;">
        neveropen
    </h1>
 
    <h3>
        Display the number of links present
        in document
    </h3>
    <p>
        <a href="www.neveropen.co.za">
            neveropen Home Page
        </a>
    </p>
    <p>
        <a href="practice.neveropen.co.za">
            neveropen Practice
        </a>
    </p>
 
    <button onclick="fun()">
        Click Here to Get Number of Links
    </button>
 
    <p id="gfg"></p>
 
    <script>
        function fun() {
            document.getElementById('gfg')
                .innerHTML = "Number of links: " +
                document.links.length;
        }
    </script>
</body>
</html>


Output:

 

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!

Calisto Chipfumbu
Calisto Chipfumbuhttp://cchipfumbu@gmail.com
I have 5 years' worth of experience in the IT industry, primarily focused on Linux and Database administration. In those years, apart from learning significant technical knowledge, I also became comfortable working in a professional team and adapting to my environment, as I switched through 3 roles in that time.
RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments