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

1. Вступление В предыдущем уроке в этом серии , " Как внести изменения в DOM , «мы рассмотрели,...
2. Изменение атрибутов
3. Модификация Классов
4. Модификация Стилей
5. Заключение

Вступление

В предыдущем уроке в этом серии , " Как внести изменения в DOM , «мы рассмотрели, как создавать, вставлять, заменять и удалять элементы из объектной модели документа (DOM) с помощью встроенных методов. Повышая свой профессионализм в управлении DOM, вы лучше можете использовать интерактивные возможности JavaScript и изменять сеть элементы.

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

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

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

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

<div id = "demo-id"> Идентификатор демонстрации </ div>

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

// Оба метода вернут один элемент const demoId = document.querySelector ('# demo-id');

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

// Изменить текст одного элемента demoId.textContent = 'Текст демо-идентификатора обновлен.';

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

<div class = "demo-class"> Демо-класс 1 </ div> <div class = "demo-class"> Демо-класс 2 </ div>

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

// Получить NodeList всех элементов .demo const demoClasses = document.querySelectorAll ('. Demo-class'); // Изменить текст нескольких элементов с помощью цикла demoClasses.forEach (element => {element.textContent = 'Все демонстрационные классы обновлены.';}); // Доступ к первому элементу в NodeList demoClasses [0];

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

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

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

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

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

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

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

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

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

attributes.html

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

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

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

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

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

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

учебный класс атрибут соответствует Селекторы классов CSS , Это не следует путать с Классы ES6 особый тип функции JavaScript.

Классы CSS используются для применения стилей к нескольким элементам, в отличие от идентификаторов, которые могут существовать только один раз на страницу. В JavaScript у нас есть имя класса а также 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-файл для работы с методами класса, с двумя элементами и несколькими классами.

classes.html

<! DOCTYPE html> <html lang = "en"> <style> body {max-width: 600px; поле: 0 авто; семейство шрифтов: без засечек; } .active {border: 2px solid blue; } .warning {border: 2px solid red; } .hidden {display: none; } div {border: 2px пунктирный светло-серый; отступы: 15 пикселей; поле: 5px; } </ style> <body> <div> Div 1 </ div> <div class = "active"> Div 2 </ div> </ body> </ html>

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

Свойство className было введено для предотвращения конфликтов с ключевым словом class, найденным в JavaScript и других языках, имеющих доступ к DOM. Вы можете использовать className, чтобы присвоить значение непосредственно классу.

// Выберите первый div const div = document.querySelector ('div'); // Назначаем класс предупреждения первому div.className = 'warning';

Мы присвоили класс предупреждения, определенный в значениях CSS файла classes.html, первому элементу div. Вы получите следующий вывод:

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

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

// Выбор второго div по имени класса const activeDiv = document.querySelector ('. Active'); activeDiv.classList.add ( 'скрытый'); // Добавить скрытый класс activeDiv.classList.remove ('hidden'); // Удалить скрытый класс activeDiv.classList.toggle ('hidden'); // Переключение между скрытым истиной и ложью activeDiv.classList.replace ('active', 'warning'); // Заменить активный класс классом предупреждения

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

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

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

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

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

styles.html

<! DOCTYPE html> <html lang = "en"> <body> <div style = "height: 100px; ширина: 100px; граница: 2px сплошной черный;"> 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';

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

// Делаем div в круг и центрируем текст вертикально div.style.borderRadius = '50% '; div.style.display = 'flex'; div.style.justifyContent = 'center'; div.style.alignItems = 'center';

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

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

Заключение

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

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

Похожие

Комментарии