Как добавить атрибут в html через js
Перейти к содержимому

Как добавить атрибут в html через js

  • автор:

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

Когда браузер загружает страницу, он «читает» (также говорят: «парсит») 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

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

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

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

Отслеживать
74.1k 12 12 золотых знаков 93 93 серебряных знака 182 182 бронзовых знака
задан 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
Алексей Шиманский Алексей Шиманский
74.1k 12 12 золотых знаков 93 93 серебряных знака 182 182 бронзовых знака
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). При использовании этого метода у вас не будет значения у атрибута, а просто появится атрибут с пустым значением.

Справочная информация по HTML атрибутам

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

Список атрибутов

Имя атрибута Элементы Описание
hidden Глобальный атрибут Предотвращает генерирование данного элемента, в то время как сохраняет дочерние элементы, например, элементы script, active.
high Указывает нижнюю границу верхнего диапазона.
href , , ,

URL связанного ресурса.
hreflang , ,

Указывает язык связанного ресурса.
http-equiv
icon Указывает картинку, которая будет представлять команду.
id Глобальный атрибут Часто используется с CSS для стилизации заданного элемента. Значение атрибута должно быть уникальным.
ismap Показывает, что изображение часть серверной карты изображений.
itemprop Глобальный атрибут
kind Указывает вид дорожки текста.
label Указывает читабельный заголовок дорожки текста.
lang Глобальный атрибут Определяет язык для используемого элемента.
language Определяет язык скрипта, используемый в элементе.
list Задаёт список предустановленных опций для предложения пользователю.
loop , , ,

Указывает, следует ли медиа элементам начинать проигрывание сначала, после их завершения.
low Указывает верхнюю границу нижнего диапазона.
manifest Задаёт URL кешированного манифеста документа.
max , ,

Указывает максимальное допустимое значение.
maxlength ,

Определяет максимальное количество символов, допустимых в элементе.
media , , , ,

Задаёт подсказку медиа, для которой, связанный ресурс был спроектирован.
method Определяет, какой HTTP метод использовать, когда отправляются данные формы. Может быть GET (по умолчанию) или POST.
min ,

Показывает минимальное допустимое значение.
multiple ,

Показывает могут ли быть выбраны множественные значения в input типа email или file.
name , , , , , , , , , , ,

Имя элемента. К примеру, используется сервером для определения полей отправленной формы.
novalidate Этот атрибут указывает, что форма не должна проверяться, когда передаётся на сервер.
open Указывает, отображать ли детали при загрузки страницы.
optimum Указывает оптимальное числовое значение.
pattern Определяет регулярное выражение, которое будет проверять входные данные элемента.
ping ,
placeholder ,

Предоставляет подсказку пользователю, касательно того, что можно ввести в поле.
poster URL указывающий блок постера для показа, пока пользователь играет или ищет.
preload ,

Указывает загружать ли ресурс целиком, его часть или не загружать вовсе.
pubdate Указывает, что эта дата и время являются ли датой ближайшего элемента предка .
radiogroup
readonly ,

Указывает, можно ли редактировать элемент.
rel , ,

Задаёт отношение целевого объекта к объекту ссылки.
required , ,

Указывает, необходимо ли заполнять этот элемент или нет.
reversed Указывает, отображать ли список по убыванию, вместо того, чтобы показывать его по возрастанию.
rows Определяет количество строк в textarea.
rowspan ,

Определяет количество строк ячейки таблицы, которые следует охватывать.
sandbox
spellcheck Глобальный атрибут Указывает, разрешена ли проверка правописания для этого элемента.
scope
scoped
seamless
selected Определяет значение, которое будет выделено при загрузки страницы.
shape ,
size ,

Определяет ширину элемента (в пикселях). Если у элемента значение атрибута type — text или password , тогда это количество символов.
sizes
span ,
src , , , , , , , ,

URL встраиваемого содержимого.
srcdoc
srclang
srcset
start Определяет первый номер, если это не 1.
step
style Глобальный атрибут Определяет CSS стили, которые перепишут установленные ранее стили.
summary
tabindex Глобальный атрибут Переписывает порядок Tab по умолчанию браузера и следует вместо него заданному.
target , , ,
title Глобальный атрибут Текст, который будет отображаться в всплывающей подсказке, когда на него наведут указатель.
type , , , , , , , ,

Определяет тип элемента.
usemap , ,
value , , , , , ,

Определяет значение элемента по умолчанию, которое будет отображаться после загрузки страницы.
width , , , , , ,

Примечание: в некоторых случаях, таких как , это устаревший атрибут, в этом случае используйте свойство CSS width вместо него. В других случаях, таких как , ширина должна быть задана этим атрибутом.
wrap Указывает, следует ли переносить текст.
border , ,

Ширина границы.Примечание: это устаревший атрибут, используйте свойство CSS border .
buffered ,

Содержит отрезок времени уже буферизованного медиа.
charset ,

Определяет кодировку страницы или скрипта.
checked ,

Указывает, следует ли отметить элемент при загрузки страницы.
cite , , ,

