Получение названия дочернего элемента элемента

Question

У меня есть файл JavaScript, который печатает атрибут title дочернего элемента img внутри него.

Другими словами, у меня есть тег img внутри тега a. В теге 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> 

Answer 1

Вместо childNodes, используйте children.

el.children[0].title 

Это происходит потому, что большинство браузеров будет рассматривать пустое пространство между узлами (разрывы строк, вкладки и т.д.) быть DOM текстовый узел, поэтому первый узел, вероятно, что текстовый узел.

---

Вы также можете сделать это ...

el.firstElementChild.title 

... хотя я думаю, что .children имеет немного более широкую поддержку.

Answer 2

С jQuery это довольно просто:

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

---

Или как событие щелчка:

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

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