Как менять атрибуты html js

Метод setAttribute

Метод setAttribute позволяет изменить значение заданного атрибута какого-либо тега.

Синтаксис

элемент.setAttribute(имя атрибута, новое значение);

Пример

Давайте элементу поменяем значение атрибута value :

let elem = document.querySelector(‘#elem’); elem.setAttribute(‘value’, ‘. ‘);

HTML код станет выглядеть так:

Смотрите также

• метод getAttribute ,
  который получает атрибуты
• метод removeAttribute ,
  который удаляет атрибуты
• метод hasAttribute ,
  который проверяет атрибуты

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

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

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

Библиотека jQuery упростила процесс выбора одного или нескольких элементов и применения изменений ко всем одновременно.

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

Demo ID

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

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

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

// Изменяем текст одного элемента demoId.textContent = 'Demo ID text updated.';

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

Demo Class 1
 
Demo Class 2

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

Также к определенному элементу можно получить доступ с помощью querySelectorAll():

// Получаем NodeList всех элементов .demo const demoClasses = document.querySelectorAll('.demo-class'); // Изменяем текст нескольких элементов с помощью цикла demoClasses.forEach(element => < element.textContent = 'All demo classes updated.'; >); // Получаем доступ к первому элементу в NodeList demoClasses[0];

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

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

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

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

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

Теперь протестируем все методы для обработки атрибутов.

// Назначаем элемент изображения const img = document.querySelector('img'); img.hasAttribute('src'); // возвращает true img.getAttribute('src'); // возвращает ". shark.png" img.removeAttribute('src'); // удаляет атрибут src и значение

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

img.setAttribute('src', 'https://js-tutorials.nyc3.digitaloceanspaces.com/octopus.png');

Также можно изменить атрибут напрямую, присвоив ему новое значение в качестве свойства элемента:

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

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

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

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

В JavaScript есть свойства className и classList, предназначенные для работы с атрибутом class.

Метод / Свойство	Описание	Пример
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-файл для демонстрации перечисленных выше методов.

   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 
Div 1
 
Div 2
  

После открытия файла classes.html в браузере вы увидите следующее:

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

// Выбираем первый div const div = document.querySelector('div'); // Присваиваем первому div класс warning div.className = 'warning';

Мы присвоили первому элементу div класс warning, определенный в CSS. Вы получите следующий результат:

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

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

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

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

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

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

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

При открытии файла 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';

Обратите внимание, что в методах JavaScript используется другие правила написания свойств CSS. Например, вместо text-align мы будем использовать textAlign.

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

После этого окончательный результат будет выглядеть следующим образом:

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

Заключение

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

Метод setAttribute — Добавление атрибута и изменение его значения

Метод setAttribute в JavaScript позволяет изменить значение атрибута элемента страницы или добавить элементу новый атрибут .

var any = document . getElementById ( «. » );
any . setAttribute ( «attribute» , «value» );

При помощи метода getElspanentById выбираем элемент страницы. Результат заносим в произвольную переменную any .
Через переменную any работаем с выбранным элементом как с объектом .

Метод setAttribute содержит 2 аргумента : имя атрибута attribute и его значение value .

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

Метод setAttribute — Добавление нового атрибута

Рассмотрим пример из предыдущей заметки, где мы работали с планетами, и теперь при помощи метода setAttribute добавим к одному из элементов страницы новый атрибут .

Фрагмент кода

Our Planet

«earth» > Green Planet

Red Planet

«mars» > Mars is red planet

var planet = document . getElementById ( «mars» );
planet . setAttribute ( «class» , «programm_red_17» );

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

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

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

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

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

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

Как вы помните, методы document.querySelector() и document.getElementById() используются для доступа к единому элементу. Используя div с атрибутом 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 с общим значением класса.

Используйте 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 тега а, 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 с одним атрибутом. Вы можете использовать любое локальное изображение, если работаете оффлайн.

Загрузите этот файл 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 ():

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

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

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

Атрибут class соответствует селекторам по классу CSS. Не путайте это с классами ES6, особым типом функции 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 для работы с методами класса; в нем будет два элемента и несколько классов.

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

Откройте браузер и просмотрите в нем файл 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.