HTML | DOM Anchor Object

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:

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

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html
  
<head
    <title>
        HTML DOM Anchor Object
    </title
</head
      
<body
    <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() {
                var x = document.getElementById("GFG").href;
                document.getElementById("sudo").innerHTML = x;
            }
        </script>
    </center>
</body
</html>                                 

chevron_right


Output:
Before Click on the Button :

After Click on the Button :

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html
  
<head
    <title>
        HTML DOM Anchor Object
    </title
</head
      
<body
    <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 */
                var g = document.createElement("A");
                var f = document.createTextNode("GeeksForGeeks");
                g.setAttribute("href", "https://www.geeksforgeeks.org/");
                g.appendChild(f);
                document.getElementById("gfg").appendChild(g);
            }
        </script>
    </center>
</body
  
</html>                                

chevron_right


Output:
Before Click on the Button :

After Click on the Button:

Supported Browsers: The browser supported by DOM Anchor Object are listed below:

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


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.