При написании кода 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>
Есть ли простой способ получить список детей в определенное время - или мне нужно копировать их одного за другим в соответствующий момент?