简体   繁体   English

在<a>没有 jQuery 的情况下</a>获取<a>标签</a>的 href 属性值

[英]Get value of href attribute of <a> tag without jQuery

Is any way, how to without jQuery get from string value of href attribute in "a" tag?有什么办法,没有jQuery如何从“a”标签中href属性的字符串值中获取? I have got string with (for example) this content - <a href="www.something"> .我有(例如)这个内容的字符串 - <a href="www.something">

How can I get value of href attribute to variable?如何获取变量的 href 属性值?

I have got string with (for example) this content - <a href="www.something">我有(例如)这个内容的字符串- <a href="www.something">

If it is actually in a string as follows:如果它实际上在一个字符串中,如下所示:

var s = '<a href="www.something">';

Then you can use a regex with the .match() method :然后你可以在.match()方法中使用正则表达式:

var href = s.match(/href="([^"]*)/)[1];
// href is now www.something

If it is an element on your page then have a look at TJ Crowder's answer (no need for me to duplicate that information here).如果它是您页面上的一个元素,请查看TJ Crowder 的回答(我无需在此处复制该信息)。

If you really have that as a string , then refer to nnnnnn's answer .如果您确实将其作为字符串请参阅 nnnnnn 的回答

Or alternately, if you're in the browser environment:或者,如果您在浏览器环境中:

var str = '<a href="www.something">';
var div = document.createElement('div');
div.innerHTML = str + "</a>"; // Make it a complete tag
var link = div.firstChild.getAttribute("href");

If you have an actual element on a page created via that markup, then:如果您在通过该标记创建的页面上有一个实际元素,则:

If you have a reference to the element, you can get the href from it like this:如果您有对元素的引用,则可以像这样从中获取href

var link = theElement.href;
// or
var link = theElement.getAttribute("href");

Getting it via getAttribute returns the actual attribute's value rather than the fully-qualified version, and the href reflected property gets the fully-qualified version (eg, relative links get expanded).通过getAttribute获取它返回实际属性的值而不是完全限定版本,并且href反射属性获取完全限定版本(例如,扩展相关链接)。

Getting a reference to the element is a broad topic.获取对元素的引用是一个广泛的主题。 If it has an id , you can use getElementById .如果它有一个id ,你可以使用getElementById Or if you're responding to an event and the event is happening on an element near the one you want, you can use various DOM properties and methods to navigate to it.或者,如果您正在响应一个事件并且该事件发生在您想要的元素附近,您可以使用各种DOM 属性和方法导航到它。 With a lot of modern browsers , you can use CSS selectors and either querySelector (find one element) or querySelectorAll (a list).对于许多现代浏览器,您可以使用 CSS 选择器和querySelector (查找一个元素)或querySelectorAll (一个列表)。

For instance, this gives you the href of the first link on the page that has the class "foo" :例如,这为您提供了页面上具有"foo"类的第一个链接的href

console.log(document.querySelector("a.foo").href);

Full example: Live Copy |完整示例: Live Copy | Live Source直播源

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Getting the Link</title>
</head>
<body>
  <a id="theLink" href="/relative/link">Link</a>
  <script>
    (function() {
      var theLink = document.getElementById("theLink");
      display("<code>href</code> property: " + theLink.href);
      display("<code>getAttribute('href')</code>: " +
              theLink.getAttribute("href"));

      function display(msg) {
        var p = document.createElement('p');
        p.innerHTML = String(msg);
        document.body.appendChild(p);
      }
    })();
  </script>
</body>
</html>

The following code will loop over all <a/> elements and log their href value (if they have one):以下代码将遍历所有<a/>元素并记录它们的href值(如果有):

var anchors = document.getElementsByTagName('a');
var i, len = anchors.length;

for( i = 0; i < len; i++ ) {
    console.log(anchors[i].getAttribute('href'));
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM