HTML DOM Anchor Object

Last Updated : 02 Jan, 2024

The Anchor Object in HTML DOM is used to represent the <a> element. The anchor element can be accessed by using getElementById() method.

Syntax:

document.getElementById("ID");

Where ID is assigned to the anchor tag.

Property Values:

Property	Description
charset	Set or return the character set. It is not supported by HTML 5.
download	Set or return the target link to download when the user clicks.
hreflang	Set or return the language of the linked document.
media	Set or return the linked media.
coords	Set or return the coordinate of links.
name	Set or return the anchor name.
rel	Set or return the relation between the current document and linked document.
shape	Set or return the shape of link.
type	Set or return the type of links.
target	Set or return the target link.
rev	Set or return the relation between linked document and current document.

Example 1: This example describes the getElementById() method to access <a> element.

html

<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML DOM Anchor Object
    </title>
</head>
 
<body style="text-align: center;">
    <h1>GeeksforGeeks</h1>
 
    <h2>DOM Anchor Object</h2>
 
    <p>Welcome to
        <a href="https://www.geeksforgeeks.org/"
            id="GFG">
            GeeksforGeeks
        </a>
    </p>
 
    <button onclick="myGeeks()">
        Submit
    </button>
 
    <p id="sudo"></p>
 
    <script>
        function myGeeks() {
            let x = document.getElementById("GFG").href;
            document.getElementById("sudo").innerHTML = x;
        } 
    </script>
</body>
 
</html>

Output:

anchor-object

Example 2: Anchor Object can be created by using the document.createElement() Method.

html

<!DOCTYPE html>
<html>
 
<head>
    <title>HTML DOM Anchor Object</title>
</head>
 
<body style="text-align: center;">
    <h1>GeeksforGeeks</h1>
 
    <h2>DOM Anchor Object</h2>
 
    <p id="GFG">Welcome to </p>
 
    <button onclick="myGeeks()">
        Submit
    </button>
 
    <!-- Script to describe anchor object -->
    <script>
        function myGeeks() {
 
            /* Create anchor tag */
            let anchor = document.createElement("a");
            let text = document.createTextNode("GeeksforGeeks");
            anchor.setAttribute("href", 
                "https://www.geeksforgeeks.org/");
            anchor.appendChild(text);
            document.getElementById("GFG").appendChild(anchor);
        } 
    </script>
</body>
 
</html>