переменная не определена при использовании предупреждения()

Question

I have this script: 

<script> 

var prop = document.getElementById('div1').firstChild.getAttribute("id"); 

function aler() 
{ 
    alert(prop); 
} 
</script> 

и из тэгом:

<div id="div1">some content</div> 
<button onclick="aler()"></button> 

Может кто-нибудь объяснить мне, почему когда я нажимаю на кнопку он говорит: «не определено»

Исправление: в DIV я перетащить изображение:

<img id="C" src="C.png" draggable="true" ondragstart="drag(event)" width="91px" height="91px"> 

, например.

Answer 1

Первый дочерний элемент div1 является текстовым узлом. У него нет идентификатора.

EDIT

Что касается вашего исправления, если в результате HTML выглядит ничего, как это, то первый ребенок еще текстовый узел:

<div id="div1"> 
    <img id="C" etc.> 
</div> 

потому, что текст содержит вкладки, пробелы и возвращается. Я не уверен, как это влияет на drag/drop.

Answer 2

document.getElementById('div1').firstChild - текст some content. Когда вы вызываете getAttribute("id"), так как обычный текст не имеет id, вы получите undefined.

Answer 3

В DOM существуют различные виды «узлов». Ваш <div id="div1">some content</div> markup определяет два узла: Element это div и его первый (и единственный) ребенок, узел Text, содержащий текст, который у вас есть в пределах div. Узел Text не имеет id. Элемент div имеет id, но текстового узла нет.