Почему моя переменная, похоже, обновляется?

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, которые существуют, когда это строка кода запускается. Что это такое, однако, похоже, он обновляется, когда ребенок добавляется к родительскому узлу. Что объясняет это поведение; Я создаю ссылку на элемент, и если да, то как мне добиться того, что я хочу?

Answer 1

В JavaScript каждый объект передается ссылкой вместо значения. Свойством .children узла является объект (конкретный объект HTMLCollection). Это означает, что переменная divs не будет содержать детей во время ее запуска, она будет ссылаться на свойство children. Когда дети меняются и добавляются новые узлы, доступ к переменной divs возвращает текущее состояние детей, поэтому он также будет содержать новый ребенок. Если вы просто хотите просто скопировать ссылку на исходных детей, вы можете создать другую переменную.

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>