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

2023-01-29

В этом руководстве мы расскажем, как модифицировать 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 или 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-код будет выглядеть следующим образом:

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

// Назначаем элемент изображения
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');

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

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';

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

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

Заключение

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

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