如何用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);