Самый простой способ получить доступ к значению поля ввода текста в html форме JavaScript?

Question

Я хочу получить доступ к значению поля ввода как можно проще из JavaScript.

<form name="F">
  <input name="searchTxt" type="text" id="searchTxt">
</form>

Я могу получить доступ к значению следующим методом (проверено на Firefox отладчике):

document.F.searchTxt.value

Но я обнаружил, что этот метод является диалектом из Inte rnet Explorer (и работает на большинстве браузеров для совместимости), и он устарел в W3 C DOM. (ссылка: Использование W3 C DOM - Архив устаревшего содержимого | MDN )

Другой способ, который я нашел, - использование атрибутов forms и elements с именем его потомка:

document.forms.F.elements.searchTxt.value

Мне нравится этот метод, и я чувствую, что он прост, потому что он не требует скобок или кавычек, а только точек в утверждении. (ссылка: Получение ссылок на формы и элементы формы в JavaScript - Dynami c Web Coding )

Я думаю, секрет этого метода в том, что form имеет name (вместо или дополнительно к id), поэтому к нему можно получить доступ по его простому имени.

Скажите, пожалуйста, более простой, более стабильный или лучший способ доступа к значениям поля.

Answer 1

let searchTxt= document.forms["F"]["searchTxt"].value;

Answer 2

Вы можете использовать document.querySelector для доступа к элементу DOM формы, и он имеет все необходимые вам свойства:

const form = document.querySelector('form');
console.log(form.elements.searchTxt.value);