Question

在编写一些svg代码时，我遇到了令我感到惊讶的东西。

在let children = node.children中，变量 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>

是否有一种简单的方法来获取特定时间的孩子列表？或者我是否必须在相关时刻一张一张地复制它们？

Answer 1

正如MDN所说：

ParentNode属性的子级是一个只读属性，它返回一个实时 HTMLCollection，其中包含在其上被调用的节点的所有子元素。

它是 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似乎是一个指针

1 个答案: