Как сделать свой атрибут html
Обновлено: 08.07.2024
Атрибуты — это HTML-сущности, с помощью которых мы можем добавить определённые данные к элементам в HTML-коде.
Когда браузер запрашивает некоторую страницу, он получает её исходный HTML-код. После этого он парсит этот код и строит на его основании DOM. Во время этого процесса HTML-атрибуты элементов переводятся в соответствующие DOM-свойства .
Например, браузер, при чтении следующей HTML-строчки кода, создаст для этого элемента следующие DOM-свойства: id , className , src и alt .
Обращение к этим свойствам в коде JavaScript выполняется как к свойствам объекта. Объектом здесь выступает узел (элемент) DOM.
Пример, в котором получим значения DOM-свойств для элемента, приведённого выше, и выведем их значения в консоль:
Некоторые названия DOM-свойств не соответствуют именам атрибутов. Одним из таких является атрибут class . Данному атрибуту соответствует DOM-свойство className . Данное отличие связано с тем, что class является ключевым словом в JavaScript, оно зарезервировано и не может использоваться. Из-за этого разработчики стандарта решили использовать для соответствия какое-то другое название, в качестве которого было выбрано className .
Ещё один нюанс связан с тем, что перевод HTML-атрибутов, заданных в исходном коде документа, в DOM-свойства не всегда осуществляется один к одному.
Если элемент имеет нестандартный HTML-атрибут, то свойство, соответствующее ему в DOM, не создаётся .
Другое отличие связано с тем, что значения определённых HTML-атрибутов и соответствующих им DOM-свойств могут быть различными. Т.е. атрибут может иметь одно значение, а DOM-свойство, созданное на его основе – другое .
Одним из таких атрибутов является checked .
Значение HTML-атрибута checked в данном случае – это пустая строка. Но, свойство, соответствующее данному атрибуту в DOM, будет иметь значение true . Т.к. по правилам стандарта для установления true достаточно лишь упоминание этого атрибута в HTML-коде и при этом не важно какое он будет иметь значение.
При этом даже если мы в HTML-коде не укажем атрибут checked для элемента input с типом checkbox , то для него в DOM всё равно будет создано свойство checked , но оно будет равно false .
Кроме этого, JavaScript позволяет также работать с атрибутами. Для этого в DOM API имеются специальные методы. Но их желательно использовать только тогда, когда вам действительно нужно работать с данными именно так.
При этом нужно знать, что, когда мы изменяем DOM-свойство элемента, изменяется и соответствующий ему атрибут, и наоборот. Но это процесс в браузерах выполнятся не всегда один к одному.
Основные отличия между DOM-свойствами и атрибутами:
- значение атрибута – это всегда строка, а значение DOM-свойства – определённый тип данных (не обязательно строка);
- имя атрибута – регистронезависимо, а DOM-свойства - регистрозависимо. Т.е. в HTML-коде мы можем, например, HTML-атрибут id написать, как Id , ID и т.д. То же касается и имени атрибута, которые мы указываем в специальных методах JavaScript для работы с ним. Но к соответствующему DOM-свойству мы можем обратиться только по id и никак по-другому.
Работа с DOM-свойствами элемента
Работа со свойствами элементов в JavaScript как уже было отмечено выше осуществляется как со свойствами объектов.
Но для того, чтобы обратиться к свойству некоторого элемента, его необходимо сначала получить. Получить DOM-элемент в JavaScript можно, например, с помощью универсального метода querySelector , а коллекцию DOM элементов, например, посредством querySelectorAll .
В качестве первого примера рассмотрим следующий HTML-элемент:
На базе него разберём как осуществляется получение DOM-свойств, их изменение и добавление новых.
Чтение значений DOM-свойств:
Изменение значений DOM-свойств:
Пример, в котором выведем в консоль все значения классов, которые есть у элементов p на странице:
Пример, в котором установим всем элементам с классом content свойство lang со значением "ru":
Атрибуты элементов и методы для работы с ними
Атрибуты изначально задаются в HTML-коде. Они хоть и связаны, некоторым образом, со свойствами, но это не одно и тоже. В большинстве случаев следует работать именно со свойствами, а к атрибутам обращаться только тогда, когда это действительно нужно.
Значения атрибутов, в отличие от DOM-свойств, как это уже было отмечено выше всегда является строкой.
В JavaScript для выполнения операций, связанных с атрибутами, имеется четыре метода:
- .hasAttribute('имя_атрибута') – проверяет наличие указанного атрибута у элемента. Если проверяемый атрибут есть у элемента, то данный метод возвращает true , в противном случае - false .
- .getAttribute('имя_атрибута') – получает значение атрибута. Если указанного атрибута нет у элемента, то данный метод возвращает пустую строку ("") или null .
- .setAttribute('имя_атрибута', 'значение_атрибута') – устанавливает указанный атрибут с указанным значением элементу. Если указанный атрибут есть у элемента, то данный метод тогда просто изменит ему значение.
- .removeAttribute('имя_атрибута') - удаляет указанный атрибут у элемента.
Очень интересный пример с атрибутом value .
Пример с атрибутом value
Получим значение атрибута value и DOM-свойства value :
Из этого примера видно, что, при измении атрибута value , браузер автоматически изменяет в соответствии с ним DOM-свойство value .
Теперь давайте проделаем действия, наоборот, а именно изменим значение DOM-свойства и проверим изменится ли значение атрибута:
Из этого примера видно, что не всегда изменение DOM-свойства приводит к соответствующему изменению атрибута. Т.е. в этом случае изменение DOM-свойства value не изменяет соответствующий ему атрибут .
Тоже самое произойдёт, когда пользователь будет вводить текст в это поле. В DOM-свойстве value будет находится действительное значение, а в соответствующем ему атрибуте изначальное или то, которое мы установили, например, с помощью метода setAttribute .
Этот пример показывает, что более корректно работать всегда с DOM-свойствами, а обращаться к атрибуту нужно только тогда, когда это действительно необходимо.
Даже в случае, когда вам нужно получить начальное значение value , которое мы установили в HTML, можно воспользоваться свойством. Свойство, содержащее начальное значение атрибута value называется defaultValue .
Ещё один очень интересный пример, но теперь с атрибутом href.
Пример с атрибутом href
Пример, в котором нам нужно получить значение ссылки так, как оно было установлено в HTML.
В этом примере атрибут href и DOM-свойство href содержат разные значения. В атрибуте href - то, что мы установили в коде, а в DOM-свойстве - полный URL. Это различие продиктовано стандартом, в соответствии с которым браузер должен привести значение href к полному URL.
Поэтому если нам нужно получить то, что находится в атрибуте, то без метода getAttribute в этом случае не обойтись.
В завершении разберём ещё атрибут selected .
Пример с атрибутом selected
Пример, в котором показано как можно получить значение выбранной опции select :
Пример, в котором показано как можно получить выбранные значения опций в элементе select :
Ещё один способ работы с атрибутами (свойство attributes)
В JavaScript у каждого элемента имеется свойство attributes , с помощью которого можно получить все его атрибуты в виде объекта NamedNodeMap .
Данный способ может находить применение, когда вам нужно, например перебрать все атрибуты элемента.
Доступ к атрибуту в этой коллекции осуществляется по его индексу или с помощью метода item . Отсчёт атрибутов в этой коллекции ведётся с 0.
Например, выведем в консоль все атрибуты некоторого элемента:
Кроме этого, работать с этой коллекцией можно также посредством следующих методов :
- .getNamedItem('имя_aтpибyтa') – получает значение указанного атрибута (если указанный атрибут отсутствует у элемента, то в качестве результата получим null ).
- .setNamedItem('aтpибyт_yзeл') – добавляет новый атрибут к элементу или обновляет значение у существующего. Для создания атрибута необходимо использовать метод document.createAttribute() , которому в качестве параметра необходимо передать имя атрибута. После этого созданному атрибуту необходимо присвоить значение с помощью свойства value .
- .removeNamedItem('имя_атрибута') – удаляет указанный атрибут у элемента (в качестве результата возвращает удалённый атрибут).
Пример, работы с атрибутами через методы getNamedItem, setNamedItem и removeNamedItem:
Все атрибуты у HTML элементов, начинающиеся с префикса data-*, являются пользовательскими. Data атрибуты можно использовать для дополнительной стилизации, но чаще всего они применяются для создания интерактивной логики в JavaScript. Особенно их любят применять разные библиотеки, когда пользователю предлагается настроить скрипт через data атрибуты. Сделать это может любой начинающий вебмастер с начальным уровнем знаний JavaScript.
Использование data атрибутов в HTML и CSS
Data атрибут - это очень гибкий инструмент и сейчас мы рассмотрим, как можно его использовать в HTML и CSS.
Как добавить data атрибут к HTML тегу
Вначале обязательно ставим префикс data, затем через дефис указываем какое-то наше слово подходящее по смыслу и само значение. Например мы хотим отсортировать только категорию с домашними питомцами. Все слова, за исключением самого префикса data-*, мы можем придумывать свои собственные. Так мы можем управлять отдельными группами элементов, помеченные data атрибутами. Это удобно для создания интерактива на языке JavaScript.
Длина названия data атрибута может быть любой, слова должны разделяться через дефис.
Пример стилизации элементов с data атрибутом
Мы можем стилизовать любой элемент по его data атрибуту. В CSS коде селектор data атрибута заключается в квадратные скобки. Обращаться можно только по названию атрибута, по тегу + название или по классу (id) + название.
// CSS код
// селектор по названию атрибута
[data-size="large"] font-size: 30px;
padding: 20px;
>
// селектор по тегу и названию
div [data-size="large"] font-size: 30px;
padding: 20px;
>
// селектор по классу и названию
large_btn.[data-size="large"] font-size: 30px;
padding: 20px;
>
Принцип создания подсказок с data атрибутом на CSS
Прописываем текст подсказки в data атрибуте тега. Затем с помощью псевдоэлементов ::before или ::after передать в функцию attr значение атрибута data-tooltip.
[data-tooltip]::after content: attr(data-tooltip);
>
Использование data атрибутов в JavaScript
В JS существует, как минимум два способа получения data атрибута:
Первый способ, через getAttribute и setAttribute
Указываем выбранный на странице элемент (тег, id, класс), сам метод getAttribute и название атрибута, который надо получить.
Метод setAttribute добавляет значение, указанное вторым параметром ("pillows") в data атрибут в первом параметре ("data-filter").
Второй способ, через объект dataset в структуре DOM
Доступ к коллекции dataset мы получаем по ключу (слово после префикса data-*).
// Получение data атрибута
div.dataset.person
// Добавление значения для data атрибута
div.dataset.person = "Donald"
Работа с data атрибутами в JavaScript - достаточно актуальная тема, с которой вы будете часто встречаться, более основательно познакомиться с data атрибутами и не только, вы сможете в моем видеокурсе по JavaScript.
Итоги
Data атрибуты позволяют хранить разную информацию об элементе, которая может помочь для работы скриптов, а также для CSS стилизации элементов. HTML код с созданными атрибутами с data-* префиксом будет, абсолютно валидным. Создавать свои собственные data атрибуты для хранения значений стало возможным лишь в HTML5, до этого такой возможности очень не хватало веб-разработчикам. Вот список самых востребованные задач, которые удобно решать с помощью data атрибутов:
- Создание всплывающих подсказок на чистом CSS
- Получать и изменять значения атрибутов
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Комментарии ( 1 ):
Здравствуйте! Продолжаем изучение работы с DOM в JavaScript и в этом уроке рассмотрим свойства и методы объекта Element. То есть это непосредственно сам найденный элемент на веб-странице. Очень важно не путать объект Element с Node. Node представляет из себя коллекцию элементов на веб-странице.
Одним из таких вых свойств объекта Element выступает свойство tagName, которое вернет тег элемента. Рассмотрим пример.
В примере сначала получаем тег корневого элемента и после с помощью функции getChild получим все вложенные элементы:
Свойства innerText и innerHTML
Свойство innerText позволяет менять текстовое содержимое элемента, а свойство innerHTML — позволяет получать и изменять HTML-код элемента. Давайте рассмотрим как работают эти свойства на примере.
Следует отметить, что свойству innerText соответствует свойство textContent. Эти 2 свойства практически делают тоже самое:
Рассмотрим приме по замене кода html у элемента на веб-странице:
Методы объекта Element для работы с атрибутами элемента.
Для работы с атрибутами (о том что такое атрибут HTML элемента я писал здесь) элемента предусмотрены следующие методы:
- getAttribute(attr): позволяет получить значение атрибута attr
- setAttribute(attr, value): устанавливает новое значение value атрибута attr
- removeAttribute(attr): удалит атрибут и его значение
Рассмотрим пример работы с атрибутами:
Методы для изменения размеров и позиций элементов
Все элементы имеют свойства, которые позволяют вычислить размер элемента. Но также важно понимать отличия между этими свойствами
Свойства offsetWidth и offsetHeight возвращают ширину и высоту элемента в пикселях. В ширину и высоту включается также и граница элемента.
А вот свойства clientWidth и clientHeight могут также возвращать ширину и высоту элемента в пикселях, но уже без границы. Разберем на примере.
Просмотреть пример
Как видно из примера, поскольку у блока div есть граница в 5 пикселей, то по сравнению с clientHeight/clientWidth к offsetHeight/offsetWidth добавляет по 10 пикселей.
Если вам надо определить позицию элемента, то используйте метод getBoundingClientRect().
Этот метод вернет объект со свойствами top, bottom, left, right, которые представляют из себя координаты положения элемента относительно левого верхнего угла браузера:
Нестандартные атрибуты, dataset
При написании HTML мы используем много стандартных атрибутов. Но что насчёт нестандартных, пользовательских? Давайте посмотрим, полезны они или нет, и для чего они нужны.
Также они могут быть использованы, чтобы стилизовать элементы.
Например, здесь для состояния заказа используется атрибут order-state:
Почему атрибут может быть предпочтительнее таких классов, как .order-state-new, .order-state-pending, order-state-canceled?
Это потому, что атрибутом удобнее управлять. Состояние может быть изменено достаточно просто:
Но с пользовательскими атрибутами могут возникнуть проблемы. Что если мы используем нестандартный атрибут для наших целей, а позже он появится в стандарте и будет выполнять какую-то функцию? Язык HTML живой, он растёт, появляется больше атрибутов, чтобы удовлетворить потребности разработчиков. В этом случае могут возникнуть неожиданные эффекты.
Чтобы избежать конфликтов, существуют атрибуты вида data-*.
Атрибуты, состоящие из нескольких слов, к примеру data-order-state, становятся свойствами, записанными с помощью верблюжьей нотации: dataset.orderState.
Использование data-* атрибутов – валидный, безопасный способ передачи пользовательских данных.
Пожалуйста, примите во внимание, что мы можем не только читать, но и изменять data-атрибуты. Тогда CSS обновит представление соответствующим образом: в примере выше последняя строка (*) меняет цвет на синий.
ИТОГИ.
Для изменения внутреннего HTML содержимого элемента используется метод innerHTML.
Для изменения атрибутов исплользуется метод setAttribute(name, value), которому передается атрибут и новое значение атрибута.
Для удаления атрибута используется метод removeAttribute(name), которому передается удаляемый атрибут.
Задания
Добавьте класс ссылкам.
Пусть на странице есть ссылки. Создайте класс color, который будет добавлять желтый фон и добавьте этот класс, как атрибут ссылкам ведущим на внешние ресурсы.
Создание собственного атрибута
Создайте на странице новый элемент div и добавьте ему пользовательский атрибут data-attribute со значением testdata.
Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.
Атрибуты предоставляют дополнительную информацию о HTML-элементах.
Атрибуты HTML
- Все элементы HTML могут иметь атрибуты
- Атрибуты предоставляют Дополнительные сведения об элементе
- Атрибуты всегда указываются в начальном теге
- Атрибуты обычно поставляются в парах "имя/значение", например: name="value"
Атрибут href
Пример
Вы узнаете больше о ссылках и тег далее в этом учебнике.
Атрибут src
HTML-образы определяются тегом .
Имя файла источника изображения указывается в атрибуте src :
Example
Атрибуты ширины и высоты
Изображения в HTML имеют набор атрибутов size, который определяет ширину и высоту изображения:
Пример
Размер изображения указан в пикселях: width="500", означает 500 пикселей в ширину.
Вы узнаете больше об изображениях в наших HTML-изображениях Глава.
The alt Attribute
Атрибут alt указывает альтернативный текст, который будет использоваться, когда изображение не может быть отображено.
Значение атрибута может быть прочитано программами чтения с экрана. Таким образом, кто-то "прослушивание" на веб-странице, например, слепой человек, может "слышать" элемент.
Пример
Атрибут alt также полезен, если изображение не существует:
Пример
Посмотрите, что произойдет, если мы попытаемся отобразить изображение, которое не существует:
Атрибут style
Атрибут style используется для указания стиля элемента, например цвета, шрифта, размера и т. д.
Пример
I am a paragraph
Вы узнаете больше о стилизации позже в этом учебнике, и в нашем Учебник по CSS.
Атрибут lang
Язык документа может быть объявлен в теге .
Язык объявляется с атрибутом lang .
Объявление языка важно для приложений специальных возможностей (программы чтения с экрана) и поисковых систем:
Читайте также: