如何使用CSS选择器获取href文本

Question

我在维基百科主页https://www.wikipedia.org/下面有以下HTML。我正在尝试获取href文本

//en.wikipedia.org/

<div class="central-featured-lang lang1" lang="en">
<a href="//en.wikipedia.org/" title="English — Wikipedia — The Free Encyclopedia" class="link-box">
<strong>English</strong><br>
<em>The Free Encyclopedia</em><br>
<small>5&nbsp;077&nbsp;000+ articles</small>
</a>
</div>

我已经尝试了这个$$('.central-featured-lang.lang1 a[href$=".org/"]')，但我仍然得到了整个输出，而不仅仅是href文本。

[<a href=​"/​/​en.wikipedia.org/​" title=​"English — Wikipedia — The Free Encyclopedia" class=​"link-box">​…​</a>​<strong>​English​</strong>​<br>​<em>​The Free Encyclopedia​</em>​<br>​<small>​5&nbsp;077&nbsp;000+ articles​</small>​</a>​]

非常感谢任何建议。

Answer 1

使用DOM元素getAttribute()方法

  

getAttribute（）返回元素上指定属性的值。如果给定属性不存在，则返回值   将为null或“”（空字符串）;有关详细信息，请参阅注释。

var element = document.querySelector('a.link-box'),
       link = element.getAttribute('href');

alert(link)

<div class="central-featured-lang lang1" lang="en">
  <a href="//en.wikipedia.org/" title="English — Wikipedia — The Free Encyclopedia" class="link-box">
    <strong>English</strong>
    <br>
    <em>The Free Encyclopedia</em>
    <br>
    <small>5&nbsp;077&nbsp;000+ articles</small>
  </a>
</div>

Answer 2

在Javascript中，您可以使用 document.querySelector 以及href属性，如下所示：

var url = document.querySelector('.central-featured-lang.lang1 a[href$=".org/"]').href;
alert(url);

<div class="central-featured-lang lang1" lang="en">
  <a href="//en.wikipedia.org/" title="English — Wikipedia — The Free Encyclopedia" class="link-box">
    <strong>English</strong>
    <br>
    <em>The Free Encyclopedia</em>
    <br>
    <small>5&nbsp;077&nbsp;000+ articles</small>
  </a>
</div>

Answer 3

使用.attr() Method:

fi

$('.central-featured-lang.lang1 a[href$=".org/"]').attr("href")

var url = $('.central-featured-lang.lang1 a[href$=".org/"]').attr("href");
alert( url );