Open In App
Related Articles

HTML DOM Anchor Object

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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>

                    

Output:

anchor-object-2

Supported Browsers:

  • Google Chrome
  • Firefox
  • Internet Explorer
  • Opera
  • Safari

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks 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!


Last Updated : 02 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads
Complete Tutorials