获取某个元素的子元素的标题

我有一个JavaScript文件，它打印其中的子元素img的title属性。获取某个元素的子元素的标题

换句话说，我在a标记中有一个img标记。 img标记在其中包含title属性。我想获得这个属性。

这是我的JavaScript代码。 el变量是包含img元素的元素。

c.innerHTML += x + y + "<h1>" + el.childNodes[0].title +"</h1>" + z;

但是，由于某些原因，el.childNodes[0].title不起作用。它只是返回以下值：

undefined

我使用el.firstChild.title也试过了，但它仍然返回相同的值。

这里是我的HTML代码：

<a class="nanobox-img" href="index.html" rel="nanobox-single-override"> 
    <img src="../../images/testnull.gif" title="This is a NanoBox Demo"/> 
</a>

来源

2012-03-31 user1304379

由于元素中没有文本内容，所以它只会显示图片，为什么不给链接标题？ – kennebec 2012-03-31 04:24:45

而不是childNodes，请使用children。

el.children[0].title

这是因为大多数的浏览器会考虑节点之间的空白（换行符，制表符等）是一个DOM文本节点，所以第一个节点是有可能的文本节点。

你也可以做到这一点...

el.firstElementChild.title

...虽然我觉得.children具有更广泛的一点点支持。

来源

2012-03-31 01:06:33

非常感谢！这真的帮助我了！ – user1304379 2012-03-31 01:10:01

@ user1304379：不客气。 – 2012-03-31 01:11:18

随着jQuery这是一个相当简单：

$("a.nanabox-big img").attr("title");

或者作为一个click事件：

$(function(){ 
    $("a.nanobox-img").click(function(e){ 
     e.preventDefault(); 
     alert($(this).find("img").attr("title"));    
    });   
});

http://jsfiddle.net/UNfsp/1/

来源

2012-03-31 01:05:39 Curt

我没有看到OP使用jQuery的任何迹象。 – 2012-03-31 01:10:21

@amnotiam没有迹象表明，但这并不意味着它不能被建议。 – Curt 2012-03-31 01:14:02

虽然他可能会开始这样做。如果页面上几乎没有DOM操作，jQuery实际上不是必需的，但如果你开始在你的页面上使用更多的JavaScript，它开始变得非常有用...... – ThiefMaster 2012-03-31 01:14:34

获取某个元素的子元素的标题

回答

相关问题