Доступ к элементам в 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: DOM