Содержит URI, который указывает на источник цитаты или изменения.
class Глобальный атрибут Часто используется вместе с CSS, чтобы стилизовать элементы с общими свойствами.
code Указывает URL файла класса аплета для загрузки и выполнения.
codebase Этот атрибут предоставляет абсолютный или относительный URL директории, файлы аплета .class, на которые ссылаются в хранимом атрибуте кода.
color , ,

Этот атрибут устанавливает цвет текста, используя либо название цвета, либо шестнадцатеричный формат #RRGGBB.Примечание: это устаревший атрибут. Используйте CSS-свойство color .
cols Определяет количество столбцов в textarea.
colspan ,

Определяет диапазон количества столбцов ячейки.
content Значение, ассоциированное с http-equiv или name зависит от контекста.
contenteditable Глобальный атрибут Указывает, редактируется ли содержимое элемента.
contextmenu Глобальный атрибут Определяет ID элемента который послужит, как контекстное меню элемента.
controls ,

Указывает, следует ли отображать пользователю кнопки воспроизведения.
coords Набор значений, задающий координаты области для активного участка.
data Задаёт URL ресурса.
data-* Глобальный атрибут Позволяет прикрепить произвольные атрибуты для HTML-элемента.
datetime , ,

Указывает дату и время, ассоциированное с элементом.
default Указывает, что дорожка должна быть доступна, если пользовательские настройки не говорят об обратном.
defer Указывает, что скрипт должен быть запущен, после того как страница будет проанализирована.
dir Глобальный атрибут Определяет направление текста. Допустимые значения ltr (Слева направо) или rtl (Справа налево).
dirname ,
disabled , , , , , , ,

Указывает, может ли пользователь взаимодействовать с элементом.
download ,

Указывает, что ссылка используется для загрузки.
draggable Глобальный атрибут Определяет, можно ли перетаскивать элемент.
dropzone Глобальный атрибут Указывает, что элемент принимает содержимое элемента, которое перетаскивают на него.
enctype Определяет тип содержимого для данных формы, когда method — POST.
for ,

Описывает элементы, которые принадлежат им.
form , , , , , , , , ,

Указывает форму, которая является владельцем элемента.
formaction ,

Указывает действие элемента, перезаписывающее действие, указанное в форме .
headers ,

ID элементов

, которые применяются к этому элементу.
height , , , , , ,

Примечание: в некоторых экземплярах, таких как , это устаревший атрибут, в этом случае используйте свойство CSS height . В других экземплярах, таких как , высота должна быть задана этим атрибутом.
accept ,

Список типов, которые принимает сервер, обычно тип файла.
accept-charset Список поддерживаемых наборов символов.
accesskey Глобальный атрибут Определяет клавишную комбинацию для активизации или добавления фокуса к элементу.
action URI адрес программы, которая обработает данные, переданные через форму.
align , , , , , , , , , , , , ,

Задаёт горизонтальное выравнивание элемента.
alt , , ,

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

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

На этом элементе следует автоматически сфокусироваться после загрузки страницы.
autoplay ,

Аудио и видео нужно воспроизвести как можно скорее.
autosave Предыдущее значения следует сохранить в выпадающем списке при загрузки страницы.
bgcolor , , , , , , , , ,

Цвет фона элемента.Примечание: это устаревший атрибут. Используйте свойство CSS background-color .

Содержимое в сравнении с IDL атрибутами

В HTML, большинство атрибутов имеют две грани: атрибут содержимого и IDL атрибут.

Атрибут содержимого — это атрибут как вы его устанавливаете из содержимого (HTML-код), и его можно устанавливать или получать с помощью element.setAttribute() или element.getAttribute() . Атрибут содержимого всегда строка, даже когда ожидаемое значение должно быть число. Например, для того чтобы установить maxlength элемента в 42 используя атрибут содержимого, вам нужно вызвать setAttribute(«maxlength», «42») на этом элементе.

IDL-атрибут также известен как свойство JavaScript. Это атрибуты, которые вы можете читать или устанавливать используя JavaScript-свойства наподобие element.foo . IDL-атрибут всегда собирается использовать (но может преобразовать) основной атрибут содержимого для возврата, когда вы получаете его и сохраняет в атрибут содержимого, когда вы устанавливаете его. Другими словами, IDL-атрибуты, в сущности, отражают атрибуты содержимого.

IDL-атрибуты не всегда строки; например, input.maxlength число (long со знаком). Когда используете IDL атрибуты, вы читаете или устанавливаете значения желаемого типа, поэтому input.maxlength всегда намеревается вернуть число и когда вы устанавливаете input.maxlength , это требует число. Если вы передадите другой тип, это автоматически конвертируется в число, по стандартным правилам преобразования типов в JavaScript.

IDL атрибуты могут отображать другие типы такие как unsigned long, URLs, booleans, и т.д. К несчастью нет ясных правил и способа, чтобы IDL атрибуты работали в связке с их соответствующими атрибутами содержимого в зависимости от атрибута. Большую часть времени, будет следовать правилам из спецификации, но иногда нет. HTML спецификации пытаются сделать это как можно дружелюбнее для разработчиков, но по различным причинам (по большинству историческим), некоторые атрибуты работают странно ( select.size , например) и вам следует прочитать спецификацию для точного понимания того, как они работают.

Атрибуты и 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 ); // Пётр

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *