Use getElementById para os elementos que [ainda] não estão no DOM?
-
21-08-2019 - |
Pergunta
Tanto quanto eu sei document.getElementById ( 'myId') vai olhar apenas para elementos HTML que já estão no documento. Digamos que eu tenha criado um novo elemento via JS, mas que eu não tenha anexado ainda para o corpo do documento, é que há uma maneira que eu possa acessar esse elemento pelo seu id como eu faria normalmente com getElementById?
var newElement = document.createElement('div');
newElement.id = 'myId';
// Without doing: document.body.appendChild(newElement);
var elmt = document.getElementById('myId'); // won't work
Existe uma solução para isso? (Devo dizer que eu não quero para armazenar qualquer referência a este elemento particular, é por isso que eu preciso para acessá-lo através do seu Id)
Obrigado!
Solução
Se não é parte do documento, então você não pode agarrá-lo usando document.getElementById
. getElementById
faz uma pesquisa DOM, de modo que o elemento deve estar na árvore para ser encontrado. Se você criar um elemento DOM flutuante, ela apenas existe na memória, e não é acessível a partir do DOM. Tem que ser adicionado ao DOM para ser visível.
Se você precisar fazer referência o elemento mais tarde, simplesmente passar a referência para outra função -. Todos os objetos em JavaScript são passados ??por referência, de modo a trabalhar nisso elemento DOM flutuante a partir de dentro de outra função modifica o original, não uma cópia
Outras dicas
getElementById é um método no objeto documento. Ele não vai retornar nada não no documento.
Por não armazenar uma referência, hein? Se você pudesse magicamente puxá-lo fora do ar por id, em seguida, o ar seria uma referência a ele.
Se você criou-lo, basta passar o objeto para outras funções e acessá-lo diretamente?
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);
}