Utilice getElemenById de elementos que no son [aún] en el DOM?

Question

Por lo que yo sé document.getElementById ( 'myId') sólo se buscará elementos HTML que ya están en el documento. Digamos que he creado un nuevo elemento a través de JS, pero que no he anexado todavía al cuerpo del documento, es que hay una manera de que pueda acceder a este elemento por su ID como lo haría normalmente con getElemenById?

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

¿Hay una solución para esto? (Debo decir que no quiero para almacenar cualquier referencia a este elemento en particular, es por eso que necesito para acceder a ella a través de su Id)

Gracias!

Answer 1

Si no es parte del documento, entonces no se puede agarrar usando document.getElementById. getElementById realiza una consulta de DOM, por lo que el elemento debe estar en el árbol que se encuentran. Si crea un elemento DOM flotante, simplemente existe en la memoria, y no es accesible desde el DOM. Tiene que ser añadido a la DOM para ser visible.

Si necesita hacer referencia al elemento más tarde, simplemente pasar la referencia a otra función - todos los objetos en JavaScript se pasan por referencia, por lo que trabajar en ese elemento DOM flotando dentro de otra función modifica el original, no una copia <. / p>

Answer 2

getElementById es un método en el objeto de documento. No va a devolver nada no en el documento.

No almacenar una referencia, ¿eh? Si se pudiera mágicamente sacarlo del aire por id, entonces el aire sería una referencia a él.

Answer 3

Si ha creado, simplemente pasar el objeto a otras funciones y acceder a ella directamente?

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