Nhận giá trị phần tử DOM bằng JavaScript thuần túy

Có sự khác biệt nào giữa các giải pháp này?

Giải pháp 1:

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

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

... và Giải pháp 2:

function doSomething(id) {
  var value = document.getElementById(id).value;
  console.log(value);
  //...
}

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

Vâng , đáng chú ý nhất! Tôi không nghĩ rằng cái thứ hai sẽ hoạt động (và nếu nó có, không phải là rất linh hoạt ). Cái đầu tiên sẽ ổn.

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

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

Điều này cũng sẽ hoạt động.

Cập nhật: câu hỏi đã được chỉnh sửa. Cả hai giải pháp bây giờ là tương đương.

Hàm thứ hai nên có:

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

Sau đó, chúng về cơ bản là cùng một chức năng.

Trong phiên bản thứ hai, bạn đang chuyển Chuỗi được trả về từ đó this.id. Không phải bản thân phần tử.

Vì vậy, id.valuesẽ không cung cấp cho bạn những gì bạn muốn.

Bạn sẽ cần phải chuyển phần tử với this.

doSomething(this)

sau đó:

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

Lưu ý: Trong một số trình duyệt, trình duyệt thứ hai sẽ hoạt động nếu bạn đã:

window[id].value 

vì ID phần tử là thuộc tính toàn cục, nhưng điều này không an toàn .

Sẽ là hợp lý nhất nếu chỉ chuyển phần tử với thisthay vì tìm nạp lại bằng ID của nó.

Chuyển đối tượng:

doSomething(this)

Bạn có thể lấy tất cả dữ liệu từ đối tượng:

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

Hoặc vượt qua idduy nhất:

doSomething(this.id)

Nhận đối tượng và sau giá trị đó:

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

Không có sự khác biệt nếu chúng ta nhìn vào hiệu ứng - giá trị sẽ giống nhau. Tuy nhiên có điều gì đó hơn ...

Giải pháp 3:

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

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

nếu phần tử DOM có id thì bạn có thể sử dụng nó trong js trực tiếp