如何获取特定时间点前添加的SVG子元素？

你遇到的核心问题是：element.children返回的是实时更新的HTMLCollection，它会自动同步DOM的变化——哪怕你在添加path前调用了fnTwo，后续DOM新增元素后，这个集合也会自动包含新元素。

下面是几种可行的解决方案：

方法一：转为静态数组切断实时关联 #

把实时的children集合转换成静态数组，这样后续DOM变化不会影响已经获取到的结果：

const fnTwo = (element) => {
    // 用Array.from把HTMLCollection转为静态数组
    const children = Array.from(element.children);
    console.log(children); // 仅包含调用时已存在的rect和circle
    return children;
}

也可以用ES6扩展运算符实现同样效果：const children = [...element.children];

方法二：记录时间点的子元素数量 #

在调用fnTwo时记录当前子元素的总数，后续只取对应数量的元素：

const fnTwo = (element) => {
    const currentCount = element.children.length;
    // 截取当前存在的所有子元素
    const children = Array.from(element.children).slice(0, currentCount);
    console.log(children);
    return children;
}

方法三：给目标元素添加标识筛选 #

如果可以控制初始元素的创建流程，给rect和circle添加统一的类名，之后通过类选择器精准筛选：
首先修改创建元素的函数：

const fnOne = (element) => {
    const child = document.createElementNS(svgns, element);
    child.classList.add('initial-svg-element'); // 添加统一标识类
    svg.append(child);
}

然后在fnTwo中通过类选择器获取：

const fnTwo = (element) => {
    const children = element.querySelectorAll('.initial-svg-element');
    console.log(children);
    return children;
}

以上三种方法都能保证fnTwo只获取到调用时刻已存在的子元素，后续添加的path不会被包含进来。

内容的提问来源于stack exchange，提问作者smpa01