如何使用 javascript 读取 href 的内容？答案

【问题标题】：How to read the contents of a href with javascript?如何使用 javascript 读取 href 的内容？
【发布时间】：2013-05-23 16:11:29
【问题描述】：

我有以下 html，不知道如何阅读 href 标记的内容？

<p class="xyz-title">
    <a href="http://www.youtube.com/embed/xyz">
        <span class="field-content">Title here</span>
    </a>
</p>

我尝试了document.getElementByClass('xyz-title')[0].innerHTML，但这显然不起作用。

非常感谢您为我指明了正确的方向。

【问题讨论】：

【解决方案1】：

这是一个语法错误。它应该是getElementsByClassName。改用这个：

document.getElementsByClassName('xyz-title')[0].innerHTML

而要在<p class="xyz-title"> 中选择<a> 标签，您需要使用以下代码：

document.getElementsByClassName('xyz-title')[0].children[0].href
document.getElementsByClassName('xyz-title')[0].getElementsByTagName('a')[0].href

或者，您可以简单地使用：

document.getElementsByTagName('a')[0].href

【讨论】：

【解决方案2】：

.innerHTML 会给你元素的内容，而不是任何属性的值。 .href 将为您提供 href 值。

您尝试使用getElementByClass()，因为没有这样的功能-您想要getElementsByClassName()（根据您添加到问题中的标签），一个返回列表的函数，因此您确实需要[0]拿到第一个。

要选择锚元素，请尝试：

document.getElementsByClassName('xyz-title')[0].getElementsByTagName('a')[0].href

或者，更简单：

document.querySelector('.xyz-title a').href

请注意，如果元素不存在，任何一种方式都会出错。

【讨论】：

【解决方案3】：

Working FIDDLE Demo

试试这个：

var href = document.getElementsByClassName('xyz-title')[0].getElementsByTagName('a')[0].href;
alert(href);

【讨论】：