獲取某個元素的子元素的標題

我有一個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

獲取某個元素的子元素的標題

回答

相關問題