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

Ответ 1

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

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

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

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

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

Ответ 2

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

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

Тогда они являются в основном одной и той же функцией.

Ответ 3

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

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

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

doSomething(this)

то

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

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

window[id].value 

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

Это имеет смысл просто передать элемент с помощью this вместо того, чтобы снова извлечь его с его идентификатором.

Ответ 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;  
}

Ответ 5

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

Решение 3:

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

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