有没有一种方法可以只检索到一个特定点上的子 node .例如,我创建了rect and circle,在添加path之前,我正在执行fnTwo,希望它只返回rect and circle.但是它返回所有的子元素;例如rect, circle +path;即使path被添加在后面.有没有一种方法可以让我执行fnTwo,来得到在那个时间点上加起来的子元素.

const svg = document.querySelector('svg');
const svgns = "http://www.w3.org/2000/svg"
const element = ['rect', 'circle'];

//fn for append
const fnOne = (element) => {
    const child = document.createElementNS(svgns, element);
    svg.append(child);

}
//append all elements
for (const elements of element) {
    const element = elements;
    fnOne(element)
};
// get all the children elements **up to this point in time**
const fnTwo = (element) => {
    const children = element.children;
  //do something with the children
    console.log(children); //brings all children added before + after
}

const children = fnTwo(svg);
//add a path to test if it is retrieved through fnTwo
const childThree = document.createElementNS(svgns, 'path');
svg.append(childThree);
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Document</title>
  </head>
  <script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>
  <body>
    <svg>      
    </svg>
  </body>
</html>

推荐答案

你遇到的问题是因为你返回了子元素的原始"数组",你需要做的是返回一个副本:

const svg = document.querySelector('svg');
const svgns = "http://www.w3.org/2000/svg"
const element = ['rect', 'circle'];

//fn for append
const fnOne = (element) => {
    const child = document.createElementNS(svgns, element);
    svg.append(child);

}
//append all elements
for (const elements of element) {
    const element = elements;
    fnOne(element)
};
// get all the children elements **up to this point in time**
const fnTwo = (element) => {
    const children = [...element.children]; //shallow copy of the array
  //do something with the children
    console.log(children); //brings all children added before + after
}

const children = fnTwo(svg);
//add a path to test if it is retrieved through fnTwo
const childThree = document.createElementNS(svgns, 'path');
svg.append(childThree);
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Document</title>
  </head>
  <script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>
  <body>
    <svg>      
    </svg>
  </body>
</html>

Javascript相关问答推荐

脚本.js:3:20未捕获的类型错误:无法读取空的属性(读取addEventHandler)

禁用从vue.js 2中的循环创建的表的最后td的按钮

提交表格后保留Web表格中的收件箱值?

在页面上滚动 timeshift 动垂直滚动条

被CSS优先级所迷惑

useNavigation更改URL,但不呈现或显示组件

Angular中计算信号和getter的区别

Chrome是否忽略WebAuthentication userVerification设置?""

如何从调整大小/zoom 的SVG路径定义新的d属性?""

获取Uint8ClampedArray中像素数组的宽度/高度

如何从网站www.example.com获取表与Cheerio谷歌应用程序脚本

在WordPress中使用带有WPCode的Java代码片段时出现意外令牌错误

OpenAI转录API错误请求

按下单键和多值

按什么顺序接收`storage`事件?

在Odoo中如何以编程方式在POS中添加产品

React Refs不与高阶组件(HOC)中的动态生成组件一起工作

为什么我看到的是回复,而不是我的文档?

使用VITE开发服务器处理错误

使用jQuery每隔几秒钟突出显示列表中的不同单词