Question

我不确定是否可行，但是我正在使用document.createElement创建一个元素，然后将子元素附加到该变量以构建某种模板，然后再将其添加到页面。因此，此元素不在DOM中。我希望能够通过其ID直接访问子元素，而不是尝试使用children属性来查找它们。是否有可能使用诸如element.getElementById之类的东西在将其添加到DOM之前在该父元素中查找子元素，就像它是自己的迷你DOM一样？

一个粗略的例子：

var parentElmt = document.createElement('DIV');
var childElmt = document.createElement('DIV');
childElmt.id = "child1";
parentElmt.appendChild(childElmt);
parentElmt.getElementById('child1').innerHTML = "Does this work?";

Answer 1

如果您已经引用了child元素，则应使用该元素：

var root = document.getElementById("root")

var parentElmt = document.createElement('div');
var childElmt = document.createElement('div');
childElmt.id = "child1";
parentElmt.appendChild(childElmt);

// you already have the ref to childElmt.
childElmt.innerHTML = "Does this work?";

root.appendChild(parentElmt)

<div id="root"></div>

或者，您可以重新选择孩子。

var root = document.getElementById("root")

var parentElmt = document.createElement('div');
var childElmt = document.createElement('div');
childElmt.id = "child1";
parentElmt.appendChild(childElmt);

// you can use querySelector
let ch = parentElmt.querySelector("#child1")
ch.innerHTML = "Does this work?";

root.appendChild(parentElmt)

<div id="root"></div>

Answer 2

如果您的目标只是选择子元素，则可以使用querySelector，如下所示：

parentElmt.querySelector('#child1')

您只能在getElementById上使用document。

与其他一些元素查找方法（例如Document.querySelector（）和Document.querySelectorAll（））不同，getElementById（）仅可用作全局文档对象的方法，而不适用于所有文档对象中的方法DOM。由于ID值在整个文档中必须唯一，因此不需要该函数的“本地”版本。

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById#Notes

JS getElementById创建的元素

2 个答案: