如何<a>使用javascript</a>读取html“ <a>”标签中的</a>所有href链接
[英]How to read all href link in html “<a>” tag using javascript
问题描述
I need to get all href link values using javascript. 
我需要使用javascript获取所有href链接值。 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. 但如果我在下面的代码中使用了原生的javascript，则只会显示第一个项目。
<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? 当我使用javascript显示项目时，为什么我只获得一个输出？ I tested it using their file extensions since I splitted the files. 我使用他们的文件扩展名测试了它，因为我拆分了文件。 Any Idea What is missing on the javascript? 任何想法javascript上缺少什么？ I just want to continuously display(Alert) the items. 我只是想连续显示（提醒）项目。 My problem is, It only display the first item. 我的问题是，它只显示第一项。
5 个解决方案
解决方案1
6 2013-10-31 23:14:57
You can get a NodeList of all a elements using document.getElementsByTagName . 你可以得到一个NodeList所有的a使用元素document.getElementsByTagName 。 That list has a length , and you can index into it with [] . 该列表有一个length ，您可以使用[]索引它。 Eg: 例如：
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: 在现代浏览器中 ，如果你想进一步限制它（例如，只有链接带有download-link类download-link ），你可以使用querySelectorAll ，它接受一个CSS选择器：
var links = document.querySelectorAll('a.download-link');
// ...and then use it the same way as above
解决方案2
1 2013-10-31 23:19:53
You're fetching only one element with a specific ID. 您只获取一个具有特定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>
解决方案3
1 2013-10-31 23:22:35
document.getElementById() returns the object for a single unique element identified by an id attribute. document.getElementById()返回由id属性标识的单个唯一元素的对象。 You are looking to get all the objects that share a common class and for that you'll need something like document.getElementsByTagName() . 您希望获得共享一个公共class所有对象，并且您需要像document.getElementsByTagName()这样的东西。
解决方案4
0 2013-10-31 23:22:14
getElementById() retrieves only one object as there can be only one object with a given id . getElementById()只检索一个对象，因为只能有一个具有给定id对象。 But none of those have ids to begin with. 但是没有一个有ids开始。
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. 您可以使用getElementsByTagName('a')作为已经建议，但会检索所有的列表a页面中的标签和aparently，是不是你真正想要的。
I guess you should go with the third option getElementsByClassName() : 我想你应该使用第三个选项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'));
解决方案5
0 2013-11-01 00:52:38
You can call the array method map on the document.links collection. 您可以在document.links集合上调用数组方法映射 。
The String value of a link element its url. 链接元素的String值为其url。
var hrefs= [].map.call(document.links,String);
alert(hrefs.join('\n'));
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.