html javascript node.children 好像是个指针

Question

在编写一些 svg 代码时，我遇到了让我感到惊讶的事情。

在 let children = node.children 中，变量 children - 似乎充当指向节点的 childrens 列表的指针，而不是一个变量在定义时存储 children 的列表。在调查了这个之后，它似乎也发生在常规 HTML 元素上。

这是合乎逻辑的行为还是错误？

以下示例详细说明了这一点：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>SVG Children Bug ?</title>
    </head>
    <body>
        <svg id="mainGrid">
            <circle cx="100" cy="75" r="60" stroke="black" stroke-width="3" fill="red" />
            <path id="path"
                d="m70,52 v48 h36 a24,24 0 0 0 0,-48 z m0,16 h-20 m0,16 h20 m60,-8 h20"
                stroke="black"
                fill="white"/>
            <line x1="0" y1="0" x2="200" y2="150" style="stroke:rgb(255,0,0);stroke-width:2"
        </svg>
        <div id="mainDiv">
            <div></div>
        </div>
        <script type="text/javascript">
            // Svg check children
            let svg = document.getElementById('mainGrid');
            let Shildren = svg.children;

            console.log( "Svg children len: ", Shildren.length ); // Should be 3

            let newGroup = document.createElementNS('http://www.w3.org/2000/svg','g');
            newGroup.setAttribute('class','newNode');
            svg.appendChild( newGroup );

            console.log( "Svg children len after adding: ", Shildren.length );  // Should be 3 not 4

            // Div check children

            let div = document.getElementById('mainDiv');
            let Dhildren = div.children;

            console.log(  "Svg children len: ", Dhildren.length ); // Should be 1

            let newDiv = document.createElement('div');
            newDiv.setAttribute('class','newDiv');
            div.appendChild( newDiv );

            console.log("Div children len after adding: ", Dhildren.length );  // Should be 1 not 2
        </script>
    </body>
</html>

是否有一种简单的方法可以在特定时间获取 children 的列表 - 或者我必须在相关时刻将它们一一复制？

Answer 1

正如 MDN 所说：

The ParentNode property children is a read-only property that returns a live HTMLCollection which contains all of the child elements of the node upon which it was called.

它是 live，这意味着它可以随着子项的添加或删除而改变，这不是那么直观并且很难处理。一个简单的方法是在 live 部分出现问题时将子项转换为数组，以确保您拥有的是静态的：

let Shildren = [...svg.children];

// Svg check children
let svg = document.getElementById('mainGrid');
let Shildren = [...svg.children];

console.log("Svg children len: ", Shildren.length); // Should be 3

let newGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');
newGroup.setAttribute('class', 'newNode');
svg.appendChild(newGroup);

console.log("Svg children len after adding: ", Shildren.length); // Should be 3 not 4

// Div check children

let div = document.getElementById('mainDiv');
let Dhildren = [...div.children];

console.log("Svg children len: ", Dhildren.length); // Should be 1

let newDiv = document.createElement('div');
newDiv.setAttribute('class', 'newDiv');
div.appendChild(newDiv);

console.log("Div children len after adding: ", Dhildren.length); // Should be 1 not 2

<svg id="mainGrid">
            <circle cx="100" cy="75" r="60" stroke="black" stroke-width="3" fill="red" />
            <path id="path"
                d="m70,52 v48 h36 a24,24 0 0 0 0,-48 z m0,16 h-20 m0,16 h20 m60,-8 h20"
                stroke="black"
                fill="white"/>
            <line x1="0" y1="0" x2="200" y2="150" style="stroke:rgb(255,0,0);stroke-width:2"
        </svg>
<div id="mainDiv">
  <div></div>
</div>

html javascript node.children 好像是个指针

html javascript node.children seems to be a pointer

html

javascript

nodechildren