Javascript 我怎样才能得到一个div和它的所有子对象，以及它们各自的计算样式？

我想抓住HTML元素和它的所有计算样式

当HTML元素没有子元素时，我设法使它工作，但是如果HTML元素有许多子元素，我如何获取每个子元素的所有计算样式呢

以下是我目前掌握的情况：

• 用户单击html元素，我使用event.target.cloneNode（true）获取html元素
• 然后我为克隆的元素设置了一个Id
• 我喜欢电脑风格
• 然后将样式添加到克隆的元素中

因此，基本上在这一点上，我会得出如下结论：

示例文本

但当我要提取的HTML元素有很多子元素时，就会出现问题：

示例文本儿童2
示例文本儿童3

---

那么，如何提取整个HTML元素及其子元素和它们的样式呢？

因此，我自己对此很好奇，并创建了一个快速示例来浏览元素。也应该在没有任何子项的情况下工作，因为循环根本不会运行

//要放置克隆的容器
const targetContainer=document.querySelector（'.target'）；
//您要克隆的元素
const root=document.querySelector（'.style1'）；
const rootWalker=document.createTreeWalker(
根，
NodeFilter.SHOW_元素，
{acceptNode:函数（节点）{return NodeFilter.FILTER_ACCEPT；}
);
//现在克隆该元素并为其创建一个walker
const rootClone=root.cloneNode（true）；
const cloneWalker=document.createTreeWalker(
根克隆，
NodeFilter.SHOW_元素，
{acceptNode:函数（节点）{return NodeFilter.FILTER_ACCEPT；}
);
//克隆根元素本身的样式
rootClone.style.cssText=getComputedStyle（root）.cssText
rootClone.className=''//只需清除它，查看是否复制了样式
//获取第一个子节点，如果没有子节点，.nextNode（）将返回null
设nextRootNode=rootWalker.nextNode（）；
设nextCloneNode=cloneWalker.nextNode（）；
//现在，如果我们有一个子节点，循环正在运行
while（nextRootNode！==null）{
//从原始到克隆获取样式
nextCloneNode.style.cssText=getComputedStyle（nextrotNode）.cssText；
nextCloneNode.className=''//再次删除类以进行演示
//获取下一个节点，若并没有更多节点，则返回null，循环将停止
nextRootNode=rootWalker.nextNode（）；
nextCloneNode=cloneWalker.nextNode（）；
}
//只需将克隆的节点附加到所需的目标
targetContainer.append（rootClone）
.style1{
背景：黄色；
填充：10px；
保证金：5px0；
}
.style-child-1{
背景：绿色；
填充：10px；
}
.style-child-2{
颜色：蓝色；
}
.style-child-3{
颜色：橙色；
文本转换：大写；
}

示例文本儿童2
示例文本儿童3
您还没有使用它，但您应该能够使用TreeWalker“漫游”您的元素+子元素。你可能需要
TreeWalker.nextNode（）
，然后一个接一个地取出你的样式，在浏览时创建你的克隆。嘿，这个特别的讨论可能会帮助你获得一些见解-很好，这正是我需要的，我编辑了你的答案并删除了document.createTreeWalker（）的第四个参数
false
因为经过一些研究，它似乎已经被弃用了。我会在版本被接受后接受答案。ThanksHave再次检查了它，您完全正确，它已被弃用。从我的答案中删除它。
  private onClickHtmlCssGrabber = (event) => {
      // clone the html element
      let clickedHtmlElement = event.target.cloneNode(true)

      // set an id to the cloned element
      clickedHtmlElement.setAttribute('id', 'clonedElement')

      // get the computed style of the element
      let clikedHtmlElementStyle =  getComputedStyle(event.target).cssText

      // set the style on my newly cloned element
      clickedHtmlElement.style.cssText = clikedHtmlElementStyle
  }