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

Вступление

В предыдущем руководстве в этомseries, «https://www.digitalocean.com/community/tutorials/how-to-make-changes-to-the-dom[Как внести изменения в DOM], Мы рассмотрели, как создавать, вставлять, заменять и удалять элементы из объектной модели документа (DOM) с помощью встроенных методов. Увеличивая свои навыки работы с DOM, вы сможете лучше использовать интерактивные возможности JavaScript и изменять веб-элементы.

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

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

До недавнего времени популярная библиотека JavaScript под названиемjQuery чаще всего использовалась для выбора и изменения элементов в DOM. jQuery упростил процесс выбора одного или нескольких элементов и применения изменений ко всем из них одновременно. В «https://www.digitalocean.com/community/tutorials/how-to-access-elements-in-the-dom[How для доступа к элементам в DOM]» мы рассмотрели методы DOM для захвата и работы с узлы в ванильном JavaScript.

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

Demo ID

Метод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 с общим значением класса.

Demo Class 1
Demo Class 2

Мы будем использовать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. Многие примеры изменения элементов не объясняют процесс применения этих методов и свойств к нескольким элементам.

Свойства и методы в этой статье часто будут прикреплены кevent listeners, чтобы реагировать на щелчки, наведение курсора или другие триггеры.

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

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

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

Некоторые из наиболее распространенных атрибутов HTML - это атрибутsrc тегаimg,href тегаa,class,id , иstyle. Полный список атрибутов HTML см. Вattribute list в сети разработчиков Mozilla. Пользовательские элементы, которые не являются частью стандарта HTML, будут добавлены сdata-.

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

метод Описание пример

метод	Описание	пример
`hasAttribute()`	Возвращает логическое значение`true` или`false`	`element.hasAttribute('href');`
`getAttribute()`	Возвращает значение указанного атрибута или`null`	`element.getAttribute('href');`
`setAttribute()`	Добавляет или обновляет значение указанного атрибута	`element.setAttribute('href', 'index.html');`
`removeAttribute()`	Удаляет атрибут из элемента	`element.removeAttribute('href');`

hasAttribute()

Возвращает логическое значениеtrue илиfalse

element.hasAttribute('href');

getAttribute()

Возвращает значение указанного атрибута илиnull

element.getAttribute('href');

setAttribute()

Добавляет или обновляет значение указанного атрибута

element.setAttribute('href', 'index.html');

removeAttribute()

Удаляет атрибут из элемента

element.removeAttribute('href');

Давайте создадим новый HTML-файл с тегомimg с одним атрибутом. Мы будем ссылаться на общедоступное изображение, доступное через URL, но вы можете заменить его на другое локальное изображение, если вы работаете в автономном режиме.

attributes.html

Когда вы загружаете указанный выше HTML-файл в современный веб-браузер и открываете встроенныйDeveloper Console, вы должны увидеть что-то вроде этого:

First rendering of classes.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');

Second rendering of classes.html

Наконец, мы можем изменить атрибут напрямую, присвоив новое значение атрибуту как свойству элемента, вернувsrc в файлshark.png

img.src = 'https://js-tutorials.nyc3.digitaloceanspaces.com/shark.png';

Любой атрибут может быть отредактирован таким же образом, как и вышеописанными методами.

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

Модификация Классов

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

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

Method/Property Описание пример

Method/Property	Описание	пример
`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');`

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-файл для работы с методами класса, с двумя элементами и несколькими классами.

classes.html








    Div 1
    Div 2

Когда вы открываете файлclasses.html в веб-браузере, вы должны получить визуализацию, которая выглядит примерно так:

First rendering of 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, определенный в значениях CSSclasses.html, первомуdiv. Вы получите следующий вывод:

Second rendering of classes.html

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

Другой способ изменить классы - использовать свойствоclassList, которое включает несколько полезных методов. Эти методы аналогичны методам jQueryaddClass,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

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

Final rendering of classes.html

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

Модификация Стилей

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

Мы сделаем короткий пример, чтобы продемонстрировать стили редактирования с помощью JavaScript. Ниже представлен новый HTML-файл сdiv, в котором для отображения квадрата применены некоторые встроенные стили.

styles.html

Div

При открытии в веб-браузереstyles.html будет выглядеть примерно так:

First rendering of 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-свойства kebab-case нельзя использовать в свойстве стиля JavaScript. Вместо этого они будут заменены их эквивалентом camelCase, когда первое слово будет строчным, а все последующие слова будут написаны заглавными буквами. Другими словами, вместо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 будет отображаться круг:

Final rendering of styles.html

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

Заключение

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

В этом руководстве мы узнали, как получить доступ, изменить и удалить атрибуты элемента HTML в DOM, используя простой JavaScript. Мы также узнали, как добавлять, удалять, переключать и заменять классы CSS для элемента и как редактировать встроенные стили CSS. Для дополнительного чтения ознакомьтесь с документацией поattributes в сети разработчиков Mozilla.

TOC