Различные результаты получения строки значений

Question

Я продолжаю экспериментировать с парой значений значений объектов JS. JSFIDDLE

<div id="parent" class="parent"> 
    <div id="child" class="child"> 
     <input type="text" class="text"/> 
     <input id="submit" type="submit" onclick="doThis()"/> 
    </div> 
<div> 

и JS код

function doThis(){ 
    var span= document.createElement("span"); 
    var parent=document.getElementById("parent"); 
    var child=document.getElementById("child"); 
    var submit=document.getElementById("submit"); 
    child.insertBefore(span,submit); 
    myKeys=[]; 
    for(var key in submit){ 
     if(key=="parentNode"){ 
      myKeys.push("{"+key); 
      myKeys.push(" "+submit.key+"}"); 
     } 
    } 
    myKeys.push("{"+"parentNode"); 
    myKeys.push(" "+submit.parentNode+"}"); 
    span.innerHTML=myKeys; 
} 

Просто создан span содержит следующее:

{parentNode, undefined},{parentNode, [object HTMLDivElement]} 

Но я ожидал, что это span будет содержаться {parentNode, [object HTMLDivElement]},{parentNode, [object HTMLDivElement]}. Пожалуйста, объясните мне, почему это произошло?

Обновлено: Я изменил ссылку на фактическую.

Answer 1

Проблема здесь:

submit.key 

вы получаете доступ к свойству ключ Узла объекта и в этом случае нет свойства с именем ключ.

Если вы хотите получить доступ к свойству ParentNode вы должны сделать:

submit[key] 

в этом случае значение переменной ключа используется в качестве имени свойства в узле объекта к которому вы хотите получить доступ. (ParentNode)

Во всяком случае, стандартный способ это сделать:

document.getElementById("submit").parentNode; 

или использовать библиотеку легко манипулировать элементами DOM (см http://jquery.com/)