Question

据我所知，document.getElementById（'myId'）只会查找文档中已有的HTML元素。假设我已经通过JS创建了一个新元素，但是我还没有将它附加到文档正文中，是否有一种方法可以像我通常用getElementById那样通过它来访问这个元素？

var newElement = document.createElement('div');
newElement.id = 'myId';
// Without doing: document.body.appendChild(newElement);
var elmt = document.getElementById('myId'); // won't work

有解决方法吗？（我必须告诉我，我不想存储对这个特定元素的任何引用，这就是我需要通过它的Id访问它的原因）

谢谢！

Answer 1

如果它不是文档的一部分，那么您无法使用document.getElementById获取它。 getElementById执行DOM查找，因此该元素必须位于要查找的树中。如果您创建浮动DOM元素，它只存在于内存中，并且无法从DOM访问。它必须添加到DOM才能看到。

如果以后需要引用该元素，只需将引用传递给另一个函数 - JavaScript中的所有对象都通过引用传递，因此从另一个函数中处理该浮动DOM元素会修改原始元素而不是副本。 / p>

Answer 2

getElementById是文档对象上的一个方法。它不会返回文档中没有的任何内容。

没有存储引用，是吗？如果你可以通过id神奇地将它从空中拉出来，那么空气将成为它的参考。

Answer 3

如果你已创建它，只需将对象传递给其他函数并直接访问它？

function createDiv()
{
  var newElement = document.createElement('div');
  doWorkWithDiv(newElement);
}

function doWorkWithDiv(element)
{
  element.className = 'newElementCSS';
  element.innerHTML = 'Text inside newElement';
  addToDoc(element);
}

function addToDoc(element)
{
  document.body.appendChild(element);
}

Answer 4

对于在2019年或之后遇到此问题的人，这里是更新的答案。

安德鲁·诺伊斯（Andrew Noyes）接受的答案是正确的，因为除非文档中存在该元素，并且以上代码已经包含对所需元素的引用，否则document.getElementById不起作用。

但是，如果您无法以其他方式获取对所需元素的直接引用，请考虑使用selectors。选择器使您可以检索纯粹存在于内存中的节点，例如：

var child = document.createElement("div");
child.id = "my_id";

var parent = document.createElement("div");
parent.appendChild(child);

var child2 = parent.querySelector("#my_id");

对于DOM中尚未[还]的元素，请使用getElementById吗？

4 个答案: