Доступ к элементам в DOM

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

Чтобы научиться получать доступ к элементам в DOM, необходимо много знать о селекторах CSS, синтаксисе и терминологии, а также понимать элементы HTML. В этом мануале мы рассмотрим несколько способов получения доступа к элементам в DOM: по ID, классу, тегу и селектору запроса.

Общие сведения о методах доступа к элементам в DOM выражены в этой таблице.

Синтаксис селектора Метод
ID #demo getElementById()
Класс .demo getElementsByClassName()
Тег demo getElementsByTagName()
Селектор (один) querySelector()
Селекторы (все) querySelectorAll()

При изучении DOM важно выполнять примеры на вашем собственном компьютере, чтобы вы могли сохранять изученную информацию.

Вы можете сохранить HTML-файл access.html в свой проект, чтобы следовать примерам в этом мануале. Если вы не знаете, как работать с JavaScript и HTML локально, ознакомьтесь с руководством Добавление кода JavaScript в HTML.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accessing Elements in the DOM</title>
<style>
html { font-family: sans-serif; color: #333; }
body { max-width: 500px; margin: 0 auto; padding: 0 15px; }
div, article { padding: 10px; margin: 5px; border: 1px solid #dedede; }
</style>
</head>
<body>
<h1>Accessing Elements in the DOM</h1>
<h2>ID (#demo)</h2>
<div id="demo">Access me by ID</div>
<h2>Class (.demo)</h2>
<div class="demo">Access me by class (1)</div>
<div class="demo">Access me by class (2)</div>
<h2>Tag (article)</h2>
<article>Access me by tag (1)</article>
<article>Access me by tag (2)</article>
<h2>Query Selector</h2>
<div id="demo-query">Access me by query</div>
<h2>Query Selector All</h2>
<div class="demo-query-all">Access me by query all (1)</div>
<div class="demo-query-all">Access me by query all (2)</div>
</body>
</html>

В этом HTML-файле много элементов, доступ к которым можно получить с помощью методов document. Откройте файл в браузере. Вы увидите страницу Accessing Elements in the DOM.

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

Доступ к элементам по ID

Самый простой способ получить доступ к одному элементу в DOM – это по его уникальному идентификатору. Извлечь элемент по ID можно с помощью метода getElementById() объекта document.

Читайте также: ID элемента

document.getElementById();

Чтобы к HTML-элементу можно было получить доступ по ID, у него должен быть атрибут id. У элемента div есть ID demo.

<div id="demo">Access me by ID</div>

В консоли присвойте элемент переменной demoId.

const demoId = document.getElementById('demo');

Введите следующее в консоль, и вы получите элемент HTML:

console.log(demoId);
<div id="demo">Access me by ID</div>

Вы можете убедиться, что получили доступ к правильному элементу, изменив свойство border на purple.

demoId.style.border = '1px solid purple';

После этого страница в браузере должна измениться.

Доступ к элементу по ID – эффективный способ быстро извлечь элемент DOM. Однако у него есть недостатки; ID должен быть уникальным, поэтому получить доступ с помощью метода getElementById() можно только к одному элементу за раз. Если вы хотите добавить функцию к нескольким элементам на странице, ваш код станет повторяться.

Доступ к элементам по классу

Атрибут class используется для доступа к одному или нескольким конкретным элементам в DOM. Получить все элементы с заданным именем класса можно с помощью метода getElementsByClassName().

document.getElementsByClassName();

Попробуйте получить доступ к нескольким элементам. В данном примере есть два элемента с классом demo.

<div class="demo">Access me by class (1)</div>
<div class="demo">Access me by class (2)</div>

Обратитесь к элементам в консоли и поместите их в переменную demoClass.

const demoClass = document.getElementsByClassName('demo');

На данный момент может показаться, что вы можете изменять элементы так же, как и в примере с ID. Однако если вы попытаетесь запустить следующий код и изменить свойство border для элементов класса на orange, вы получите сообщение об ошибке.

demoClass.style.border = '1px solid orange';
Uncaught TypeError: Cannot set property 'border' of undefined

Это не работает потому, что вместо одного простого элемента у вас есть объект элементов, подобный массиву.

console.log(demoClass);
(2) [div.demo, div.demo]

Читайте также: Работа с массивами в JavaScript

К массивам JavaScript необходимо обращаться по индексам. Чтобы изменить первый элемент этого массива, используйте индекс 0.

demoClass[0].style.border = '1px solid orange';

Обычно при обращении к элементам по классам необходимо применить изменение ко всем элементам документа с этим конкретным классом, а не только к одному из элементов. Для этого нужно создать цикл for и перебрать все элементы массива.

for (i = 0; i < demoClass.length; i++) {
demoClass[i].style.border = '1px solid orange';
}

Запустите этот код и вернитесь на страницу в браузере. Вы увидите, что она изменилась.

Доступ к элементам по тегу

Еще один способ доступа к нескольким элементам на странице – это HTML-тег. Получить элемент по тегу можно с помощью метода getElementsByTagName().

document.getElementsByTagName();

В этом примере используется тег article:

<article>Access me by tag (1)</article>
<article>Access me by tag (2)</article>

GetElementsByTagName(), как при доступе по классу, возвращает объект элементов, подобный массиву, где модифицировать каждый тег в документе можно с помощью цикла for.

const demoTag = document.getElementsByTagName('article');
for (i = 0; i < demoTag.length; i++) {
demoTag[i].style.border = '1px solid blue';
}

Просмотрите страницу в браузере.

Цикл изменил свойство border всех элементов article на синий.

Селекторы запросов

Если у вас есть опыт работы с jQuery API, вы можете быть знакомы с методом доступа jQuery к DOM с помощью селекторов CSS.

$('#demo'); // returns the demo ID element in jQuery

В JavaScript можно сделать то же с помощью методов querySelector() и querySelectorAll().

document.querySelector();
document.querySelectorAll();

Чтобы получить доступ к одному элементу, нужно использовать метод querySelector(). В HTML-файле у вас есть элемент demo-query.

<div id="demo-query">Access me by query</div>

Селектором атрибута id является символ #. Можно присвоить элемент с id demo-query переменной demoQuery.

const demoQuery = document.querySelector('#demo-query');

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

В этом файле есть два элемента с классом demo-query-all:

<div class="demo-query-all">Access me by query all (1)</div>
<div class="demo-query-all">Access me by query all (2)</div>

Селектором атрибута class является точка (.). Вы можете обратиться к классу с помощью .demo-query-all.

const demoQueryAll = document.querySelectorAll('.demo-query-all');

Метод forEach() позволяет присвоить цвет green свойству border всех совпадающих элементов.

demoQueryAll.forEach(query => {
query.style.border = '1px solid green';
});

С помощью querySelector() разделенные запятыми значения функционируют как оператор OR. Например, querySelector (‘div, article’) будет соответствовать div или article, в зависимости от того, что отображается первым в документе. С помощью querySelectorAll() значения, разделенные запятыми, функционируют как оператор AND, а querySelectorAll (‘div, article’) будет соответствовать всем значениям div и article в документе.

Селекторы запросов – чрезвычайно производительный метод, так как он позволяет получить доступ к любому элементу или группе элементов в DOM так же, как в CSS-файле. Для получения полного списка селекторов обратитесь к Mozilla Developer Network.

Полный код

Ниже вы найдете полный код файла, который получился в результате этого мануала. Вы можете использовать его для доступа ко всем элементам на тестовой странице. Сохраните файл как access.js и загрузите его в файл HTML прямо перед закрытием тега body.

// Assign all elements
const demoId = document.getElementById('demo');
const demoClass = document.getElementsByClassName('demo');
const demoTag = document.getElementsByTagName('article');
const demoQuery = document.querySelector('#demo-query');
const demoQueryAll = document.querySelectorAll('.demo-query-all');
// Change border of ID demo to purple
demoId.style.border = '1px solid purple';
// Change border of class demo to orange
for (i = 0; i < demoClass.length; i++) {
demoClass[i].style.border = '1px solid orange';
}
// Change border of tag demo to blue
for (i = 0; i < demoTag.length; i++) {
demoTag[i].style.border = '1px solid blue';
}
// Change border of ID demo-query to red
demoQuery.style.border = '1px solid red';
// Change border of class query-all to green
demoQueryAll.forEach(query => {
query.style.border = '1px solid green';
});

Вы можете самостоятельно расширить этот файл.

Заключение

В этом мануале вы узнали 5 способов доступа к элементам HTML в DOM – по ID, по классу, по тегу HTML и по селекторам. Метод, который вы будете использовать для получения элемента или группы элементов, должен зависеть от поддержки браузера и количества элементов, которыми нужно управлять.

Tags: