Abrufen des DOM-Elementwerts mit reinem JavaScript

76

Gibt es einen Unterschied zwischen diesen Lösungen?

Lösung 1:

function doSomething(id, value) {
  console.log(value);
  //...
}
<input id="theId" value="test" onclick="doSomething(this.id, this.value)" />

... und Lösung 2:

function doSomething(id) {
  var value = document.getElementById(id).value;
  console.log(value);
  //...
}
<input id="theId" value="test" onclick="doSomething(this.id)" />

Adam Halasz
quelle
Bearbeiten: Wie mehrere darauf hingewiesen haben, gibt es einige Tippfehler (einschließlich des Fehlens eines Funktionsnamens im Javascript), aber konzeptionell sind sie gleich und beide funktionieren einwandfrei.
Jeff
Die Änderungen, die nach 3 Jahren vorgenommen wurden, machten die meisten Antworten hier ungültig.
TheMaster

Antworten:

84

Ja , vor allem! Ich denke nicht, dass der zweite funktionieren wird (und wenn ja , nicht sehr portabel ). Der erste sollte in Ordnung sein.

// HTML:
<input id="theId" value="test" onclick="doSomething(this)" />

// JavaScript:
function(elem){
    var value = elem.value;
    var id    = elem.id;
    ...
}

Dies sollte auch funktionieren.

Update: Die Frage wurde bearbeitet. Beide Lösungen sind jetzt gleichwertig.

yorick
quelle
1
Dies gilt auch für Element-Arrays. Beispiel:items[i].id
Taurib
Möchten Sie erklären, warum Sie denken, dass Ihre Antwort das ist, womit ich gehen möchte?
Barrosy
1
@Barrosy, die ID abzurufen und dann getElementById zu verwenden, ist nicht erforderlich, wenn Sie bereits einen Verweis auf das Element haben (Lösung 2). Das explizite Übergeben von Parametern (Lösung 1) kann manchmal eine gute Programmierpraxis sein.
Yorick
41

Die zweite Funktion sollte haben:

var value = document.getElementById(id).value;

Dann sind sie im Grunde die gleiche Funktion.

Evan Mulawski
quelle
9

In der zweiten Version übergeben Sie den von zurückgegebenen String this.id. Nicht das Element selbst.

Also id.valuegib dir nicht was du willst.

Sie müssten das Element mit übergeben this.

doSomething(this)

dann:

function(el){
    var value = el.value;
    ...
}

Hinweis: In einigen Browsern funktioniert der zweite, wenn Sie Folgendes tun:

window[id].value 

weil Element-IDs eine globale Eigenschaft sind, dies jedoch nicht sicher ist .

Es ist am sinnvollsten, das Element nur mit zu übergeben, thisanstatt es erneut mit seiner ID abzurufen.

user113716
quelle
6

Übergeben Sie das Objekt:

doSomething(this)

Sie können alle Daten vom Objekt abrufen:

function(obj){
    var value = obj.value;
    var id = obj.id;
}

Oder idnur das:

doSomething(this.id)

Holen Sie sich das Objekt und nach diesem Wert:

function(id){
    var value = document.getElementById(id).value;  
}
RZ
quelle
0

Es gibt keinen Unterschied, wenn wir den Effekt betrachten - der Wert wird der gleiche sein. Es gibt jedoch noch etwas mehr ...

Lösung 3:

function doSomething() {
  console.log( theId.value );
}
<input id="theId" value="test" onclick="doSomething()" />

Wenn das DOM-Element eine ID hat, können Sie diese direkt in js verwenden

Kamil Kiełczewski
quelle