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

Вступление

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

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

обзор

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

Gets Selector Syntax Method

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

#demo

getElementById()

Class

.demo

getElementsByClassName()

Tag

demo

getElementsByTagName()

Selector (single)

querySelector()

Selector (all)

querySelectorAll()

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

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

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

изображение: https: //assets.digitalocean.com/articles/eng_javascript/dom/html-rendering.png [Просмотр в браузере страницы access.html]

Для доступа к доступным элементы в файле.

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

Самый простой способ получить доступ к одному элементу в DOM - это его уникальный ID. Мы можем получить элемент по идентификатору с помощью метода https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById [+ getElementById () +] объекта + document +.

document.getElementById();

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

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

В Console давайте возьмем элемент и назначим его переменной + demoId +.

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

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

console.log(demoId);

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

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

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

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

image: https: //assets.digitalocean.com/articles/eng_javascript/dom/id-element.png [Отображение в браузере стиля элемента ID]

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

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

Атрибут class используется для доступа к одному или нескольким конкретным элементам в DOM. Мы можем получить все элементы с данным именем класса с помощью метода https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName [+ getElementsByClassName () +].

document.getElementsByClassName();

Теперь мы хотим получить доступ к более чем одному элементу, и в нашем примере у нас есть два элемента с классом + demo +.

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

Давайте получим доступ к нашим элементам в Console и поместим их в переменную с именем + demoClass +.

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

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

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

OutputUncaught TypeError: Cannot set property 'border' of undefined

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

console.log(demoClass);

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

JavaScript arrays должен быть доступен с индексным номером. Поэтому мы можем изменить первый элемент этого массива, используя индекс + 0 +.

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

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

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

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

изображение: https: //assets.digitalocean.com/articles/eng_javascript/dom/class-element.png [Отображение в браузере стилей элементов класса]

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

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

Менее конкретный способ доступа к нескольким элементам на странице - по имени HTML-тега. Мы получаем элемент по тегу с помощью метода https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName [+ 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';
}

После запуска кода живая страница будет изменена следующим образом:

изображение: https: //assets.digitalocean.com/articles/eng_javascript/dom/tag-element.png [Браузерная визуализация стиля элемента тега]

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

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

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

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

Мы можем сделать то же самое в простом JavaScript с помощью методов + querySelector () + и + querySelectorAll () +.

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

Чтобы получить доступ к одному элементу, мы будем использовать метод https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector [+ querySelector () +]. В вашем HTML-файле у нас есть элемент + demo-query

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

Селектором для атрибута + id + является символ хеша (+ # +). Мы можем присвоить элемент с идентификатором + demo-query переменной` + demo Query`.

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

В случае селектора с несколькими элементами, такими как класс или тег, + querySelector () + вернет первый элемент, соответствующий запросу. Мы можем использовать метод https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll [+ 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';
});

изображение: https: //assets.digitalocean.com/articles/eng_javascript/dom/query-selector.png [Отображение в браузере стиля querySelector ()]

С помощью + querySelector () + значения, разделенные запятыми, функционируют как оператор ИЛИ. Например, + querySelector ('div, article') + будет соответствовать + div + or + article +, в зависимости от того, что будет первым в документе. С помощью + querySelectorAll () + значения, разделенные запятыми, действуют как оператор AND, а + querySelectorAll ('div, article') + будет соответствовать всем значениям + div + and + article + в документе.

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

Полный код JavaScript

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

access.js

// 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-файл будет выглядеть так:

access.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.

TOC

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

Вступление

обзор

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

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

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

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

Полный код JavaScript

Заключение

Related