为什么我的变量似乎在更新？

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中，每个对象都通过引用而不是值传递。节点的.children属性是一个对象（HTMLCollection对象是特定的）。这意味着'div'变量在运行时不会包含子元素，它会引用子元素属性。当孩子改变并添加新节点时，访问div变量将返回儿童的当前状态，因此它也会包含新孩子。如果您只想将引用复制到初始孩子，则可以创建另一个变量。

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保持到所选择的节点的children属性的引用。因此，如果更改此children属性，则divs的内容也会更改。

如果你想保持divs稳定，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

您可以创建一个新的数组

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

您可以使用querySelectorAll，它返回一个静态列表不住。欲了解更多详情，你可以检查这个链接。 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>