不使用jQuery获取<a>标签的href属性值

Question

不使用jQuery获取<a>标签的href属性值

javascripthref

11

有没有一种方法，可以在没有使用jQuery的情况下，从"a"标签中获取href属性的字符串值？我有一个字符串，内容如下- <a href="www.something">。如何将href属性的值存储到变量中？

- user2316602

你是从字符串还是DOM元素开始的？如果你有DOM元素，只需执行var href = a.href;。 - Denys Séguret

3个回答

11

如果你手上确实有这个字符串{as a string}，那么参考nnnnnn的回答。

或者，如果你在浏览器环境中:

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

如果页面上有通过该标记创建的实际元素，则可以执行以下操作：

如果您拥有对该元素的引用，则可以像这样从中获取href：href。

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

通过getAttribute获取它会返回实际属性的值，而不是完全合格的版本，而href反映属性获取完全合格的版本（例如，相对链接被扩展）。

获取元素的引用是一个广泛的主题。如果它有一个id，您可以使用getElementById。或者，如果您正在响应事件，并且事件发生在您想要的元素附近，您可以使用各种DOM属性和方法进行导航。使用许多现代浏览器，您可以使用CSS选择器和querySelector（查找一个元素）或querySelectorAll（列表）。

例如，这将为您提供页面上第一个具有类"foo"的链接的href：

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

完整示例：现场副本 | 现场源代码

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

- T.J. Crowder

1

以下代码将循环遍历所有的<a/>元素，并记录它们的href值（如果有的话）：

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

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

- André Dion

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- nnnnnn · Accepted Answer

我有一个字符串，内容如下（例如） - <a href="www.something">

如果它实际上是一个字符串，形式如下：

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

然后你可以使用带有.match()方法的正则表达式：

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

如果它是您页面上的元素，则请查看T.J. Crowder的答案（无需在此处重复该信息）。