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

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

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