Как изменять атрибуты, классы и стили в 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 всех элементов .demo
const demoClasses = document.querySelectorAll('.demo-class');

// Изменяем текст нескольких элементов с помощью цикла
demoClasses.forEach(element => {
  element.textContent = 'All demo classes updated.';
});

// Получаем доступ к первому элементу в NodeList
demoClasses[0];

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

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

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

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

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

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

МетодОписаниеПример
hasAttribute()Возвращает логическое значение true или falseelement.hasAttribute('href');
getAttribute()Возвращает значение указанного атрибута или nullelement.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-код будет выглядеть следующим образом:

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

Теперь протестируем все методы для обработки атрибутов.

// Назначаем элемент изображения
const img = document.querySelector('img');

img.hasAttribute('src');                // возвращает true
img.getAttribute('src');                // возвращает "...shark.png"
img.removeAttribute('src');             // удаляет атрибут src и значение

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

img.setAttribute('src', 'https://js-tutorials.nyc3.digitaloceanspaces.com/octopus.png');
Обзор выбора элементов - 2

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

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 в браузере вы увидите следующее:

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

// Выбираем первый div
const div = document.querySelector('div');

// Присваиваем первому div класс warning
div.className = 'warning';

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

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

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

// Выбираем второй div по имени класса
const activeDiv = document.querySelector('.active');

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

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

Использование 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 в браузере вы увидите следующее:

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

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

// Выбираем div
const 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';

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

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

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

Заключение

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

Пожалуйста, оставляйте свои отзывы по текущей теме статьи. За комментарии, лайки, отклики, дизлайки, подписки огромное вам спасибо!

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

Вадим Дворниковавтор-переводчик статьи «How To Modify Attributes, Classes, and Styles in the DOM»