Как добавить атрибут javascript

Как добавить атрибут?

Мне нужно добавить к списку атрибут data-simplebar , чтобы получилось Патаюсь его добавить, но получаю data-simplebar=»» . Что я сделал не правильно?

document.addEventListener("DOMContentLoaded", () => < let subMenu = document.querySelectorAll(".sub-menu"); for (items of subMenu) < console.log(items); items.toggleAttribute("data-simplebar"); >>); 

Отслеживать
71.2k 12 12 золотых знаков 91 91 серебряный знак 180 180 бронзовых знаков
задан 28 июл 2022 в 9:02

Зачем вам это понадобилось? data-* атрибуты созданы как раз для того чтобы хранить определённое значение. Вы можете вместо добавления атрибута data-simplebar, добавлять класс simplebar или какой вы уж там захотите

28 июл 2022 в 9:07
каково практическое применение такого атрибута?
28 июл 2022 в 11:49

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Если говорить утрированно, то при for (items of subMenu) создаётся некая копия массива оригинала и изменения происходят в этом внутреннем массиве, но не в оригинале. Для решения проблемы можно:

1. Использовать for in .
2. Использовать subMenu.forEach((item, i) и внутри писать subMenu[i]

Отслеживать
ответ дан 28 июл 2022 в 9:06
Алексей Шиманский Алексей Шиманский
71.2k 12 12 золотых знаков 91 91 серебряный знак 180 180 бронзовых знаков
document.addEventListener(«DOMContentLoaded», () => < let subMenu = document.querySelectorAll(".sub-menu"); subMenu.forEach((item) =>< item.toggleAttribute("data-simplebar", true); >); >); Пробую так, но получаю data-simplebar=»»
28 июл 2022 в 9:16
там скорее внутри надо forEach((item, i) и subMenu[i]
28 июл 2022 в 9:19
Какая ещё копия? Что-то ты ерунду написал.
28 июл 2022 в 9:31

1. Либо setAttribute(‘data-simplebar’, ‘value’). Тут второй аргумент — это устанавливаемое значение для атрибута.
2. Либо toggleAttribute(‘data-simplebar’, true). При использовании этого метода у вас не будет значения у атрибута, а просто появится атрибут с пустым значением.

Отслеживать
47.8k 17 17 золотых знаков 56 56 серебряных знаков 100 100 бронзовых знаков
ответ дан 28 июл 2022 в 9:06
EzioMercer EzioMercer
5,961 2 2 золотых знака 9 9 серебряных знаков 28 28 бронзовых знаков
Получается data-simplebar=»». С чем это может быть связано?
28 июл 2022 в 9:14

@cracker.s Всмысле? Я же написал, что если использовать toggle , то не будет значения у аттрибута. Вам надо set использовать, чтобы установить значение, которое хотите

28 июл 2022 в 9:15
@cracker.s А что вы ожидаете? Что должно получиться?
28 июл 2022 в 9:18
я ожидаю что у меня будет
28 июл 2022 в 9:19

Вы так не сможете сделать. Так можно (по-моему) только с аттрибутами у которых значение булево, типа selected и disabled

28 июл 2022 в 9:23

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

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

Метод 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 1div> div class="demo-class">Demo Class 2div> 

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

attributes.html

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

classes.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 1div> div class="active">Div 2div> 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 , который имеет вложенные стили, применяемые для отображения квадрата.

styles.html

DOCTYPE html> html lang="en"> body> div style="height: 100px; width: 100px; border: 2px solid black;">Divdiv> 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.

Атрибуты и свойства

Когда браузер загружает страницу, он «читает» (также говорят: «парсит») HTML и генерирует из него DOM-объекты. Для узлов-элементов большинство стандартных HTML-атрибутов автоматически становятся свойствами DOM-объектов.

Например, для такого тега у DOM-объекта будет такое свойство body.id=»page» .

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

DOM-свойства

Ранее мы уже видели встроенные DOM-свойства. Их много. Но технически нас никто не ограничивает, и если этого мало – мы можем добавить своё собственное свойство.

DOM-узлы – это обычные объекты JavaScript. Мы можем их изменять.

Например, создадим новое свойство для document.body :

document.body.myData = < name: 'Caesar', title: 'Imperator' >; alert(document.body.myData.title); // Imperator

Мы можем добавить и метод:

document.body.sayTagName = function() < alert(this.tagName); >; document.body.sayTagName(); // BODY (значением "this" в этом методе будет document.body)

Также можно изменять встроенные прототипы, такие как Element.prototype и добавлять новые методы ко всем элементам:

Element.prototype.sayHi = function() < alert(`Hello, I'm $`); >; document.documentElement.sayHi(); // Hello, I'm HTML document.body.sayHi(); // Hello, I'm BODY

Итак, DOM-свойства и методы ведут себя так же, как и обычные объекты JavaScript:

• Им можно присвоить любое значение.
• Они регистрозависимы (нужно писать elem.nodeType , не elem.NoDeTyPe ).

HTML-атрибуты

В HTML у тегов могут быть атрибуты. Когда браузер парсит HTML, чтобы создать DOM-объекты для тегов, он распознаёт стандартные атрибуты и создаёт DOM-свойства для них.

Таким образом, когда у элемента есть id или другой стандартный атрибут, создаётся соответствующее свойство. Но этого не происходит, если атрибут нестандартный.

Пожалуйста, учтите, что стандартный атрибут для одного тега может быть нестандартным для другого. Например, атрибут «type» является стандартным для элемента (HTMLInputElement), но не является стандартным для (HTMLBodyElement). Стандартные атрибуты описаны в спецификации для соответствующего класса элемента.

Мы можем увидеть это на примере ниже:

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

Конечно. Все атрибуты доступны с помощью следующих методов:

• elem.hasAttribute(name) – проверяет наличие атрибута.
• elem.getAttribute(name) – получает значение атрибута.
• elem.setAttribute(name, value) – устанавливает значение атрибута.
• elem.removeAttribute(name) – удаляет атрибут.

Эти методы работают именно с тем, что написано в HTML.

Кроме этого, получить все атрибуты элемента можно с помощью свойства elem.attributes : коллекция объектов, которая принадлежит ко встроенному классу Attr со свойствами name и value .

Вот демонстрация чтения нестандартного свойства:

У HTML-атрибутов есть следующие особенности:

• Их имена регистронезависимы ( id то же самое, что и ID ).
• Их значения всегда являются строками.

Расширенная демонстрация работы с атрибутами:

Пожалуйста, обратите внимание:

1. getAttribute(‘About’) – здесь первая буква заглавная, а в HTML – строчная. Но это не важно: имена атрибутов регистронезависимы.
2. Мы можем присвоить что угодно атрибуту, но это станет строкой. Поэтому в этой строчке мы получаем значение «123» .
3. Все атрибуты, в том числе те, которые мы установили, видны в outerHTML .
4. Коллекция attributes является перебираемой. В ней есть все атрибуты элемента (стандартные и нестандартные) в виде объектов со свойствами name и value .

Синхронизация между атрибутами и свойствами

Когда стандартный атрибут изменяется, соответствующее свойство автоматически обновляется. Это работает и в обратную сторону (за некоторыми исключениями).

В примере ниже id модифицируется как атрибут, и можно увидеть, что свойство также изменено. То же самое работает и в обратную сторону:

Но есть и исключения, например, input.value синхронизируется только в одну сторону – атрибут → значение, но не в обратную:

• Изменение атрибута value обновило свойство.
• Но изменение свойства не повлияло на атрибут.

Иногда эта «особенность» может пригодиться, потому что действия пользователя могут приводить к изменениям value , и если после этого мы захотим восстановить «оригинальное» значение из HTML, оно будет в атрибуте.

DOM-свойства типизированы

DOM-свойства не всегда являются строками. Например, свойство input.checked (для чекбоксов) имеет логический тип:

 checkbox  

Есть и другие примеры. Атрибут style – строка, но свойство style является объектом:

Hello
  

Хотя большинство свойств, всё же, строки.

При этом некоторые из них, хоть и строки, могут отличаться от атрибутов. Например, DOM-свойство href всегда содержит полный URL, даже если атрибут содержит относительный URL или просто #hash .

link  

Если же нужно значение href или любого другого атрибута в точности, как оно записано в HTML, можно воспользоваться getAttribute .

Нестандартные атрибуты, dataset

При написании HTML мы используем много стандартных атрибутов. Но что насчёт нестандартных, пользовательских? Давайте посмотрим, полезны они или нет, и для чего они нужны.

Иногда нестандартные атрибуты используются для передачи пользовательских данных из HTML в JavaScript, или чтобы «помечать» HTML-элементы для JavaScript.

Также они могут быть использованы, чтобы стилизовать элементы.

Например, здесь для состояния заказа используется атрибут order-state :

 /* стили зависят от пользовательского атрибута "order-state" */ .order[order-state="new"] < color: green; >.order[order-state="pending"] < color: blue; >.order[order-state="canceled"] 
A new order.
 
A pending order.
 
A canceled order.
 

Почему атрибут может быть предпочтительнее таких классов, как .order-state-new , .order-state-pending , order-state-canceled ?

Это потому, что атрибутом удобнее управлять. Состояние может быть изменено достаточно просто:

// немного проще, чем удаление старого/добавление нового класса div.setAttribute('order-state', 'canceled');

Но с пользовательскими атрибутами могут возникнуть проблемы. Что если мы используем нестандартный атрибут для наших целей, а позже он появится в стандарте и будет выполнять какую-то функцию? Язык HTML живой, он растёт, появляется больше атрибутов, чтобы удовлетворить потребности разработчиков. В этом случае могут возникнуть неожиданные эффекты.

Чтобы избежать конфликтов, существуют атрибуты вида data-*.

Все атрибуты, начинающиеся с префикса «data-», зарезервированы для использования программистами. Они доступны в свойстве dataset .

Например, если у elem есть атрибут «data-about» , то обратиться к нему можно как elem.dataset.about .

Атрибуты, состоящие из нескольких слов, к примеру data-order-state , становятся свойствами, записанными с помощью верблюжьей нотации: dataset.orderState .

Вот переписанный пример «состояния заказа»:

 .order[data-order-state="new"] < color: green; >.order[data-order-state="pending"] < color: blue; >.order[data-order-state="canceled"] 
A new order.
  

Использование data-* атрибутов – валидный, безопасный способ передачи пользовательских данных.

Пожалуйста, примите во внимание, что мы можем не только читать, но и изменять data-атрибуты. Тогда CSS обновит представление соответствующим образом: в примере выше последняя строка (*) меняет цвет на синий.

Итого

• Атрибуты – это то, что написано в HTML.
• Свойства – это то, что находится в DOM-объектах.

Свойства	Атрибуты
Тип	Любое значение, стандартные свойства имеют типы, описанные в спецификации	Строка
Имя	Имя регистрозависимо	Имя регистронезависимо

Методы для работы с атрибутами:

• elem.hasAttribute(name) – проверить на наличие.
• elem.getAttribute(name) – получить значение.
• elem.setAttribute(name, value) – установить значение.
• elem.removeAttribute(name) – удалить атрибут.
• elem.attributes – это коллекция всех атрибутов.

В большинстве ситуаций предпочтительнее использовать DOM-свойства. Нужно использовать атрибуты только тогда, когда DOM-свойства не подходят, когда нужны именно атрибуты, например:

• Нужен нестандартный атрибут. Но если он начинается с data- , тогда нужно использовать dataset .
• Мы хотим получить именно то значение, которое написано в HTML. Значение DOM-свойства может быть другим, например, свойство href – всегда полный URL, а нам может понадобиться получить «оригинальное» значение.

Задачи

Получите атрибут

важность: 5

Напишите код для выбора элемента с атрибутом data-widget-name из документа и прочитайте его значение.

   
Choose the genre
   

Атрибуты и DOM-свойства

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Более новая информация по этой теме находится на странице https://learn.javascript.ru/dom-attributes-and-properties.

При чтении HTML браузер генерирует DOM-модель. При этом большинство стандартных HTML-атрибутов становятся свойствами соответствующих объектов.

Например, если тег выглядит как , то у объекта будет свойство body.id = «page» .

Но это преобразование – не один-в-один. Бывают ситуации, когда атрибут имеет одно значение, а свойство – другое. Бывает и так, что атрибут есть, а свойства с таким названием не создаётся.

Если коротко – HTML-атрибуты и DOM-свойства обычно, но не всегда соответствуют друг другу, нужно понимать, что такое свойство и что такое атрибут, чтобы работать с ними правильно.

Свои DOM-свойства

Ранее мы видели некоторые встроенные свойства DOM-узлов. Но, технически, никто нас ими не ограничивает.

Узел DOM – это объект, поэтому, как и любой объект в JavaScript, он может содержать пользовательские свойства и методы.

Например, создадим в document.body новое свойство и запишем в него объект:

document.body.myData = < name: 'Пётр', familyName: 'Петрович' >; alert( document.body.myData.name ); // Пётр

Можно добавить и новую функцию:

document.body.sayHi = function() < alert( this.nodeName ); >document.body.sayHi(); // BODY, выполнилась с правильным this

Нестандартные свойства и методы видны только в JavaScript и никак не влияют на отображение соответствующего тега.

Обратим внимание, пользовательские DOM-свойства:

• Могут иметь любое значение.
• Названия свойств чувствительны к регистру.
• Работают за счёт того, что DOM-узлы являются объектами JavaScript.

Атрибуты

Элементам DOM, с другой стороны, соответствуют HTML-теги, у которых есть текстовые атрибуты.

Конечно, здесь речь именно об узлах-элементах, не о текстовых узлах или комментариях.

Доступ к атрибутам осуществляется при помощи стандартных методов:

• elem.hasAttribute(name) – проверяет наличие атрибута
• elem.getAttribute(name) – получает значение атрибута
• elem.setAttribute(name, value) – устанавливает атрибут
• elem.removeAttribute(name) – удаляет атрибут

Эти методы работают со значением, которое находится в HTML.

Также все атрибуты элемента можно получить с помощью свойства elem.attributes , которое содержит псевдо-массив объектов типа Attr.

В отличие от свойств, атрибуты:

• Всегда являются строками.
• Их имя нечувствительно к регистру (ведь это HTML)
• Видны в innerHTML (за исключением старых IE)

Рассмотрим отличия между DOM-свойствами и атрибутами на примере HTML-кода:

Пример ниже устанавливает атрибуты и демонстрирует их особенности.

  alert( elem.getAttribute('About') ); // (1) 'Elephant', атрибут получен elem.setAttribute('Test', 123); // (2) атрибут Test установлен alert( document.body.innerHTML ); // (3) в HTML видны все атрибуты! var attrs = elem.attributes; // (4) можно получить коллекцию атрибутов for (var i = 0; i 

При запуске кода выше обратите внимание:

1. getAttribute(‘About’) – первая буква имени атрибута About написана в верхнем регистре, а в HTML – в нижнем, но это не имеет значения, так как имена нечувствительны к регистру.
2. Мы можем записать в атрибут любое значение, но оно будет превращено в строку. Объекты также будут автоматически преобразованы.
3. После добавления атрибута его можно увидеть в innerHTML элемента.
4. Коллекция attributes содержит все атрибуты в виде объектов со свойствами name и value .

Когда полезен доступ к атрибутам?

Когда браузер читает HTML и создаёт DOM-модель, то он создаёт свойства для всех стандартных атрибутов.

Например, свойства тега ‘A’ описаны в спецификации DOM: HTMLAnchorElement.

Например, у него есть свойство «href» . Кроме того, он имеет «id» и другие свойства, общие для всех элементов, которые описаны в спецификации в HTMLElement.

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

Рассмотрим несколько примеров.

Ссылка «как есть» из атрибута href

Синхронизация не гарантирует одинакового значения в атрибуте и свойстве.

Для примера, посмотрим, что произойдёт с атрибутом «href» при изменении свойства:

Это происходит потому, что атрибут может быть любым, а свойство href , в соответствии со спецификацией W3C, должно быть полной ссылкой.

Стало быть, если мы хотим именно то, что в HTML, то нужно обращаться через атрибут.

Есть и другие подобные атрибуты

Кстати, есть и другие атрибуты, которые не копируются в точности. Например, DOM-свойство input.checked имеет логическое значение true/false , а HTML-атрибут checked – любое строковое, важно лишь его наличие.

Работа с checked через атрибут и свойство:

То есть, изменение DOM-свойства value на атрибут не влияет, он остаётся таким же.

А вот изменение атрибута обновляет свойство:

Эту особенность можно красиво использовать.

Получается, что атрибут input.getAttribute('value') хранит оригинальное (исходное) значение даже после того, как пользователь заполнил поле и свойство изменилось.

Например, можно взять изначальное значение из атрибута и сравнить со свойством, чтобы узнать, изменилось ли значение. А при необходимости и перезаписать свойство атрибутом, отменив изменения.

Классы в виде строки: className

Атрибуту "class" соответствует свойство className .

Так как слово "class" является зарезервированным словом в JavaScript, то при проектировании DOM решили, что соответствующее свойство будет называться className .

Кстати, есть и другие атрибуты, которые называются иначе, чем свойство. Например, атрибуту for ( ) соответствует свойство с названием htmlFor .

Классы в виде объекта: classList

Атрибут class – уникален. Ему соответствует аж целых два свойства!

Работать с классами как со строкой неудобно. Поэтому, кроме className , в современных браузерах есть свойство classList .

Свойство classList – это объект для работы с классами.

Оно поддерживается в IE начиная с IE10, но его можно эмулировать в IE8+, подключив мини-библиотеку classList.js.

• elem.classList.contains("class") – возвращает true/false , в зависимости от того, есть ли у элемента класс class .
• elem.classList.add/remove("class") – добавляет/удаляет класс class
• elem.classList.toggle("class") – если класса class нет, добавляет его, если есть – удаляет.

Кроме того, можно перебрать классы через for , так как classList – это псевдо-массив.

Нестандартные атрибуты

У каждого элемента есть некоторый набор стандартных свойств, например для это будут href , name , а для это будут src , alt , и так далее.

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

Для нестандартных атрибутов DOM-свойство не создаётся.

Свойство является стандартным, только если оно описано в стандарте именно для этого элемента.

То есть, если назначить элементу атрибут href , то свойство img.href от этого не появится. Как, впрочем, и если назначить ссылке атрибут alt :

Нестандартные атрибуты иногда используют для CSS.

В примере ниже для показа «состояния заказа» используется атрибут order-state :

 .order[order-state="new"] < color: green; >.order[order-state="pending"] < color: blue; >.order[order-state="canceled"] 
Новый заказ.
 
Ожидающий заказ.
 
Заказ отменён.
 

Почему именно атрибут? Разве нельзя было сделать классы .order-state-new , .order-state-pending , order-state-canceled ?

Конечно можно, но манипулировать атрибутом из JavaScript гораздо проще.

Например, если нужно отменить заказ, неважно в каком он состоянии сейчас – это сделает код:

div.setAttribute('order-state', 'canceled');

Для классов – нужно знать, какой класс у заказа сейчас. И тогда мы можем снять старый класс, и поставить новый:

div.classList.remove('order-state-new'); div.classList.add('order-state-canceled');

…То есть, требуется больше исходной информации и надо написать больше букв. Это менее удобно.

Проще говоря, значение атрибута – произвольная строка, значение класса – это «есть» или «нет», поэтому естественно, что атрибуты «мощнее» и бывают удобнее классов как в JS так и в CSS.

Свойство dataset, data-атрибуты

С помощью нестандартных атрибутов можно привязать к элементу данные, которые будут доступны в JavaScript.

Как правило, это делается при помощи атрибутов с названиями, начинающимися на data- , например:

 
По улице прошёлся слон. Весьма красив и толст был он.
  

Стандарт HTML5 специально разрешает атрибуты data-* и резервирует их для пользовательских данных.

При этом во всех браузерах, кроме IE10-, к таким атрибутам можно обратиться не только как к атрибутам, но и как к свойствам, при помощи специального свойства dataset :

 
По улице прошёлся слон. Весьма красив и толст был он.
  

Обратим внимание – название data-user-location трансформировалось в dataset.userLocation . Дефис превращается в большую букву.

Полифил для атрибута hidden

Для старых браузеров современные атрибуты иногда нуждаются в полифиле. Как правило, такой полифил включает в себя не только JavaScript, но и CSS.

Этот атрибут должен прятать элемент, действие весьма простое, для его поддержки в HTML достаточно такого CSS:

 [hidden] 
Текст
  
  

Если запустить в IE11- пример выше, то будет скрыт, а вот последний div , которому поставили свойство hidden в JavaScript – по-прежнему виден.

Это потому что CSS «не видит» присвоенное свойство, нужно синхронизировать его в атрибут.

Вот так – уже работает:

 [hidden]  
Текст
  
  

«Особенности» IE8

Если вам нужна поддержка этих версий IE – есть пара нюансов.

Во-первых, версии IE8- синхронизируют все свойства и атрибуты, а не только стандартные:

document.body.setAttribute('my', 123); alert( document.body.my ); // 123 в IE8-

Вывод из этого довольно прост – чтобы не иметь проблем в IE8, нужно использовать всегда только свойства, кроме тех ситуаций, когда нужны именно атрибуты. Впрочем, это в любом случае хорошая практика.

Итого

• Атрибуты – это то, что написано в HTML.
• Свойство – это то, что находится внутри DOM-объекта.

Таблица сравнений для атрибутов и свойств:

Свойства	Атрибуты
Любое значение	Строка
Названия регистрозависимы	Не чувствительны к регистру
Не видны в innerHTML	Видны в innerHTML

Синхронизация между атрибутами и свойствами:

• Стандартные свойства и атрибуты синхронизируются: установка атрибута автоматически ставит свойство DOM. Некоторые свойства синхронизируются в обе стороны.
• Бывает так, что свойство не совсем соответствует атрибуту. Например, «логические» свойства вроде checked , selected всегда имеют значение true/false , а в атрибут можно записать произвольную строку.Выше мы видели другие примеры на эту тему, например href .

• Нестандартный атрибут (если забыть глюки старых IE) никогда не попадёт в свойство, так что для кросс-браузерного доступа к нему нужно обязательно использовать getAttribute .
• Атрибуты, название которых начинается с data- , можно прочитать через dataset . Эта возможность не поддерживается IE10-.

Для того, чтобы избежать проблем со старыми IE, а также для более короткого и понятного кода старайтесь везде использовать свойства, а атрибуты – только там, где это действительно нужно.

А действительно нужны атрибуты очень редко – лишь в следующих трёх случаях:

1. Когда нужно кросс-браузерно получить нестандартный HTML-атрибут.
2. Когда нужно получить «оригинальное значение» стандартного HTML-атрибута, например, .
3. Когда нужно получить список всех атрибутов, включая пользовательские. Для этого используется коллекция attributes .

Если вы хотите использовать собственные атрибуты в HTML, то помните, что атрибуты с именем, начинающимся на data- валидны в HTML5 и современные браузеры поддерживают доступ к ним через свойство dataset .

Задачи

Поставьте класс ссылкам

важность: 3

Сделайте жёлтыми внешние ссылки, добавив им класс external .