Use getElementById para os elementos que [ainda] não estão no DOM?

Question

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!

Answer 1

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

Answer 2

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.

Answer 3

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