Изменение атрибутов, классов и стилей в DOM

Ранее в этой серии мануалов вы научились создавать, вставлять, заменять и удалять элементы в DOM (Document Object Model) с помощью встроенных методов.

Улучшая свои навыки управления DOM, вы можете использовать интерактивные возможности JavaScript и изменять веб-элементы.

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

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

До недавнего времени чаще всего для выбора и изменения элементов в DOM использовалась популярная библиотека JavaScript, jQuery. jQuery упрощала процесс выбора одного или нескольких элементов и одновременно применяла все изменения к ним. В мануале Доступ к элементам в DOM мы рассмотрели методы DOM для захвата и работы с узлами в простейшем JavaScript.

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

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

Метод querySelector() более надежный, поскольку он может выбирать элемент на странице по любому типу селектора.

// Both methods will return a single element
const demoId = document.querySelector('#demo-id');

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

// Change the text of one element
demoId.textContent = 'Demo ID text updated.';

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

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

Используйте querySelectorAll(), чтобы захватить все элементы с применяемым к ним классом demo-class, и forEach(), чтобы перебрать их и применить изменения. Также можно получить доступ к определенному элементу с помощью querySelectorAll() так же, как и в работе с массивом, через скобки.

// Get a NodeList of all .demo elements
const demoClasses = document.querySelectorAll('.demo-class');
// Change the text of multiple elements with a loop
demoClasses.forEach(element => {
element.textContent = 'All demo classes updated.';
});
// Access the first element in the NodeList
demoClasses[0];

Это одно из самых важных различий, которое следует учитывать при переходе от jQuery к JavaScript. Многие примеры изменения элементов не объясняют процесс применения этих методов и свойств к нескольким элементам.

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

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

Читайте также: Циклы for в JavaScript

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

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

Некоторые из наиболее распространенных атрибутов HTML – это атрибут src тега img, href тега а, class, id и style. Найти полный список атрибутов HTML можно в Mozilla Developer Network. Пользовательские элементы, которые не являются частью стандарта 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 с одним атрибутом. Вы можете использовать любое локальное изображение, если работаете оффлайн.

<!DOCTYPE html>
<html lang="en">
<body>
<img src="https://my-domain/my-image.png">
</body>
</html>

Читайте также: Использование консоли разработчика JavaScript

Загрузите этот файл HTML в современный браузер и откройте встроенную консоль разработчика. Вы увидите загруженное вами изображение.

Теперь проверьте работу методов атрибутов на ходу.

// Assign image element
const img = document.querySelector('img');
img.hasAttribute('src');                // returns true
img.getAttribute('src');                // returns "...shark.png"
img.removeAttribute('src');             // remove the src attribute and value

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

img.setAttribute('src', 'https://my-domain/my-image-2.png');

Теперь можно изменить атрибут напрямую, присвоив новое значение атрибуту как свойство элемента и установив в src прежнее значение, my-image.png

img.src = 'https://my-domain/my-image-2.png';

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

Читайте также: Условные операторы в JavaScript

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

Атрибут class соответствует селекторам по классу CSS. Не путайте это с классами ES6, особым типом функции JavaScript.

Читайте также: Работа с классами в JavaScript

Классы CSS используются для применения стилей к нескольким элементам, в отличие от ID, которые могут встречаться на странице только один раз. В JavaScript для работы с атрибутом класса есть свойства className и classList.

Метод/свойство Описание Пример
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 и других языках, имеющих доступ к DOM. Вы можете использовать className для присваивания значения непосредственно классу.

// Select the first div
const div = document.querySelector('div');
// Assign the warning class to the first div
div.className = 'warning';

Вы присвоили класс warning , определенный в значениях CSS classes.html, первому div.Проверьте страницу в браузере.

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

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

// Select the second div by class name
const activeDiv = document.querySelector('.active');
activeDiv.classList.add('hidden');                // Add the hidden class
activeDiv.classList.remove('hidden');             // Remove the hidden class
activeDiv.classList.toggle('hidden');             // Switch between hidden true and false
activeDiv.classList.replace('active', 'warning'); // Replace active class with warning class

После применения этих методов веб-страница должна измениться. Проверьте ее в веб-браузере.

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

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

Свойство style представляет собой встроенные стили HTML-элемента. Часто стили применяются к элементам через таблицу стилей (как мы делали это ранее в этой статье), но иногда приходится добавлять или редактировать встроенный стиль напрямую.

Давайте рассмотрим краткий пример редактирования стилей с помощью 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().

// Select div
const div = document.querySelector('div');
// Apply style to div
div.setAttribute('style', 'text-align: center');

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

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

Свойства CSS написаны в кебаб-корпусе, который является строчными словами, разделенными тире. Важно отметить, что свойства CSS в кебаб-регистре нельзя использовать в свойстве стиля JavaScript. Вместо этого они будут заменены их эквивалентом – верблюжьим регистром (первое слово состоит из строчных букв, а все последующие слова начинаются с заглавной без пробелов). Другими словами, для свойства стиля JavaScript вместо text-align нужно использовать textAlign.

// Make div into a circle and vertically center the text
div.style.borderRadius = '50%';
div.style.display = 'flex';
div.style.justifyContent = 'center';
div.style.alignItems = 'center';

После вышеупомянутых изменений стиля ваш окончательный рендеринг styles.html покажет круг.

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

Заключение

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

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

Tags: