Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to find the href attribute of a link in a document in JavaScript?
In this following article we are going to learn how to find the href attribute of a link in a document in JavaScript.
The DOM property in the JavaScript provides many properties like <head>, <title>, <body>, <link>, <a>, <style>. There are two ways we can represent the links in HTML DOM. The DOM object provides links property.
The href attribute in the anchor tag specifies the URL. To get the href attribute, we need to find the anchor object reference.
To get a better idea of this concept, let’s look into the syntax and usage of the href attribute of an anchor object further in the article.
Syntax
The syntax to get the href attribute of an anchor object is shown below.
anchorObject.href
Example 1
The following is an example program to get the href attribute of an anchor object by using getElementsByTagName() and getElementByID() methods.
<!DOCTYPE html>
<html>
<head>
<title>To find the href attribute of a link in a document in JavaScript</title>
</head>
<body style="text-align : center">
<h3>To find the href attribute of a link in a document in JavaScript</h3>
<a name="Google" href="https://www.google.com/" title="Home page for Google">Google</a><br>
<a name="Facebook" href="https://www.facebook.com/" title="Home Page for Facebook">Facebook</a><br>
<a name="Youtube" href="https://www.youtube.com/" title="Home Page for Youtube">Youtube</a><br>
<p id="text1"></p>
<script>
document.getElementById("text1").innerHTML = "The link for first anchor element is : "+document.getElementsByTagName("a")[0].href+"<br/>"+" The link for the id 'yo' is : "+document.getElementById('yo').href;
</script>
</body>
</html>
On executing the above code, the following output is generated.
Example 2
The following is an example program to get the href attribute of an anchor object by using querySelector() method.
<!DOCTYPE html>
<html>
<head>
<title>To find the href attribute of a link in a document in JavaScript</title>
</head>
<body style="text-align : center">
<h3>To find the href attribute of a link in a document in JavaScript</h3>
<a name="Google" href="https://www.google.com/" title="Home page for Google">Google</a><br>
<a name="Facebook" href="https://www.facebook.com/" title="Home Page for Facebook">Facebook</a><br>
<a name="Youtube" href="https://www.youtube.com/" title="Home Page for Youtube">Youtube</a><br>
<p id="text1"></p>
<script>
// The document.querySelector('a') will return the first element within the document that matches the specified selector.
document.getElementById("text1").innerHTML = "The link for the first anchor element is : "+document.querySelector('a').href;
</script>
</body>
</html>
On executing the above code, the following output is generated.
Example 3
The following is an example program to get all the href tag links inside a document.
<!DOCTYPE html>
<html>
<head>
<title>To get all the href links in a document in JavaScript</title>
</head>
<body style="text-align : center">
<h3>To display all the href links in a document in JavaScript</h3>
<a name="google" href="https://www.google.com/" title="Google Home Page">Google</a><br>
<a name="Facebook" href="https://www.facebook.com/" title="Home Page for Facebook">Facebook</a><br>
<a name="youtube" href="https://www.youtube.com/" title="Youtube Home Page">Youtube</a><br>
<p id="text1"></p>
<script>
var result="";
for(var i=0;i<document.links.length;i++){
result += "Title "+(i+1)+" : "+document.getElementsByTagName('a')[i].title+"<br/>"+" Link "+(i+1)+" : "+document.links[i].href+"<br/>";
}
document.getElementById("text1").innerHTML = "The links in the document are : "+'<br/>'+result;
</script>
</body>
</html>
On executing the above code, the following output is generated.
2K+ Views
