Soll ich document.getElementById() in einer Variablen zwischenspeichern oder sie jedes Mal aufrufen?

Question

Ich habe viele Elemente, die oft generiert und referenziert werden (Mouseover, Klicks, Positionsänderungen).

Ich habe die IDs dieser Elemente zur Hand. Ist es klug, die document.getElementById(ID) Aufrufe in einer Variablen zu speichern, oder ist es schneller/genauso schnell/langsamer, document.getElementById() jedes Mal aufzurufen?

var app = []; 
var app.elements = []; 
//i can store ['id1', 'id2', 'id3'] 
//OR ['id1' => document.getElementById('id1'), 'id2' => document.getElementById('id2'), 'id3' => document.getElementById('id3')] 

Answer 1

Sie sollten die Referenz natürlich wo immer möglich wiederverwenden, aber Sie müssen möglicherweise eine neue Referenz in jedem Funktionskörper erhalten.

Beispiel:

var e1 = document.getElementById('id1'); 
e1.innerHTML = 'test'; 
e1.className = 'info'; 

Wenn Sie Referenzen halten länger, können Sie feststellen, dass sie nicht mehr funktionieren. Wenn Sie zum Beispiel innerHTML für einen Teil der Seite erhalten und es zurückspeichern, werden alle Elemente in diesem Teil entfernt und neu erstellt. Wenn Sie einen Verweis auf eines der Elemente in diesem Teil hatten, ist dieses Element nicht mehr vorhanden.

// This will recreate all elements inside the 'parent' element: 
document.getElementById('parent').innerHTML += 'test'; 

Answer 2

Es ist sicherlich schneller, die Elemente in einer Variablen zu speichern, aber nicht mit einem großen Abstand. Dies unterscheidet sich von Fall zu Fall und sollte für jeden individuell angepasst werden.

Der vielleicht größte Faktor ist die Lesbarkeit. Ich glaube, dass der direkte Zugriff auf die Elemente besser lesbar ist.

Answer 3

getElementById gibt einen Elementknoten zurück, der im Wesentlichen nur ein JavaScript-Objekt ist. Sie können dieses Objekt einer Variablen zuweisen, was bedeutet, dass die Variable auf dieses Objekt zeigt, wenn Sie diese Variable zu einem späteren Zeitpunkt eingeben. So

var id1 = document.getElementById('id1'); 

id1 bezieht sich nun auf das DOM-Element mit einem id von id1. Wenn mit dem id kein Element gefunden wurde, gibt document.getElementById null zurück.

Wenn die Elemente innerhalb des DOM bleiben und nicht ersetzt werden, dann ist es sinnvoll, sie in einem Array zu speichern, so dass Sie so oft wie gewünscht ohne Leistungsaufwand referenzieren können.

Wenn es hilft, könnten Sie eine einfache Funktion schaffen es für Sie tun:

function getElementsByIds(/* id1, id2 ... */) { 

    var elems = []; 

    for (var i = 0, l = arguments.length; i < l; i++) { 
     elems[i] = document.getElementById(arguments[i]); 
    } 

    return elems; 

} 

app.elements = getElementsByIds('id1', 'id2', 'id3'); 

Answer 4

Es gibt keine einzige richtige Antwort auf diese Frage. Alles hängt davon ab, mit was Sie arbeiten müssen. Wenn Sie mit einer Seite arbeiten, die viele Elemente in der DOM-Struktur enthält, sollten Sie die Referenzen zwischenspeichern und wiederverwenden, um die Nachschlagezeit zu verkürzen. Wenn Sie an einer kleinen Seite arbeiten, ist es besser, Elemente im laufenden Betrieb nachzuschlagen und den Speicherverbrauch des Browsers zu minimieren.

Dies hängt auch von den Browsern ab, auf die Sie ausgerichtet sind. Zum Beispiel brauchen neuere Versionen von Firefox eine Weile, um ein Element zum ersten Mal zu korrigieren, aber sie cachen den Verweis intern, so dass das nächste Mal, wenn Sie nachsehen werden, es fast sofort sein wird. Auf der anderen Seite speichert IE keine Lookup-Werte, aber die Suchzeit ist beim ersten Versuch viel schneller als Firefox.

Viele moderne Frameworks werden die Elemente, die Sie für Sie gefunden haben, zwischenspeichern. Allerdings bevorzuge ich persönlich immer noch die Verwendung von document.getElementById die meiste Zeit.Was ich tun, wenn ich Lookup-Werte zwischenzuspeichern müssen, ist die folgende:

function registerElement(id) 
{ 
    if (!this["get_" + id]) 
     this["get_" + id] = function() { 
      var element = document.getElementById(id); 
      this["get_" + id] = function() {return element;}; 
      return element; 
     } 
} 

Sie verwenden diese durch registerElement Aufruf und eine ID des Elements vorbei. Wenn Sie den Wert abrufen müssen, rufen Sie die get_element-ID auf, die Sie übergeben haben, und beim ersten Ausführen wird das Element nachgeschlagen und zwischengespeichert. Bei jedem nachfolgenden Aufruf wird nur der zwischengespeicherte Wert zurückgegeben.