Gebruik getElementById vir elemente wat nie [nog] in die DOM?

Question

Sover ek weet dokument.getElementById('myId') sal slegs kyk vir die HTML-elemente wat reeds in die dokument.Kom ons sê ek het'n nuwe element via JS, maar dat ek nie aangeheg is dit tog om die dokument liggaam, is daar'n manier wat ek kan toegang tot hierdie element deur sy id soos ek normaalweg sou doen met getElementById?

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

Is daar'n oplossing vir wat?(Ek moet sê dat ek nie wil hê om te stoor enige verwysing na hierdie spesifieke element, wat is die rede waarom ek nodig het om toegang tot dit via sy Id)

Dankie jy!

Answer 1

As dit is nie deel van die dokument, dan kan jy nie gryp dit met behulp document.getElementById. getElementById nie'n DOM lookup, so die element moet word in die boom gevind word.As jy die skep van'n drywende DOM element, is dit net bestaan in die geheue, en is nie toeganklik vanaf die DOM.Dit het bygevoeg word om die DOM wees om sigbaar te wees.

As jy nodig het om te verwys na die element later, bloot slaag die verwysing na'n ander funksie-al die voorwerpe in JavaScript is wat deur verwysing, sodat die werk op die swaai DOM element van binne'n ander funksie verander die oorspronklike, nie'n afskrif.

Answer 2

getElementById is 'n metode van die dokument voorwerp. Dit is nie van plan om iets nie weer in die dokument.

Op nie stoor 'n verwysing, huh? As jy mettertyd kon trek dit uit die lug deur id, dan sou die lug 'n verwysing na dit wees.

Answer 3

As jy dit geskep het, net verby die voorwerp na ander funksies en direkte toegang tot dit?

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