Получение значения элемента DOM с использованием чистого JavaScript - PullRequest
Новая
       15

Получение значения элемента DOM с использованием чистого JavaScript

65 голосов
/ 13 ноября 2010

Есть ли разница между этими решениями?

Решение 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)" />

Ответы [ 5 ]

70 голосов
/ 13 ноября 2010

Да , особенно! Я не думаю, что второй будет работать (и , если он работает, не очень переносимо ). Первый должен быть в порядке. 

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

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

Это также должно работать.

Обновление: вопрос был отредактирован. Оба решения теперь эквивалентны.

35 голосов
/ 13 ноября 2010

Вторая функция должна иметь: 

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

Тогда они в основном одинаковые функции.

9 голосов
/ 13 ноября 2010

Во второй версии вы передаете строку, возвращенную из this.id.Не сам элемент.

Так что id.value не даст вам то, что вы хотите.

Вам нужно будет передать элемент с this. 

doSomething(this)

then: 

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

Примечание. В некоторых браузерах второй будет работать, если вы это сделаете: 

window[id].value

, поскольку идентификаторы элементов являются глобальным свойством, но это небезопасно .

Лучше всего просто передать элемент с this, а не извлекать его снова с его идентификатором.

6 голосов
/ 28 марта 2015

Передать объект: 

doSomething(this)

Вы можете получить все данные из объекта: 

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

Или передать только id: 

doSomething(this.id)

Получить объект и после этого значения: 

function(id){
    var value = document.getElementById(id).value;  
}
0 голосов
/ 16 апреля 2019

Нет разницы, если мы посмотрим на эффект - значение будет таким же. Однако есть нечто большее ...

Решение 3: 

function doSomething() {
  console.log( theId.value );
}
<input id="theId" value="test" onclick="doSomething()" />

если элемент DOM имеет идентификатор, то вы можете использовать его непосредственно в js

...