Объектная модель документа (DOM) - это структурное представление HTML-документа. DOM - это дерево узлов, которое браузер создает для каждой веб-страницы в Интернете.

Модель DOM объектно-ориентирована. Каждый элемент в DOM имеет собственный набор атрибутов и методов, к которым вы можете получить доступ с помощью JavaScript.

В этой обучающей статье вы узнаете, как использовать функции селектора DOM для доступа к элементам веб-страницы.

Как получить доступ к элементам DOM

Вы можете получить доступ к элементу DOM верхнего уровня веб-страницы через глобальный объект документа. Например, если у вас есть такая веб-страница:

Добро пожаловать


 Lorem ipsum dolor sit amet conctetur adipisicing elit. Tenetur asperiores voluptatum et Repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.




О


 Lorem ipsum dolor sit amet conctetur adipisicing elit. Tenetur asperiores voluptatum et Repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.







instagram viewer



Статьи



Заголовок статьи 1


 Lorem ipsum dolor sit amet conctetur adipisicing elit. Tenetur asperiores voluptatum et Repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.


 Читать далее 





Второй заголовок статьи


 Lorem ipsum dolor sit amet conctetur adipisicing elit. Tenetur asperiores voluptatum et Repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.


 Читать далее 





Третий заголовок статьи


 Lorem ipsum dolor sit amet conctetur adipisicing elit. Tenetur asperiores voluptatum et Repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.


 Читать далее 





Четвертый заголовок статьи


 Lorem ipsum dolor sit amet conctetur adipisicing elit. Tenetur asperiores voluptatum et Repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.


 Читать далее 

Набор текста документ в консоли браузера и нажатие клавиши Enter приведет к следующему результату:

Вывод в вашей консоли интерактивный. Вы можете нажать на голова и тело элементы, чтобы расширить их. В результате будет получен следующий результат:

Каждый элемент раздела в тег также может быть расширен. В зависимости от структуры веб-страницы, элементы будут расширяться, чтобы открывать больше элементов. Это должно дать вам более четкое представление о структуре DOM.

Связанный: Скрытый герой веб-сайтов: понимание DOM

У объекта документа есть специальное свойство, тело, представляющий элемент body. Итак, чтобы получить доступ к элементу body, вы можете ввести в консоли следующее:

document.body

Это даст следующий результат:

Но это все, что вы можете сделать, используя свойства объекта. У каждой страницы есть заголовок и тело, но в остальном она уникальна. Итак, набирая document.body.section или что-то подобное просто не будет работать так, как вам хотелось бы. Вместо этого есть методы, которые вы можете вызывать у объекта документа для доступа к определенным элементам.

Что такое селекторы элементов DOM?

Селекторы элементов DOM - это группа методов JavaScript, которые вы можете использовать в объекте документа для доступа к элементам на веб-странице. Селекторы элементов DOM делятся на две категории - одиночные и множественные селекторы.

Эти функции действуют аналогично селекторам CSS. Они позволяют вам извлекать элементы на основе их имени тега или их атрибутов id и class. Вы даже можете получать элементы с помощью любого селектора CSS.

Связанный: Как настроить таргетинг на часть веб-страницы с помощью селекторов CSS

Одноэлементные селекторы:

• getElementById ()
• querySelector ()

Селекторы с несколькими элементами:

• getElementsByTagName ()
• getElementsByClassName ()
• querySelectorAll ()

Селектор элементов DOM, который вы используете, будет зависеть от элементов, к которым вы пытаетесь получить доступ.

Использование отдельных селекторов элементов DOM

Селекторы чаще всего встречаются в приложениях JavaScript. Итак, отойдем от консоли. Создайте файл JavaScript и свяжите его со своим файлом HTML, используя следующий тег скрипта:

Где значение src - это имя вашего файла JavaScript. Поместите этот тег скрипта непосредственно перед закрывающим тегом тела, .

В getElementById () предоставляет доступ к отдельному элементу на веб-странице, используя значение его идентификатора. В HTML-документе выше есть несколько элементов с идентификаторами. Чтобы нацелить div элемент с идентификатором article-3, вы можете добавить следующий код в свой файл JavaScript:

значение = document.getElementById ('статья-3')

Теперь элемент div с статья-3 ID и все соответствующие свойства доступны из ценность Переменная. Вы можете распечатать ценность в консоль, используя следующую строку кода:

console.log (значение)

Вы увидите имя класса, присвоенное элементу div, а также другие важные атрибуты, такие как внутренний HTML.

Другой одноэлементный селектор - это querySelector (). Эта функция более универсальна, так как вы можете передать ей любую строку селектора CSS. Однако вы по-прежнему можете использовать его только для выбора одного элемента за раз.

Например, в приведенном выше макете HTML есть один класс - статьи. Четыре элемента div используют этот класс, но querySelector () функция вернет только первый элемент, имеющий класс "статьи".

Использование querySelector () с классом

Добавьте следующий код в конец вашего скрипта:

значение = document.querySelector ('. статьи')
console.log (значение)

Это вернет только первый div элемент с классом «статьи». Обратите внимание, что вы указываете селектор в том же формате, что и селектор CSS. В CSS начальная точка указывает имя класса.

Использование querySelector () с идентификатором

значение = document.querySelector ('# article-3')
console.log (значение)

Этот код вернет единственный элемент с идентификатором «article-3», третий div элемент с классом «статьи». Опять же, строка селектора использует стандартный синтаксис CSS с # символ, определяющий идентификатор.

Использование нескольких селекторов элементов DOM

Остальные селекторные функции извлекают группы элементов. Они есть getElementsByTagName (), getElementsByClassName (), и querySelectorAll ().

Использование getElementsByTagName ()

В getElementsByTagName () selector выбирает группу элементов с одинаковым именем тега. Например, если вы хотите выбрать все h2 элементы на веб-странице, вы можете использовать следующий код:

значение = document.getElementsByTagName ('h2')
console.log (значение)

Это сохраняет все элементы h2 в коллекции HTML с именем value.

Использование getElementsByClassName ()

В getElementsByClassName () selector возвращает коллекцию элементов с тем же именем класса.

значение = document.getElementsByClassName ('статьи')
console.log (значение)

Вставка приведенного выше кода в ваш файл JavaScript вернет четыре элемента div с именем класса «article» в консоли браузера.

Использование querySelectorAll ()

В querySelectorAll () Метод возвращает список узлов всех элементов, соответствующих данному селектору. Чтобы получить доступ ко всем элементам абзаца в разделе блога, вы можете использовать следующий код:

значение = document.querySelectorAll ('# блог p')
console.log (значение)

Вы даже можете включить в строку несколько селекторов, разделяя их запятыми, как в CSS:

значение = document.querySelectorAll ('h2, .articles')
console.log (значение)

Используйте селекторы DOM для создания динамических веб-страниц

На этом этапе вы должны иметь четкое представление о модели DOM и о том, как она работает. Вы также должны знать различные одиночные и множественные селекторы, а также то, как их использовать.

Тем не менее, получение доступа к элементам HTML - это только первый шаг в том, что вы можете делать с помощью селекторов DOM. Селекторы DOM помогут вам разработать функциональные аспекты вашего веб-сайта, такие как обработка событий onclick и onscroll.

Как сделать ваш сайт адаптивным и интерактивным с помощью CSS и JavaScript

Вы настроили свой веб-сайт с помощью HTML и CSS, но теперь вам нужно добавить логику. Вот что надо делать.

Читать далее

Об авторе