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对象是特定的）。这意味着'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>

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

4 个答案: