web-dev-qa-db-ja.com

純粋なJavaScriptを使用してDOM要素の値を取得する

これらのソリューション間にdifferenceはありますか？

解決策1：

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

...および解決策2：

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

はい、最も顕著なのは！私は2番目のものが機能するとは思わない（そしてそれが機能する場合、あまり移植性がない）。最初のものは問題ないはずです。

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

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

これも機能するはずです。

更新：質問が編集されました。どちらのソリューションも同等になりました。

70
yorick

2番目の関数には次のものが必要です。

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

それからそれらは基本的に同じ機能です。

35
Evan Mulawski

2番目のバージョンでは、this.idから返された文字列を渡します。要素そのものではありません。

したがって、id.valueは、あなたが望むものを提供しません。

thisで要素を渡す必要があります。

doSomething(this)

その後：

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

注：一部のブラウザーでは、次のようにすると2番目のブラウザーが機能します。

window[id].value

要素IDはグローバルプロパティですが、これは安全ではありませんであるためです。

IDで再度取得するのではなく、thisで要素を渡すだけで最も意味があります。

9
user113716

オブジェクトを渡します。

doSomething(this)

オブジェクトからすべてのデータを取得できます。

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

または、idのみを渡します。

doSomething(this.id)

オブジェクトを取得し、その値の後：

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

効果を調べても違いはありません。値は同じです。しかし、もっと何かがあります...

解決策3：

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

dOM要素にidがある場合、jsで直接使用できます

0
Kamil Kiełczewski