web-dev-qa-db-fra.com

Obtenir la valeur d'un élément DOM en utilisant du JavaScript pur

Y a-t-il une différence entre ces solutions?

Solution 1:

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

... et Solution 2:

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

Oui, plus particulièrement! Je ne pense pas que le second fonctionnera (et si c'est le cas, pas très portable ). Le premier devrait être OK.

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

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

Cela devrait également fonctionner.

Mise à jour: la question a été modifiée. Les deux solutions sont maintenant équivalentes.

71
yorick

La deuxième fonction devrait avoir:

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

Ensuite, ils ont essentiellement la même fonction.

36
Evan Mulawski

Dans la deuxième version, vous passez la chaîne renvoyée par this.id. Pas l'élément lui-même.

Donc, id.value ne vous donnera pas ce que vous voulez.

Vous auriez besoin de passer l'élément avec this.

doSomething(this)

ensuite:

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

Remarque: dans certains navigateurs, le second fonctionnerait si vous le faisiez:

window[id].value

parce que les identifiants d'élément sont une propriété globale, mais ceci n'est pas sûr.

Il est plus logique de simplement passer l'élément avec this au lieu de le récupérer à nouveau avec son ID.

9
user113716

Passez l'objet:

doSomething(this)

Vous pouvez obtenir toutes les données d'objet:

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

Ou passez le id seulement:

doSomething(this.id)

Récupère l'objet et après cette valeur:

function(id){
    var value = document.getElementById(id).value;  
}
6
R. Z.

Il n'y a pas de différence si on regarde l'effet - la valeur sera la même. Cependant, il y a quelque chose de plus ...

Solution 3:

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

si l'élément DOM a un identifiant, vous pouvez l'utiliser directement en js

0
Kamil Kiełczewski