如何使用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>​]

任何建议都非常感激。

- Ming

Answer 1

在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>

- cнŝdk

---

谢谢。完美地运作了。虽然，我尝试了这个并且它也起作用了。 var url = document.querySelector('.central-featured-lang.lang1 a').href; 这会是更好的选择吗？ - Ming

@Ming，这个第二个选择器是获取你的 div 内所有链接元素，而第一个选择器只获取其 href 结尾为 ".org/" 的链接，这是唯一的区别。但在这里，由于只有一个链接，它们将给出相同的结果。 - cнŝdk

Answer 2

使用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>

- Gildas.Tambo

---

谢谢答案。它也能运行，但@chsdk的回答更简洁。 尝试了你的代码。可以用这个来完成。 var element = document.querySelector('a.link-box').href; 我也给你的回答点了赞。 - Ming

Answer 3

使用 .attr() 方法：

了解更多

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<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>

- Roko C. Buljan

---

我在Chrome控制台中尝试了一下，但是出现了错误： VM243:2 Uncaught TypeError: $(...).attr is not a function(…)(anonymous function) @ VM243:2InjectedScript._evaluateOn @ VM99:878InjectedScript._evaluateAndWrap @ VM99:811InjectedScript.evaluate @ VM99:667 我已经在帖子中附上了错误信息的截图。 - Ming

我刚刚注意到这里使用了jquery。这是不是意味着我需要在所有的脚本中都导入jquery呢？直接使用本地的css选择器js会不会更简单呢？非常感谢您的建议。如何在Chrome控制台中导入Jquery？ - Ming