Предположим, что у нас есть элемент body с одним элементом input внутри:
<body>
<input type="text" value="Текст в инпуте">
</body>
Выглядит в браузере это таким образом:
Как нам получить строку «Текст в инпуте» из разметки страницы при помощи JavaScript?
Видео
Шаг № 1 — Получение всех элементов input на странице
Вводим в консоль браузера команду:
document.getElementsByTagName("input")
Она вернёт нам объект класса HTMLCollection. Это «почти» массив из объектов элементов HTML-разметки.
Шаг № 2 — Получение нужного нам элемента input
Т. к. у нас всего один input на странице, то нам нужно получить первый элемент «почти»-массива.
document.getElementsByTagName("input")[0]
Эта команда вернёт нам один единственный input со страницы. Теперь мы знаем как к нему обращаться.
Шаг № 3 — Получение значения из атрибута value у нужного нам элемента input
Наш input имеет тип «text«. То есть это простое текстовое поле в которое пользователь может вводить символы. В любой момент времени из этого поля можно получить данные, которые в нём записанты.
Для этого нужно получить значение атрибута value у нужного нам элемента input. В случае объектов JavaScript, value будет свойством объекта.
document.getElementsByTagName("input")[0].value
Данная команда вернёт нам искомую строку
"Текст в инпуте"
Скрин из консоли:
Информационные ссылки
Стандарт 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
