Question

这些解决方案之间是否存在差异？

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

Answer 1

是，最值得注意的是！我不认为第二个会起作用（如果是的话，，不是非常便携）。第一个应该没问题。

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

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

这也应该有用。

更新：问题已被修改。这两种解决方案现在都是等价的。

Answer 2

第二个功能应该有：

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

然后它们基本上是相同的功能。

Answer 3

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

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

您需要使用this传递元素。

doSomething(this)

然后：

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

注意：在某些浏览器中，如果您执行了以下操作，第二个浏览器将起作用：

window[id].value

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

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

Answer 4

传递对象：

doSomething(this)

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

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

或仅传递id：

doSomething(this.id)

获取对象并在该值之后：

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

Answer 5

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

解决方案3：

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

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

如果DOM元素具有id，则可以直接在js中使用

使用纯JavaScript获取DOM元素值

5 个答案: