javascript - 如何更改clone.Node中父元素及其所有子元素的id

Question

如何更改clone.Node中父元素及其所有子元素的id？

我需要更改父级和子级的 id，但只有父级的 id 发生更改。

<div id="parent" style="border:1px solid black;background-color:pink">
  <div id="child1" style="color:red;">A r element</div>
  <div id="child2" style="color:green;">A g element</div>
  <div id="child3" style="color:blue;">A b element</div>
</div>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  var elmnt = document.getElementById("parent");
  var elmntid = document.getElementById("parent").id;
  var cln = elmnt.cloneNode(true);
  cln.id = elementid + "copy";
  document.body.appendChild(cln);
}

Answer 1

如果你想向所有克隆元素的 ID 添加一些内容，你可以这样做:

document.querySelector('#button').addEventListener('click', () => {
  const clone = document.querySelector('#parent').cloneNode(true);
  const elementsThatHaveId = [...clone.querySelectorAll('[id]')];
  if (clone.matches('[id]')) {
    elementsThatHaveId.push(clone);
  }
  elementsThatHaveId.forEach((e) => {
    e.id += 'Copy';
  });
  document.body.append(clone);
});

<div id="parent" style="border:1px solid black;background-color:pink">
  <div id="child1" style="color:red;">A r element</div>
  <div id="child2" style="color:green;">A g element</div>
  <div id="child3" style="color:blue;">A b element</div>
</div>

<button id="button">Try it</button>

它的作用是选择克隆节点中具有 id 属性的所有元素 (clone.querySelectorAll('[id]'))，添加节点如果结果数组也有 id 属性，则将其自身添加到结果数组中，然后遍历列表来修改所有这些元素的 ID