Изменение атрибутов, классов и стилей в 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: DOM