使用纯 JavaScript 获取 DOM 元素值

Question

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

解决方案一：

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中使用它

Answer 6

这也应该有效。

function doSomething() {
  yourElement = document.getElementById("yourID);
    yourValue = yourElement.value; console.log(yourValue);
    console.log(yourValue);
  }

<div id="yourID" value="1" onclick="doSomething()">
</div>

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

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