Warum scheint meine Variable zu aktualisieren?

Question

ich lerne derzeit JavaScript und soweit ich weiß nichts gelernt haben, die die folgende erklären könnte:

<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> 

Ich möchte die Variable divs sein ein Objekt mit den Kindern divs von node, die, wenn diese vorhanden sind Codezeile wird ausgeführt. Was es ist, scheint jedoch zu aktualisieren, wenn ein Kind zum Elternknoten hinzugefügt wird. Was erklärt dieses Verhalten; Bilde ich einen Verweis auf das Element, und wenn ja, wie erreiche ich, was ich möchte?

Answer 1

In JavaScript wird jedes Objekt durch eine Referenz statt durch einen Wert übergeben. Die Eigenschaft .Children eines Knotens ist ein Objekt (HTMLCollection-Objekt, um spezifisch zu sein). Das bedeutet, dass die Variable "divs" die untergeordneten Elemente nicht zum Zeitpunkt der Ausführung enthält, sondern sich auf die Eigenschaft children bezieht. Wenn sich Kinder ändern und neue Knoten hinzugefügt werden, gibt der Zugriff auf die Variable divs den aktuellen Status der untergeordneten Elemente zurück, sodass auch das neue untergeordnete Element enthalten ist. Wenn Sie nur den Verweis auf die ersten untergeordneten Elemente kopieren möchten, können Sie eine andere Variable erstellen.

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")); 

Answer 2

divs enthält einen Verweis auf die children Eigenschaft des ausgewählten Knotens. Wenn Sie diese Eigenschaft children ändern, ändert sich der Inhalt von divs aus diesem Grund auch.

Wenn Sie divs stabil zu halten, create a shallow copy of the array-like object children:

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

Sie könnten ein neues Array

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

erstellen Sie querySelectorAll verwenden können, ist es nicht live eine statische Liste zurückgibt. Für weitere Details können Sie diesen Link überprüfen. 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>