JavaScript | Как получить данные из input (HTML-элемента)?

Предположим, что у нас есть элемент body с одним элементом input внутри:

<body>
    <input type="text" value="Текст в инпуте">
</body>

Выглядит в браузере это таким образом:

Текст в инпуте - HTML
Текст в инпуте — HTML

Как нам получить строку «Текст в инпуте» из разметки страницы при помощи JavaScript?

Видео

Шаг № 1 — Получение всех элементов input на странице

Вводим в консоль браузера команду:

document.getElementsByTagName("input")

Она вернёт нам объект класса HTMLCollection. Это «почти» массив из объектов элементов HTML-разметки.

 

Шаг № 2 — Получение нужного нам элемента input

Т. к. у нас всего один input на странице, то нам нужно получить первый элемент «почти»-массива.

document.getElementsByTagName("input")[0]

Эта команда вернёт нам один единственный input со страницы. Теперь мы знаем как к нему обращаться.

Получили один HTML-элемент input - JavaScript
Получили один HTML-элемент input — JavaScript

 

Шаг № 3 — Получение значения из атрибута value у нужного нам элемента input

Наш input имеет тип «text«. То есть это простое текстовое поле в которое пользователь может вводить символы. В любой момент времени из этого поля можно получить данные, которые в нём записанты.

Для этого нужно получить значение атрибута value у нужного нам элемента input. В случае объектов JavaScript, value будет свойством объекта.

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

Данная команда вернёт нам искомую строку

"Текст в инпуте"

Скрин из консоли:

Получили текст из input - JavaScript
Получили текст из input — JavaScript

Информационные ссылки

DOM

Стандарт HTML — Раздел «4.10.5 The input element» — https://html.spec.whatwg.org/#the-input-element

Стандарт HTML — Раздел «The value content attribute» — https://html.spec.whatwg.org/#attr-input-value

Стандарт DOM — Раздел «4.5. Interface Document» — https://dom.spec.whatwg.org/#interface-document

Стандарт DOM — Раздел «The getElementsByTagName(qualifiedName) method» — https://dom.spec.whatwg.org/#dom-document-getelementsbytagname

Поделись записью