获取 Javascript 中某个类中链接的 HREF 值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18562718/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get value of HREF for links within a certain Class in Javascript
提问by Lewis Boyles-White
I'm trying to process a page to find the value of href's within a certain div class. Please bear in mind I'm not using the class of the <a>.
我正在尝试处理一个页面以在某个 div 类中查找 href 的值。请记住，我没有使用<a>.
Here is what I have:
这是我所拥有的：
var domains = document.getElementsByClassName('r');
for(var i = 0; i < domains.length; i++){
var hello = document.getElementsByClassName('r')[i].innerHTML;
alert(hello);
}
This works fine and will "alert" the content within the class. (I know this isn't well supported in IE but that's fine).
这很好用，并且会“提醒”班级中的内容。（我知道这在 IE 中没有得到很好的支持，但这很好）。
I get an alert like:
我收到如下警报：
<a href="http://stackoverflow.com/questions/887307/getting-href-value-of-from-a-tag" onmousedown="return rwt(this,'','','','1','AFQjCNGsxCA6nMXughTW44nSEa94KtbEaQ','','0CC8QFjAA','','',event)"> <em>javascript</em> - <em>getting href</em> value of from <a> tag - Stack Overflow</a>
What's the best way to get the value within the href?
在 href 中获取值的最佳方法是什么？
The HTML is like this:
HTML 是这样的：
<h3 class="r"><a onmousedown="return rwt(this,'','','','1','AFQjCNFgNBuo2EfLPoNBi3hGgbuTeLwODw','','0CC8QFjAA','','',event)" href="http://www.google.co.uk/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&ved=0CC8QFjAA&url=http%3A%2F%2Fwww.w3schools.com%2Fjsref%2Fprop_html_innerhtml.asp&ei=LacjUo4lw9m0BpLVgYAK&usg=AFQjCNFgNBuo2EfLPoNBi3hGgbuTeLwODw&bvm=bv.51495398,d.Yms"> … </a></h3>
回答by Matt Ball
Use Element.attributesinstead of Element.innerHTML. With your HTML you also need to use an inner loop to get <a>children of .relements:
使用Element.attributes代替Element.innerHTML。对于 HTML，您还需要使用内部循环来获取元素的<a>子.r元素：
var domains = document.getElementsByClassName('r');
for(var i = 0; i < domains.length; i++){
var anchors = domains.getElementsByTagName('a');
for (var j = 0; j < anchors.length; j++) {
alert(anchors[j].attributes.href);
}
}
or you could switch to Element.querySelectorAll()for a nicer querying API:
或者您可以切换到Element.querySelectorAll()更好的查询 API：
var anchors = document.querySelectorAll('.r > a');
for (var i = 0; i < anchors.length; i++) {
alert(anchors[i].attributes.href);
}
Note that I reused the domainsvariable since there's no reason to keep re-querying the DOM at every loop iteration.
请注意，我重用了该domains变量，因为没有理由在每次循环迭代时都重新查询 DOM。
回答by Alex
Try something like (http://jsfiddle.net/JMsYk/):
尝试类似（http://jsfiddle.net/JMsYk/）：
var domains = document.getElementsByClassName('r');
for (var i = 0; i < domains.length; i++) {
var links = domains[i].getElementsByTagName('A');
for (var j in links) {
alert(links[j].attributes['href'].value);
}
}
回答by davidaam
I haven't tried it but you could do something like this:
我还没有尝试过，但你可以这样做：
var domains = document.getElementsByClassName('r');
for(var i = 0; i < domains.length; i++){
var hello = domains[i].getElementsByTagName('a');
//Just in case there's more than one anchor inside a div
for (j = 0; j < hello.length; j++) {
// do anything with hello[j].attributes.href (the href of each anchor)
alert(hello[j].attributes.href);
}
//If you just have an anchor inside each h3 then simply
alert(hello.attributes.href);
}
domains already returns a list with all the h3 with class 'r' so inside the loop you can access each div as domains[i], then you get a list with all anchors inside the current h3, then loop through them (in case there's more than one inside a div), and alert the href of each anchor
域已经返回了一个包含所有类 'r' 的 h3 的列表，因此在循环内您可以将每个 div 作为域 [i] 访问，然后您将获得一个包含当前 h3 内所有锚点的列表，然后遍历它们（以防万一div 中不止一个），并提醒每个锚点的 href
