Utilizzare getElementById per gli elementi che non sono [ancora] nel DOM?

Question

Per quanto ne so document.getElementById ( 'MyID') cercherà solo per elementi HTML che sono già nel documento. Diciamo che ho creato un nuovo elemento tramite JS, ma che non ho ancora aggiunto al corpo del documento, è che c'è un modo per accedere a questo elemento per la sua identificazione come ho normalmente fare con getElementById?

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

C'è una soluzione per questo? (Devo dire che io non voglio per memorizzare qualsiasi riferimento a questo particolare elemento, è per questo che ho bisogno di accedervi attraverso il suo Id)

Grazie!

Answer 1

Se non è parte del documento, allora non può afferrare utilizzando document.getElementById. getElementById fa una ricerca DOM, quindi l'elemento deve essere in albero per essere trovati. Se si crea un elemento DOM galleggiante, esiste solo nella memoria, e non è accessibile dal DOM. Esso deve essere aggiunto al DOM per essere visibile.

Se è necessario fare riferimento all'elemento successivo, è sufficiente passare il riferimento ad un'altra funzione - tutti gli oggetti in JavaScript sono passati per riferimento, in modo da lavorare su questo elemento DOM flottante dall'interno di un'altra funzione modifica l'originale, non una copia <. / p>

Answer 2

getElementById è un metodo sull'oggetto documento. Non è intenzione di restituire qualcosa di non nel documento.

Non memorizzare un punto di riferimento, eh? Se si potesse magicamente tirare fuori l'aria da id, poi l'aria sarebbe un riferimento ad esso.

Answer 3

Se hai creato, basta passare l'oggetto ad altre funzioni e accedervi direttamente?

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