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

Question

我有以下 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了，但这显然不起作用。

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

Answer 1

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

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

而对于选择<a>里面的标签<p class="xyz-title">你需要使用这个代码：

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

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

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

小提琴：http: //jsfiddle.net/praveenscience/DZhRv/

Answer 2

.innerHTML会给你元素的内容，而不是任何属性的值。.href会给你href价值。

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

要选择锚元素，请尝试：

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

或者，更简单：

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

演示：http: //jsfiddle.net/6Pg43/

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

Answer 3

Working FIDDLE Demo

尝试这个：

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