使用纯JavaScript获取DOM元素值

这些解决方案之间有什么区别吗？

解决方案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)" />

是的，最值得注意的是！我认为第二个代码不起作用（如果可行，则不是非常可移植）。第一个应该没问题。

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

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

这也应该起作用。

更新：问题已被编辑。两种解决方案现在都是等效的。

第二个功能应具有：

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

那么它们基本上是相同的功能。

在第二个版本中，您传递了从返回的String this.id。不是元素本身。

所以id.value不会给你你想要的。

您需要使用传递元素this。

doSomething(this)

然后：

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

注意：在某些浏览器中，如果您使用第二种浏览器，则可以使用：

window[id].value 

因为元素ID是全局属性，但是 并不安全。

传递元素this而不是使用其ID再次获取元素是最有意义的。

传递对象：

doSomething(this)

您可以从对象获取所有数据：

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

或id仅通过：

doSomething(this.id)

获取对象并获得该值：

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

如果我们观察效果没有什么区别-值将是相同的。但是还有更多...

解决方案3：

function doSomething() {
  console.log( theId.value );
}

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

如果DOM元素具有id，那么您可以直接在js中使用它