在克隆的节点内设置子<div>的属性

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";