Как изменять атрибуты, классы и стили в DOM

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

Обзор выбора элементов

Библиотека jQuery упростила процесс выбора одного или нескольких элементов и применения изменений ко всем одновременно.

Напомним, что document.querySelector() и document.getElementById() — это способы, которые используются для доступа к одному элементу. Используя div с атрибутом id, мы можем приобрести доступ к данному элементу.

<div id="demo-id">Demo ID</div>

Способ querySelector() будет более надежным. Он может выбрать элемент на странице при помощи любого типа селектора.

// Оба способа возвращают единственный элементconst demoId = document.querySelector('#demo-id');

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

// Изменяем текст одного элементаdemoId.textContent = 'Demo ID text updated.';

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

<div class="demo-class">Demo Class 1</div><div class="demo-class">Demo Class 2</div>

Мы будем использовать способ querySelectorAll() для захвата всех элементов с классом demo-class. А также forEach() для их перебора и изменения.

Также к определенному элементу можно приобрести доступ при помощи querySelectorAll():

// Получаем NodeList всех элементов.democonst demoClasses = document.querySelectorAll('.demo-class');// Изменяем текст нескольких элементов при помощи циклаdemoClasses.forEach(element => { element.textContent = 'All demo classes updated.';});// Получаем доступ к первому элементу в NodeListdemoClasses[0];

Свойства и способы, используемые в примерах, приведенных в данной статье, часто будут привязаны к прослушивателям событий. Благодаря им они смогут реагировать на клики, наведения курсора и иные действия посетителей.

Примечание: Способы getElementsByClassName() и getElementsByTagName() возвращают наборы элементов HTML, не имеющие доступа к способу forEach(). Он использует querySelectorAll(). В данных случаях надо применять стандартный цикл for для перебора набора.

Изменение атрибутов

Атрибуты — это значения, которые содержат дополнительную информацию об HTML-элементах. Чаще всего они состоят из пары имя / значение и могут применяться в зависимости от элемента. Полный список HTML- атрибутов смотрите в списке атрибутов .

К пользовательским элементам, которые не являются частью стандарта HTML, добавляется префикс data-.

В JavaScript доступно четыре способа изменения атрибутов элемента:

Способ Описание Пример
hasAttribute() Возвращает логическое значение true или false element.hasAttribute(‘href’);
getAttribute() Возвращает значение указанного атрибута или null element.getAttribute(‘href’);
setAttribute() Добавляет или обновляет значение указанного атрибута element.setAttribute(‘href’, ‘index.html’);
removeAttribute() Удаляет атрибут из элемента element.removeAttribute(‘href’);

Создадим новый HTML-файл с тегом <img>, использующим один атрибут. В нем мы будем ссылаться на изображение, доступное через URL-адрес.

<!DOCTYPE html><html lang="en"><body> <img src="https://js-tutorials.nyc3.digitaloceanspaces.com/shark.png"></body></html>

При загрузке созданной веб-страницы в браузере ее HTML-код будет выглядеть следующим образом:

Как изменять атрибуты, классы и стили в DOM

Сейчас протестируем все способы для обработки атрибутов.

// Назначаем элемент изображенияconst img = document.querySelector('img');img.hasAttribute('src'); // возвращает trueimg.getAttribute('src');       // возвращает "...shark.png"img.removeAttribute('src');             // удаляет атрибут src и значение

Удалим атрибут src и значение, связанные с тегом <img>. Но можно легко сбросить этот атрибут и назначить ему иное изображение при помощи img.setAttribute():

img.setAttribute('src', 'https://js-tutorials.nyc3.digitaloceanspaces.com/octopus.png');
Как изменять атрибуты, классы и стили в DOM

Также можно легко настроить атрибут прямо, присвоив ему новое значение в виде свойства элемента:

img.src = 'https://js-tutorials.nyc3.digitaloceanspaces.com/shark.png';

Любой атрибут может быть отредактирован так же, как и при помощи описанных выше способов.

Способы hasAttribute() и getAttribute() используются с условными операторами. Способы setAttribute() и removeAttribute() также применяются для изменения структуры DOM.

