Получение ссылки на объект DOM
На основе разметки HTML браузер создает объектную модель документа (DOM - document object model). Корневым объектом DOM является элемент html. html является родительским элементом для элементов head и body, которые в свою очередь содержат свои дочерние элементы.
Если в разметке HTML допущена ошибка или отсутствует обязательный элемент, браузер создаст или переместит этот элемент. html head body, будут созданы даже при отсутствии в разметке. Элементы предназначенные для размещения в body, будут перемещены в body из других элементов.
В процессе создания DOM, если браузер обнаруживает элемент script предназначенный для размещения JavaScript кода, браузер приостанавливает построение DOM и происходит выполнение кода JavaScript. Код JavaScript выполняется встроенным в браузер интерпретатором, который получает доступ к объекту document через глобальный объект window. Объект window - окно в котором отображается страница. Объект document - DOM текущей страницы. Используя объект document можно изменять, создавать, перемещать или удалять элементы текущей страницы.
Получение ссылки на объект DOM (элемент HTML):
<span id='myObjectSpan'>объект span</span>
let mos = document.querySelector('#myObjectSpan')
объект span
Метод querySelector глобального объекта document позволяет обратиться к объектам DOM по их идентификатору #myObjectSpan используя синтаксис CSS;
Переменная mos содержит ссылку на объект span.
Теперь обращаясь к свойствам объекта span с идентификаторам myObjectSpan через переменную mos
можно изменить их значения. Например изменить содержимое элемента:
mos.textContent='текст объекта span изменен'
<span id='myObjectSpan'>текст объекта span изменен</span>
объект span
Ссылку на объект DOM можно получить используя имя его класса:
<span class='myObjectSpanC'>объект span</span>
let mosc = document.querySelector('.myObjectSpanC')
mosc.textContent='ссылка на этот объект получена по идентификатору класса'
объект span
Ссылки на несколько объектов DOM можно получить используя метод querySelectorAll():
<span class='spanAll'>1 объект span</span>
<span class='spanAll'>2 объект span</span>
let spanAllQ = document.querySelectorAll('.spanAll')
spanAllQ[0].textContent='изменен текст объекта 1'
spanAllQ[1].textContent='изменен текст объекта 2'
mosc.textContent='ссылка на этот объект получена по идентификатору класса'
1 объект span
2 объект span
spanAllQ содержит ссылки на объекты DOM с идентификатором spanAllQ;
Данные списка объектов spanAllQ можно извлекать при помощи циклов работающих с объектами.