javascript - 获取值字符串表示形式的不同结果

我正在继续尝试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]}中。请给我解释为什么会发生？

更新：我将链接更改为实际。

最佳答案

问题在这里：

 submit.key

您正在访问节点对象的属性键，在这种情况下，没有名称键的属性。

如果要访问属性parentNode，则必须执行以下操作：

submit[key]

在这种情况下，变量键的值用作您要访问的节点对象中属性的名称。 （parentNode）

无论如何，标准方法是：

document.getElementById("submit").parentNode;

或使用库轻松操作DOM元素（请参见http://jquery.com/）

关于javascript - 获取值字符串表示形式的不同结果，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20567176/