Изменение классов

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

В JavaScript есть свойства className и classList, предназначенные для работы с атрибутом class.

Способ / Свойство Описание Пример
className Получает или задает значение класса element.className;
classList.add() Добавляет одно или пару значений класса element.classList.add(‘active’);
classList.toggle() Имеет или отключает класс element.classList.toggle(‘active’);
classList.contains() Проверяет, существует ли класс. element.classList.contains(‘active’);
classList.replace() Заменяет существующее значение класса новым. element.classList.replace(‘old’, ‘new’);
classList.remove() Удаляет значение класса. element.classList.remove(‘active’);

Создадим ещё один HTML-файл для демонстрации перечисленных выше способов.

<!DOCTYPE html><html lang="en"><style>    body {        max-width: 600px;        margin: 0 auto;        font-family: sans-serif;    }.active {        border: 2px solid blue;    }.warning {        border: 2px solid red;    }.hidden {        display: none;    }    div {        border: 2px dashed lightgray;        padding: 15px;        margin: 5px;    }</style><body>    <div>Div 1</div>    <div class="active">Div 2</div></body></html>

После открытия файла classes.html в браузере вы увидите следующее:

Как изменять атрибуты, классы и стили в DOM

Свойство className было введено для предотвращения конфликтов с ключевым словом class, которое используется в JavaScript. Вы можете использовать className, чтобы присвоить значение непосредственно классу.

// Выбираем первый divconst div = document.querySelector('div');// Присваиваем первому div класс warningdiv.className = 'warning';

Мы присвоили первому элементу div класс warning, определенный в CSS. Вы получите следующий результат:

Как изменять атрибуты, классы и стили в DOM

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

Другой метод настроить классы – использовать свойство classList, которое содержит пару полезных способов. Они похожи на JQuery-методы addClass, removeClass и toggleClass.

// Выбираем второй div по имени классаconst activeDiv = document.querySelector('.active');activeDiv.classList.add('hidden');                // Добавляем класс hidden activeDiv.classList.remove('hidden');             // Удаляем класс hiddenactiveDiv.classList.toggle('hidden');             // Переключаем hidden true и falseactiveDiv.classList.replace('active', 'warning'); // Заменяем активный класс классом warning

После выполнения указанных выше способов веб-страница будет выглядеть следующим образом:

Как изменять атрибуты, классы и стили в DOM

Использование classList.add() добавит новый класс в список существующих. Также можно использовать setAttribute для изменения класса элемента.

Изменение стилей

Создадим простой пример для демонстрации изменения стилей элементов при помощи JavaScript. Ниже приведен новый HTML-файл. Он содержит div с несколькими встроенными стилями, применяемыми для выведения квадрата.

<!DOCTYPE html><html lang="en"><body>    <div style="height: 100px;                width: 100px;                border: 2px solid black;">Div</div></body></html>

При открытии файла styles.html в браузере вы увидите следующее:

Как изменять атрибуты, классы и стили в DOM

Один из вариантов редактирования стилей – использование способа setAttribute().

// Выбираем divconst div = document.querySelector('div');// Применяем к div стилиdiv.setAttribute('style', 'text-align: center');

Но подобный подход удалит все существующие для элемента встроенные стили. Так что лучше прямо использовать атрибут style:

div.style.height = '100px';div.style.width = '100px';div.style.border = '2px solid black';

Обратите внимание, что в способах JavaScript используется иные правила написания свойств CSS. Например, вместо text-align мы будем использовать textAlign.

// Преобразуем div в круг и центрируем текст вертикальноdiv.style.borderRadius = '50%';div.style.display = 'flex';div.style.justifyContent = 'center';div.style.alignItems = 'center';

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

Как изменять атрибуты, классы и стили в DOM

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

Заключение

В этом руководстве мы рассказали, как приобрести доступ, настроить и удалить атрибуты HTML-элементов в DOM при помощи JavaScript. А также как добавлять и заменять CSS-классы элемента, редактировать встроенные CSS- стили. Для получения дополнительной информации ознакомьтесь с документацией по атрибутам от Mozilla Developer Network.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *