Utilice getElemenById de elementos que no son [aún] en el DOM?
-
21-08-2019 - |
Pregunta
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!
Solución
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>
Otros consejos
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.
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);
}