在克隆节点中设置子 <div> 的属性答案

【问题标题】：Setting an attribute of a child <div> inside a cloned Node在克隆节点中设置子 <div> 的属性
【发布时间】：2012-09-15 04:42:53
【问题描述】：

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

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

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

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

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

【问题讨论】：

为什么你要把你的问题标记为jquery，然后说“没有jQuery！”...
我这样做是为了让更多的 JavaScript 用户查看问题。我现在删除了它。

标签： javascript clone clonenode

【解决方案1】：

您正试图在元素节点的上下文中调用getElementById。这是不可能的：getElementById 方法只存在于document 节点上（因为id 值对于文档来说必须是唯一的）。相比之下，您可以根据元素的上下文执行getElementsByTagName 或querySelectorAll。

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

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

【讨论】：

有没有办法做某种 childNode，比如 XML... 跨浏览器支持的东西？
@JoelGrannas 您可以遍历所有后代元素并查找 ID。或者，您可以使用为您解决此类问题的库。 jQuery 浮现在脑海中......
@JoelGrannas：querySelectorAll 将适用于几乎所有浏览器，除了 IE7 和更早版本 (caniuse.com/#feat=queryselector)。据我所知，getElementsByTagName 应该适用于所有浏览器。
谢谢，我现在就试试这个……我不担心 IE7，因为我可以将它们推送到旧版应用程序
@JoelGrannas：鲜为人知的事实，jQuery 实际上使用了querySelectorAll 和getElementsBYTagName：github.com/jquery/sizzle/blob/master/sizzle.js#L246 github.com/jquery/sizzle/blob/master/sizzle.js#L1442（尽管它通过大量跨浏览器清理极端情况，所以我想你是对的，使用 jQuery 会比重新发明那个特定的轮子更好）。

【解决方案2】：

您是否尝试过在将cloned 附加到 DOM 之后执行cloned.getElementById("test0").id = "new-id" ？如果您正在寻找不属于 DOM 的内容，getElementById() 可能会很挑剔。当我说“挑剔”时，我的意思是“通常完全不工作”。

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

【讨论】：

我没有这样尝试...我知道这可能会起作用，但是，我将这个对象推入一个 documentFragment，然后一次全部追加。
忘记我说的话，我想@lonesomeday 有你的答案。 :-)
我读了你说的......我的想法是，因为我正在循环一个大的项目列表，将每个项目附加到 dom，然后修改会比获取所有项目慢，将它们放入文档片段中，然后附加到一个操作中。