Wann sollte ich getElementById verwenden?

Question

Ich bin ein erfahrener Entwickler, aber neu in Javascript. Ich kann nicht herausfinden, wann ich das ganze "document.getElementById (e.id) .value" verwenden soll und wann ich einfach "e" benutzen kann. Ich schaue mir eine kleine existierende Funktion in einem gemeinsamen Skript an, das beides verwendet.

Funktion RemoveFormat (e) {
document.getElementById (e.id) .Value = cleanNumber (document.getElementById (e.id) .Value); e.select(); }

Vermutlich gibt es Umstände, die die zusätzliche Eingabe erforderlich machen (wo cleanNumber eine weitere gemeinsame Funktion ist), aber was sind sie?

Danke!

Answer 1

Ihr Beispiel zeigt, wenn Sie einen Verweis auf das Element haben, das Sie steuern möchten.Wenn Sie bereits einen Verweis auf das Element haben, gibt es keinen Grund, document.getElementById zu verwenden, um einen Verweis auf sie zu erhalten (Sie bereits eine haben):

<span id="mySpan" onclick="test(this);">TEST</span> 
<script type="text/javascript"> 
function test(el) { 
    // el is a reference to an element, you can use it directly 
    el.style.display = 'none'; 

    // to demonstrate that the element you retrieve from gEBI 
    // with el.id is the same as your original reference 
    var elAgain = document.getElementById(el.id); 
    alert(elAgain === el); // "true" 
} 
</script> 

Der Ort, wo Sie vielleicht document.getElementById verwenden ist, wenn Sie wollen ein weiteres Element zu steuern, auf die Sie nicht bereits über eine Referenz:

<span id="mySpan" onclick="test(this, 'myDiv');">TEST</span> 
<div id="myDiv" style="display:none;">DIV REVEALED</div> 
<script type="text/javascript"> 
function test(el, otherElId) { 
    // el is a reference to an element, you can use it directly 
    el.style.display = 'none'; 
    // otherElId is a string containing the id of 
    // the element you want to control 
    var theDiv = document.getElementById(otherElId); 
    theDiv.style.display = ''; 
} 
</script> 

Hinweis, dass es selten (wenn überhaupt) einen Grund so etwas wie die folgenden Funktionen ausführen:

<span id="mySpan" onclick="test('mySpan');">TEST</span> 
<script type="text/javascript"> 
function test(theElId) { 
    var el = document.getElementById(theElId); 
    el.style.display = 'none'; 
} 
</script> 

Wenn die Funktion von einem Elementereignis ausgelöst wird, können Sie einfach this übergeben (gemäß meinem ersten Beispiel), anstatt die ID des Elements zu übergeben, auf dem das Ereignis stattfindet.

Answer 2

Wenn e der Knoten ist, gibt es keine Notwendigkeit, document.getElementById(e.id) zu schreiben, erhalten Sie das gleiche.

Answer 3

Es gibt keinen Grund, dies zu tun.

e.value = cleanNumber(e.value); 

Answer 4

von den Blicken von ihm, aber Sie das Element in Ihre Funktion übergeben das Element aus dem Dom bekommen Sie tun würden:

var e = document.getElementById('elementId') 

Answer 5

document.getElementById() sieht nur für ein DOM-Objekt durch eine gegebene ID (Zeichenfolge) und gibt sie zurück, wenn sie gefunden wird.

Aber und in diesem Fall ist nur eine beliebige Variable, die ein DOM-Objekt sein könnte, oder es könnte so etwas wie eine Zeichenfolge sein. Es hängt vom Kontext des restlichen Quellcodes ab.

getElementById() ist notwendig, wenn Ihr Code wie folgt aussieht:

<input id="mytext" type="text" onchange="RemoveFormat('mytext')" /> 

getElementById() ist nicht notwendig, wenn Ihr Code wie folgt aussieht:

<input id="mytext" type="text" onchange="RemoveFormat(this)" /> 

Die "this" Teil wird einen Verweis auf das DOM-Objekt übergeben (in diesem Fall ein Textfeld), was wirklich Ihr Ziel ist. Daher ist document.getElementById nicht notwendig. Das gleiche Beispiel könnte auf das Klicken eines Knopfes, aufMouseover eines Links, usw. angewendet werden.

Im Allgemeinen ziehe ich vor, die "diese" Methode zu verwenden, wann immer möglich, da es dein Javascript aufräumt. Aber manchmal ist es nicht geeignet. Also verwende ich eine Namenskonvention im Javascript, die mir hilft, mich daran zu erinnern, welche Methode ich benutzt habe. Wie ich den Variablennamen von e für ein DOM-Objekt oder ID für eine Zeichenfolge verwenden werde. Dies sollte dir helfen, es in deinem Code zu behalten.

Answer 6

Genau genommen die Funktion

function f (e) { 
    return document.getElementById(e.id); 
} 

ist die Identitätsfunktion überall definiert ist, davon aus, dass e in dem Dokument ist.

Answer 7

window.nodeId ist eine nicht-standardmäßige IE-Erweiterung - und nur in den neuesten Versionen von Firefox vorhanden und protokolliert eine Warnung, wenn Sie diese verwenden. Die anderen Probleme bestehen darin, dass, wenn jemand jemals eine Variable oder Funktion definiert, die einen Namen hat, der mit einer Knoten-ID kollidiert, diese Variable oder Funktion die Knotenreferenz überschreibt.

Zusammen bedeuten diese Besonderheiten, dass Sie nicht vollständig korrektes Verhalten garantieren können, wenn Sie window.nodeId verwenden, während document.getElementById immer korrekt funktioniert.