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

【问题标题】：How to get href Text using CSS selectors如何使用 CSS 选择器获取 href 文本
【发布时间】：2016-08-24 00:21:25
【问题描述】：

我有以下来自维基百科主页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>]

非常感谢任何建议。

【问题讨论】：

标签： javascript html css-selectors

【解决方案1】：

使用.attr() Method:

$('.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>

【讨论】：

我在 Chrome 控制台中尝试过。但我收到错误VM243:2 Uncaught TypeError: $(...).attr is not a function(…)(anonymous function) @ VM243:2InjectedScript._evaluateOn @ VM99:878InjectedScript._evaluateAndWrap @ VM99:811InjectedScript.evaluate @ VM99:667 我已在帖子中附上了错误消息屏幕截图
我刚刚注意到这是使用 jquery。这是否意味着我必须将 jquery 导入我的所有脚本。在本机 css 选择器 js 中执行它会不会那么复杂。非常感谢您的建议。如何在 Chrome 控制台中导入 Jquery。

【解决方案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>

【讨论】：

感谢您的回答。它适用于但@chsdk 更简洁。试过你的代码。本来可以这样做的。 var element = document.querySelector('a.link-box').href;我也赞成你的回答。

【解决方案3】：

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

【讨论】：

谢谢。完美地工作。虽然，我试过这个，它也有效。 var url = document.querySelector('.central-featured-lang.lang1 a').href;这是更好的选择吗？
@Ming，第二个选择器获取 div 中的所有链接元素，而第一个选择器仅获取其 href 以 ".org/" 结尾的链接，这是唯一的区别。但是在这里，因为您只是一个链接，所以它们会给出相同的结果。