CODEWITHSUNDEEP
javascripthtml
Jarich
Jarich

Reputation: 337

How to read all href link in html "<a>" tag using javascript

I need to get all href link values using javascript. I have this code,

<body onload="myFunction()">
<div class="pull-right">
    <a class="download-link" id="download_link" href="%file_url%">Download</a>
</div>
</body>

It shows like this

<a class="download-link" href="http://mysite.com/download/myfiles/file1.pdf">Download</a>
<a class="download-link" href="http://mysite.com/download/myfiles/file2.docx">Download</a>
<a class="download-link" href="http://mysite.com/download/myfiles/file3.zip">Download</a>
<a class="download-link" href="http://mysite.com/download/myfiles/file4.html">Download</a>

but if I used a native javascript like on the code below, only the first item is shown.

<script type="text/javascript">
function myFunction()
{
var url = document.getElementById("download_link").href;
var ext = url.split('.').pop();
alert(ext);
}
</script>

Why I'm getting only one output when I used a javascript to display the items? I tested it using their file extensions since I splitted the files. Any Idea What is missing on the javascript? I just want to continuously display(Alert) the items. My problem is, It only display the first item.

Upvotes: 2

Views: 8197

Answers (5)

kennebec
kennebec

Reputation: 104810

You can call the array method map on the document.links collection.

The String value of a link element its url.

var hrefs= [].map.call(document.links,String);
alert(hrefs.join('\n'));

Upvotes: 0

Zoli
Zoli

Reputation: 1137

document.getElementById() returns the object for a single unique element identified by anid attribute. You are looking to get all the objects that share a commonclassand for that you'll need something likedocument.getElementsByTagName().

Upvotes: 1

Havenard
Havenard

Reputation: 27904

getElementById() retrieves only one object as there can be only one object with a given id. But none of those have ids to begin with.

You can use getElementsByTagName('a') as already suggested, but that would retrieve a list of all a tags in the page and aparently that is not what you really want.

I guess you should go with the third option getElementsByClassName():

var objs = document.getElementsByClassName('download-link');
var links = [];

for (var i = 0; i < objs.length; ++i)
    links[i] = objs[i].href;

alert(links.join('\n'));

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1075149

You can get a NodeList of all a elements using document.getElementsByTagName. That list has a length, and you can index into it with []. E.g.:

var links = document.getElementsByTagName('a');
var i;
for (i = 0; i < links.length; ++i) {
    // Do something with links[i].href
}

On modern browsers, if you wanted to limit that further (for instance, only links with the download-link class on them), you can use querySelectorAll, which accepts a CSS selector:

var links = document.querySelectorAll('a.download-link');
// ...and then use it the same way as above

Upvotes: 7

matewka
matewka

Reputation: 10158

You're fetching only one element with a specific ID. You need to get all anchor elements

<script>
function myFunction()
{
    var anchors = document.getElementsByTagName('a');
    for (var i = 0; i < anchors.length; i++) {
        var url = anchors[i].href;
        alert(url.split('.').pop());
    }
}
</script>

Upvotes: 1

Related Questions