javascript 在没有 jQuery 的情况下获取 <a> 标签的 href 属性值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17488600/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get value of href attribute of <a> tag without jQuery
提问by user2316602
Is any way, how to without jQuery get from string value of href attribute in "a" tag?
I have got string with (for example) this content - <a href="www.something">.
无论如何，如何在没有 jQuery 的情况下从“a”标签中的 href 属性的字符串值中获取？我有（例如）这个内容的字符串 - <a href="www.something">。
How can I get value of href attribute to variable?
如何获取变量的 href 属性值？
回答by nnnnnn
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 T.J. Crowder's answer(no need for me to duplicate that information here).
如果它是您页面上的一个元素，请查看TJ Crowder 的回答（我无需在此处复制该信息）。
回答by T.J. 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 hreffrom it like this:
如果您有对元素的引用，则可以href像这样从中获取：
var link = theElement.href;
// or
var link = theElement.getAttribute("href");
Getting it via getAttributereturns the actual attribute's value rather than the fully-qualified version, and the hrefreflected property gets the fully-qualified version (e.g., 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. 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 methodsto navigate to it. With a lot of modern browsers, you can use CSS selectors and either querySelector(find one element) or querySelectorAll(a list).
获取对元素的引用是一个广泛的主题。如果它有id，您可以使用getElementById. 或者，如果您正在响应一个事件并且该事件发生在您想要的元素附近，您可以使用各种DOM 属性和方法导航到它。对于许多现代浏览器，您可以使用 CSS 选择器和querySelector（查找一个元素）或querySelectorAll（列表）。
For instance, this gives you the hrefof the first link on the page that has the class "foo":
例如，这为您href提供了页面上具有类的第一个链接的"foo"：
console.log(document.querySelector("a.foo").href);
Full example: 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>
回答by André Dion
The following code will loop over all <a/>elements and log their hrefvalue (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'));
}
