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

文本节点引用了polyline元素之间的SVG表示形式中存在的空格（换行符）。

请考虑以下示例，在该示例中，我们获得对组g1的引用，并检查子节点的数量。本示例将打印出3，指的是rect元素（文本节点）之前的空白，rect元素本身（元素节点）和{{1}之后的空白}元素（文本节点）。

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>元素视为子节点，因为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>）的节点都被过滤掉，从而形成一个包含Node.ELEMENT_NODE节点的单元素数组。

为什么在此SVG元素中存在隐藏的文本节点？

1 个答案: