为什么这个 SVG 元素中有隐藏的文本节点？

Question

我在父元素 (myLines) 中包含的 SVG 中有 4 条复杂的折线。我想将折线存储在一个数组中，以便稍后在我的代码中调用它们。由于某种原因，浏览器认为“myLines”父元素内的折线之间存在隐藏的文本节点。当我尝试使用开发人员工具在检查器中查找节点时，浏览器说“某些节点被隐藏”，指的是这些节点。

但是，当我使用 appendChild 并将折线从一个元素移动到另一个元素时，浏览器仅检测到实际存在的 4 条折线。

这是怎么回事？

我想了一些变通办法来避免这个问题，但我宁愿知道 wtf 正在发生，这样我才能真正修复它并了解我做错了什么。

var main = document.querySelector('main');
var lines = main.querySelectorAll('g#myLines');
var element=document.getElementById("myLines2");
var elArray=[];
console.log(lines);
for (z=0; z<4; z++){
  console.log("lines[0].childNodes["+z+"]= "+lines[0].childNodes[z]);
  elArray[z]=(lines[0].childNodes[z]);
/* 	    element.appendChild(lines[0].childNodes[z]); */
   }

请看看这个小提琴。如果您查看控制台并启用此代码“element.appendChild(lines[0].childNodes[z]);”在第 9 行，您可以看到使用 appendChild 没有出现文本节点。 https://jsfiddle.net/NZSIL/8psru5mv/

谢谢！！

Answer 1

文本节点指的是 SVG 表示中 polyline 元素之间存在的空白（换行符）。

考虑这个例子，我们获得了对组 g1 的引用，并检查了子节点的数量。此示例将打印出3，指的是rect 元素（文本节点）之前的空格、rect 元素本身（元素节点）以及rect 元素（文本节点）之后的空格。

const group = document.getElementById('g1');

console.log(group.childNodes.length); // 3 nodes

<svg id="svg1">
  <g id="g1">
    <rect width="100" height="100"/>
  </g>
</svg>

相比之下，下面的sn-p只会将rect元素算作子节点，因为g标签和rect标签之间没有空格。

const group = document.getElementById('g1');

console.log(group.childNodes.length); // 1 node

<svg id="svg1"><g id="g1"><rect width="100" height="100"/></g></svg>

这种情况的常见解决方案是过滤掉文本节点，只对元素节点起作用：

const group = document.getElementById('g1');

const nodes = [...group.childNodes];

console.log(nodes.length) // 3 nodes

const elements = nodes.filter(n => n.nodeType === Node.ELEMENT_NODE);

console.log(elements.length); // 1 element

<svg id="svg1">
  <g id="g1">
    <rect width="100" height="100"/>
  </g>
</svg>

在上面的sn-p中，所有不是元素节点（节点类型Node.ELEMENT_NODE）的节点都被过滤掉，得到一个包含rect节点的单元素数组。