Предположим, что у нас есть элемент 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
