使用纯JavaScript获取DOM元素值

Question

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

解决方案1:

function doSomething(id, value) {
  console.log(value);
  //...
}

......和解决方案2:

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

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

在第二个版本中,您将传递从中返回的String 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;  
}