javascript - 设置孩子的属性在克隆节点内

Question

我已经克隆了一个节点，但我想设置或更改该克隆节点内 div 的属性，具体来说，id更改div id="test0"

我在这方面找不到任何文档，那里有任何直接的 JavaScript 人知道解决方案吗？

var c = document.getElementById("stone-opt0"),
cloned = c.cloneNode(true);

//CODE THAT DOESN'T WORK
cloned.getElementById("test0").id = "new-id";

我正在做的是遍历一个大的项目列表，并将这些项目放入一个文档片段中，然后我将其推送到页面一次......我这样做而不是将每个元素添加到页面，然后在附加后进行修改到 DOM（这会更快，不是吗？）

Answer 1

您正在尝试调用getElementById元素节点的上下文。这是不可能的：该getElementById方法仅存在于document节点上（因为id值对于文档必须是唯一的）。相比之下，你可以做getElementsByTagName或querySelectorAll基于一个元素的上下文。

因此，您可以使用该querySelectorAll方法来执行此操作，只要您不介意不支持不支持此方法的浏览器，例如 IE8。

cloned.querySelectorAll('[id="test0"]')[0].id = "new-id";

Answer 2

附加到 DOMcloned.getElementById("test0").id = "new-id" 后，您是否尝试过这样做？如果您正在寻找不属于 DOM 的东西，可能会很挑剔。当我说“挑剔”时，我的意思是“通常完全不起作用”。clonedgetElementById()

您可以尝试在页面上创建一个隐藏元素（如 a <div style="display:none">）并附cloned加到该元素上，以便在您准备好之前它不会显示在页面上。