JavaScript предоставляет следующие способы получения содержимого поля ввода:

Способ 1

document.getElementById('textbox_id').value // 获取指定 id 的内容

Пример

document.getElementById("searchTxt").value;

Попробуйте »

Примечание: методы 2, 3, 4 и 6 ниже возвращают коллекцию элементов. Используйте индекс[index], чтобы получить указанный элемент. Первый элемент использует[0], второй элемент использует[1], и так далее...

Способ 2

Используйте следующий метод, чтобы вернуть HTMLCollection:

document.getElementsByClassName('class_name')[index].value

Интерфейс HTMLCollection представляет собой обобщённую коллекцию (объект, подобный массиву, аналогичный arguments), содержащую элементы (в порядке элементов в потоке документа), а также предоставляет методы и свойства для выбора элементов из коллекции.

HTMLCollection в HTML DOM является живой; она автоматически обновляется при изменении структуры документа, которую содержит.

Пример

document.getElementsByClassName("searchField")[0].value;

Метод 3

Получить HTMLCollection по имени тега:

document.getElementsByTagName('tag_name')[index].value

Пример

Получить содержимое по имени тега input:

document.getElementsByTagName("input")[0].value;

Метод 4

Следующее возвращает NodeList. Объект NodeList — это коллекция узлов, обычно возвращаемая такими свойствами, как Node.childNodes, и такими методами, как document.querySelectorAll.

NodeList — это живая коллекция; то есть, если дерево узлов в документе изменяется, NodeList изменится соответственно.

document.getElementsByName('name')[index].value

Пример

Получить содержимое по атрибуту name, заданному на элементе:

document.getElementsByName("searchTxt")[0].value; // name 属性值为 searchTxt

Метод 5

Используйте CSS-селекторы, чтобы получить его; этот метод более мощный:

document.querySelector('selector').value // selector 是 CSS 选择器

Пример

Пример

document.querySelector('#searchTxt').value; // Получить по id
document.querySelector('.searchField').value; // Получить по классу
document.querySelector('input').value; // Получить по имени тега
document.querySelector('[name="searchTxt"]').value; // Получить по атрибуту name и значению

Метод 6

querySelectorAll может возвращать все элементы, соответствующие CSS-селектору; это NodeList.

document.querySelectorAll('selector')[index].value

Пример

Пример

document.querySelectorAll('#searchTxt')[0].value; // Получить по id
document.querySelectorAll('.searchField')[0].value; // Получить по классу
document.querySelectorAll('input')[0].value;  // Получить по имени тега
document.querySelectorAll('[name="searchTxt"]')[0].value; // Получить по атрибуту name и значению

Справочный материал