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

Введение

В разделе «Понимание дерева и узлов DOM» мы рассмотрели, как DOM структурирован как дерево объектов, называемых узлами, и эти узлы могут быть текстом, комментариями или элементами. Обычно, когда мы обращаемся к содержимому в DOM, это происходит через узел элемента HTML.

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

Обзор

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

Gets	Selector Syntax	Method
ID	`#demo`	`getElementById()`
Class	`.demo`	`getElementsByClassName()`
Tag	`demo`	`getElementsByTagName()`
Selector (single)		`querySelector()`
Selector (all)		`querySelectorAll()`

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

Создайте новый файл 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. Когда мы визуализируем файл в браузере, он будет выглядеть примерно так:

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

Доступ к элементам по идентификатору

Самый простой способ получить доступ к одному элементу в DOM — использовать его уникальный метод getElementById() объекта document.

document.getElementById();

Для доступа по идентификатору элемент HTML должен иметь атрибут id. У вас есть элемент div с идентификатором demo, который вы можете использовать:

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

В Консоли получите элемент и назначьте его переменной demoId.

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

Запись demoId в консоль вернет весь наш HTML-элемент.

console.log(demoId);

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

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

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

Как только вы это сделаете, ваша живая страница будет выглядеть так:

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

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

Метод 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');

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

demoClass.style.border = '1px solid orange';

OutputUncaught TypeError: Cannot set property 'border' of undefined

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

console.log(demoClass);

Output(2) [div.demo, div.demo]

Доступ к массивам JavaScript должен осуществляться по номеру индекса. Вы можете изменить первый элемент этого массива, используя индекс 0.

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

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

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

Когда вы запустите этот код, ваша живая страница будет отображаться следующим образом:

Теперь вы выбрали все элементы на странице, имеющие класс demo, и изменили свойство border на оранжевый.

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

Менее конкретный способ доступа к нескольким элементам на странице — по имени тега 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 — это символ решетки (#). Вы можете назначить элемент с идентификатором 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(), вы можете применить цвет зеленый к свойству border всех соответствующих элементов.

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

В querySelector() значения, разделенные запятыми, функционируют как оператор ИЛИ. Например, querySelector(div, article) будет соответствовать div или article, в зависимости от того, что появляется первым в документе. При использовании querySelectorAll() значения, разделенные запятыми, функционируют как оператор И, а querySelectorAll(div, article) будет соответствовать всем div и значения article в документе.

Использование методов селектора запроса чрезвычайно эффективно, поскольку вы можете получить доступ к любому элементу или группе элементов в DOM так же, как в файле CSS. Полный список селекторов см. в статье «Селекторы CSS» в сети разработчиков Mozilla.

Полный код JavaScript

Ниже приведен полный сценарий работы, которую вы сделали выше. Вы можете использовать его для доступа ко всем элементам на нашей примерной странице. Сохраните файл как 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';
});

Ваш окончательный файл 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>

  <script src="access.js"></script>

</body>

</html>

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

Заключение

В этом руководстве мы рассмотрели 5 способов доступа к HTML-элементам в DOM — по идентификатору, по классу, по имени HTML-тега и по селектору. Метод, который вы будете использовать для получения элемента или группы элементов, будет зависеть от поддержки браузера и от того, сколькими элементами вы будете манипулировать. Теперь вы должны чувствовать себя уверенно, получая доступ к любому элементу HTML в документе с помощью JavaScript через DOM.