Tutorial
Изменение атрибутов, классов и стилей в DOM
Введение
В предыдущем руководстве данной серии, «Внесение изменений в DOM», мы рассказали о том, как создать, вставить и удалить элементы в объектной модели документов (DOM) с помощью встроенных методов. Благодаря повышению вашего уровня владения манипуляциями с DOM, вы сможете более эффективно использовать интерактивные возможности JavaScript и изменять веб-элементы.
В этом руководстве мы узнаем, как вносить дальнейшие изменения в DOM, меняя стили, классы и другие атрибуты узлов HTML-элементов. Это позволит вам получить более полное представление о том, как манипулировать основными элементами в DOM.
Описание выбора элементов
До недавнего времени популярная JavaScript-библиотека jQuery чаще всего использовалась для выбора и изменения элементов в DOM. 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 для прохождения по коллекции.
Изменение атрибутов
Атрибуты — это значения, которые содержат дополнительную информацию об элементах HTML. Обычно они идут в паре название/значение и могут быть обязательными в зависимости от элемента.
Среди самых распространенных атрибутов HTML необходимо отметить атрибут src тега img, href для тега a, 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 с одним атрибутом. Мы привяжем открытое изображение через URL, но вы можете использовать другое локальное изображение, если вы работаете оффлайн.
<!DOCTYPE html>
<html lang="en">
<body>
<img src="https://js-tutorials.nyc3.digitaloceanspaces.com/shark.png">
</body>
</html>
При загрузке указанного выше файла 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://js-tutorials.nyc3.digitaloceanspaces.com/octopus.png');
Наконец, мы можем изменить атрибут напрямую, присвоив новое значение атрибуту в качестве свойства элемента, установив src обратно для файла shark.png.
img.src = 'https://js-tutorials.nyc3.digitaloceanspaces.com/shark.png';
Любой атрибут можно изменить таким образом, а также с помощью описанных выше методов.
Методы hasAttribute() и getAttribute() обычно используются с условными операторами, а методы setAttribute() и removeAttribute() используются для прямого изменения DOM.
Изменение классов
Атрибут class соответствует селекторам класса CSS. Не путайте с классами ES6, особым типом функции JavaScript.
Классы CSS используются для применения стилей для нескольких элементов, в отличие от идентификаторов, которые могут существовать только один раз на странице. В 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, которое имеет несколько полезных методов. Эти методы аналогичны методами addClass, removeClass и toggleClass в jQuery.
// 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. Вместо этого они будут заменены на их эквивалент в верблюжьем регистре, когда первое слово имеет нижний регистр, а все последующие слова начинаются с заглавной буквы. Иными словами, вместо text-align мы будем использовать textAlign для свойства стиля JavaScript.
// 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.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Become a contributor for community
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
DigitalOcean Documentation
Full documentation for every DigitalOcean product.
Resources for startups and SMBs
The Wave has everything you need to know about building a business, from raising funding to marketing your product.
The developer cloud
Scale up as you grow — whether you're running one virtual machine or ten thousand.
Get started for free
Sign up and get $200 in credit for your first 60 days with DigitalOcean.*
*This promotional offer applies to new accounts only.
—Изменение стилей Свойство style отражает вложенные стили элемента HTML—> Здесь наверно имелось ввиду атрибут style, а не свойство? или всё таки свойство…