在Javascript中获取特定类别链接的HREF值

Question

我正在尝试处理一个页面，以查找特定

内的href值。请记住，我没有使用<a>的类。

以下是我的代码：

var domains = document.getElementsByClassName('r');
for(var i = 0; i < domains.length; i++){
var hello = document.getElementsByClassName('r')[i].innerHTML;
alert(hello);
}

这个方法很好用，可以“alert”类中的内容。（我知道这在IE浏览器中支持不是很好，但这没关系）

我会得到一个像这样的提示框：

<a href="https://dev59.com/wXNA5IYBdhLWcg3wn_bD"    onmousedown="return     rwt(this,'','','','1','AFQjCNGsxCA6nMXughTW44nSEa94KtbEaQ','','0CC8QFjAA','','',event)">    <em>javascript</em> - <em>getting href</em> value of from &lt;a&gt; tag - Stack Overflow</a>

如何获取 href 中的值是最好的方式呢？

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>

- Lewis Boyles-White

Answer 1

使用 Element.attributes 代替 Element.innerHTML。对于你的HTML，你还需要使用一个内部循环来获取 .r 元素的 <a> 子元素。

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);
    }
}

或者你可以切换到 Element.querySelectorAll()，以获得更好的查询 API：

var anchors = document.querySelectorAll('.r > a');
for (var i = 0; i < anchors.length; i++) {
    alert(anchors[i].attributes.href);
}

请注意，我重复使用了domains变量，因为没有必要在每个循环迭代中不断重新查询DOM。

- Matt Ball

---

感谢所有的建议，我遵循Sanja的代码片段使用了以下代码：var domains = document.getElementsByClassName('r'); for (var i = 0; i < domains.length; i++) { var links = domains[i].getElementsByTagName('A'); alert(links[0].attributes['href'].value); }来显示具有单一href的多个类别的域名。谢谢。 - Lewis Boyles-White

既然你说你不特别关心兼容性，那么document.querySelectorAll()确实可以简化这段代码。 - Matt Ball

第二个代码块非常适合我在这个项目中所需的功能。 - WinEunuuchs2Unix

Answer 2

尝试这样做（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);
  }
}

- Alex

---

使用以下代码：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']); } }会弹出一个警告，内容为：[object Attr]。 - Lewis Boyles-White

Answer 3

我没有尝试过，但你可以像这样做：

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已经返回一个带有所有class为'r'的h3的列表，因此在循环内部，您可以将每个div作为domains[i]进行访问，然后获取当前h3内所有锚点的列表，然后遍历它们（如果有多个在一个div内），并警报每个锚点的href

- davidaam

Answer 4

为此，您可以将链接包装成类，如下所示：

<li class="list-values">
  <a href="/getting-href-value">Getting Href Value</a>
</li>
<li class="list-values">
  <a href="/other-link">Other Link</a>
</li>

执行 JavaScript 代码 -

document.querySelector("li.list-values > a[href='/getting-href-value']");

请注意，我使用了 'querySelector（）' 来选择一个值。您还可以使用相同的查询使用 querySelectorAll（）来选择所有内容。

- Adwin