对尚未在 DOM 中的元素使用 getElementById 吗？

Question

据我所知 document.getElementById('myId') 只会查找文档中已有的 HTML 元素。 假设我已经通过 JS 创建了一个新元素，但尚未将其附加到文档正文中，是否有一种方法可以通过其 id 访问该元素，就像我通常使用 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 元素会修改原始元素，而不是副本。

Answer 2

对于 2019 年或之后遇到此问题的任何人，这里有一个更新的答案。

Andrew Noyes 接受的答案是正确的，因为除非该元素存在于文档中并且上面的代码已经包含对所需元素的引用，否则 document.getElementById 将不起作用。

但是，如果您无法以其他方式检索对所需元素的直接引用，请考虑使用 选择器。 选择器允许您通过使用节点与其他节点的关系来检索不一定在 DOM 中的节点，例如：

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

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

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

Answer 3

getElementById 是文档对象的方法。 它不会返回文档中未包含的任何内容。

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

Answer 4

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

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);
}