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)" />

Erweitern Sie das Snippet

... 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)" />

Erweitern Sie das Snippet

javascript get element

— 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

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()" />

Erweitern Sie das Snippet

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

— Kamil Kiełczewski
quelle