なぜ私の変数は更新されているようですか？

Question

私は現在、JavaScriptを学んだし、私の知る限りでは次のことを説明できる何かを学んでいない：

<div id="parent"> 
    <div>One</div> 
    <div>Two</div> 
</div> 
<script> 
    function test(node) { 
     var divs = node.children; 
     console.log(divs); 
     var div = document.createElement("div"); 
     node.appendChild(div); 
     console.log(divs); 
    } 
    test(document.querySelector("#parent")); 
</script> 

私は変数divsがその存在nodeの子divを含むオブジェクトになりたいですコード行が実行されます。それはどちらかですが、子ノードが親ノードに追加されたときに更新されるようです。この動作について説明します。私は要素への参照を作成しています、もしそうなら、私はどのようにして私がしたいものを達成するのですか？

Answer 1

JavaScriptでは、すべてのオブジェクトがvalueではなくreferenceによって渡されます。ノードの.childrenプロパティはオブジェクト（特定のHTMLCollectionオブジェクト）です。つまり、div変数は実行時に子を含んでいないので、childrenプロパティを参照します。子ノードが変更され、新しいノードが追加されると、divs変数にアクセスすると子ノードの現在の状態が返されるため、新しい子ノードも格納されます。最初の子への参照をコピーするだけの場合は、別の変数を作成することができます。

Answer 2

function test(node) { 
    var children = node.children; 
    var divs = []; 

    // copy every child to the divs array 
    for (var i = 0; i < children.length; i++) { 
     divs.push(children[i]); 
    } 

    var div = document.createElement("div"); 
    node.appendChild(div); 

    // since divs is just an array copy of the initial children, 
    // when children change, the divs still only contains the initial nodes 
    console.log(divs); 

    // however, as we said before, children will still be a reference to 
    // current node's children, so 
    console.log(children); // outputs 3 divs 
} 
test(document.querySelector("#parent")); 

divsは、選択されたノードのchildrenプロパティへの参照を保持しています。このため、このchildrenプロパティを変更すると、divsの内容も変更されます。

あなたがcreate a shallow copy of the array-like object children、divs安定を維持したい場合：

function test(node) { 
    var divs = Array.prototype.slice.call(node.children); 
    console.log(divs); 

    var div = document.createElement("div"); 
    node.appendChild(div); 
    console.log(divs); 
} 

Answer 3

あなたがquerySelectorAllを使用することができ、新しい配列

var divs = new Array(node.children.length); 
for(var i = 0; i < node.children.length; i++){ 
    divs[i] = node.children[i] 
} 
console.log(divs); 
var div = document.createElement("div"); 
node.appendChild(div); 
console.log(divs); 

Answer 4

を作成することができ、それは生きていけない、静的なリストを返します。詳細については、このリンクを確認してください。 https://www.w3.org/TR/selectors-api/#queryselectorall

<div id="parent"> 
    <div>One</div> 
    <div>Two</div> 
</div> 
<script> 
    function test(node) { 
     var divs = document.querySelectorAll('#'+node.id +' div'); 
     console.log(divs); 
     var div = document.createElement("div"); 
     node.appendChild(div); 
     console.log(divs); 
    } 
    test(document.querySelector("#parent",'#parent div')); 
</script>