В этом посте будет объяснено использование атрибутов данных в JavaScript.
Как использовать атрибуты данных в JavaScript?
В JavaScript « данные Атрибуты » используются для хранения дополнительной информации, которая не отображается на веб-странице. Эту информацию можно записывать, получать к ней доступ, читать и динамически изменять в соответствии с требованиями пользователя. В этом разделе рассмотренная задача практически выполнена на атрибутах данных.
Синтаксис
< данные элемента '=' 'какая-то ценность' >
В приведенном выше синтаксисе:
- « элемент » представляет элемент HTML, в котором используется атрибут данных.
- « данные-* «» обозначает несколько (*) атрибутов данных, начинающихся с префикса (data-), т. е. ключевого слова данных, за которым следует дефис.
- какое-то значение: Он определяет значение атрибута данных.
Теперь используйте приведенный выше синтаксис для создания атрибута данных.
Создание атрибутов данных
< идентификатор деления '=' 'myDiv' данные - имя '=' 'Элвин' данные - возраст '=' '40' данные - пол '=' 'мужской' >/ делитель >Указанный однострочный HTML-код создает следующее: имя-данных », « возраст данных », и « пол данных Атрибуты внутри элемента «div» с идентификатором «myDiv».
Давайте прочитаем/получим доступ к созданным атрибутам данных.
Пример 1. Чтение/доступ к атрибуту данных с использованием свойства «dataset».
В этом примере применяется свойство «набор данных» для чтения/доступа к определенным или всем атрибутам данных.
Сначала посмотрите на « кнопка ” элемент, который вызывает “ jsFunc() », когда это связано « по щелчку Событие срабатывает при нажатии кнопки:
< кнопка по клику '=' 'jsFunc()' > Доступ к атрибуту данных кнопка >Теперь перейдем к определению «jsFunc()»:
< сценарий >функция jsFunc ( ) {
константа элемент '=' документ. getElementById ( 'myDiv' ) ;
консоль. бревно ( элемент. набор данных ) ;
}
сценарий >
В приведенных выше строках кода:
- « jsFunc() сначала объявляет переменную «elem», которая применяет « документ.getElementById() ” для доступа к добавленному элементу div через его идентификатор “myDiv”.
- Далее он использует « консоль.log() метод, который будет использовать метод « набор данных ” для доступа к атрибутам данных доступного элемента div и отображения их в веб-консоли.
Выход
Нажмите F12, чтобы открыть веб-консоль:
Видно, что при нажатии на данную кнопку в консоли отображается сообщение « DOMStringMap », содержащий все атрибуты данных элемента div.
Доступ к конкретному значению
Если пользователь хочет получить доступ к определенному атрибуту данных, укажите его имя с помощью свойства «набор данных» следующим образом:
< сценарий >функция получить ( ) {
константа элемент '=' документ. getElementById ( 'myDiv' ) ;
консоль. бревно ( элемент. набор данных . имя ) ;
}
сценарий >
В настоящее время доступ к атрибутам данных «имя» осуществляется с помощью « набор данных ' свойство.
Выход
Видно, что консоль показывает значение указанных атрибутов данных только при нажатии кнопки.
Пример 2. Чтение/доступ к атрибуту данных с использованием метода getAttribute().
В этом примере используется метод getAttribute() для чтения и доступа к атрибутам данных.
В этом сценарии также включается элемент кнопки из первого примера:
< кнопка по клику '=' 'jsFunc()' > Доступ к атрибуту данных кнопка >Давайте посмотрим на функциональность метода getAttribute():
< сценарий >функция jsFunc ( ) {
константа элемент '=' документ. getElementById ( 'myDiv' ) ;
консоль. бревно ( элемент. getAttribute ( 'имя-данных' ) ) ;
консоль. бревно ( элемент. getAttribute ( 'возраст данных' ) ) ;
консоль. бревно ( элемент. getAttribute ( 'гендер данных' ) ) ;
}
сценарий >
В приведенном выше фрагменте кода:
- Переменная «elem» применяет « документ.getElementById() ” для доступа к добавленному элементу div, используя его идентификатор “myDiv”.
- Далее « консоль.log() метод использует метод « ПолучитьАтрибут() », чтобы получить указанное значение атрибута «data» извлеченного элемента div, а затем отобразить его в веб-консоли.
- Та же задача выполняется для доступа к остальным указанным атрибутам данных.
Примечание: Метод getAttribute() указывает атрибут данных с префиксом data, за которым следует дефис (-), то есть (data-), который не требуется при использовании свойства dataset().
Выход
Приведенный выше вывод отображает все указанные значения атрибутов данных при нажатии кнопки.
Пример 3. Запись атрибута данных с использованием свойства «dataset».
В этом примере атрибуты данных записываются с использованием свойства «dataset».
Содержимое элемента кнопки изменяется в соответствии с текущим сценарием:
< кнопка по клику '=' 'jsFunc()' > Запись атрибута данных кнопка >Теперь напишите новый атрибут данных в добавленном элементе div:
< сценарий >функция jsFunc ( ) {
константа элемент '=' документ. getElementById ( 'myDiv' ) ;
элемент. набор данных . идентификатор '=' 'человек'
консоль. бревно ( элемент. набор данных ) ;
}
сценарий >
В приведенном выше блоке кода:
- « набор данных Свойство « » записывает новое имя атрибута данных «id» с указанным строковым значением.
- Далее « conolse.log() использует свойство dataset для отображения интерфейса DOMStringMap, содержащего вновь записанный атрибут данных, в веб-консоли.
Выход
Здесь консоль отображает «DOMStringMap», содержащую новый атрибут данных «id», записанный с использованием свойства «dataset».
Пример 4. Обновление значения атрибута данных
В этом примере обновляется существующее значение определенного атрибута данных с помощью свойства «набор данных».
Текст элемента кнопки изменяется согласно данному сценарию:
< кнопка по клику '=' 'jsFunc()' > Обновить атрибут данных кнопка >Теперь перейдите к разделу JavaScript:
< сценарий >функция jsFunc ( ) {
константа элемент '=' документ. getElementById ( 'myDiv' ) ;
элемент. набор данных . имя '=' 'Джон'
консоль. бревно ( элемент. набор данных . имя ) ;
}
сценарий >
В приведенном выше блоке кода указанное значение атрибута данных «имя» обновляется с помощью « набор данных ' свойство.
Выход
Консоль отображает обновленное значение указанных атрибутов данных при нажатии кнопки.
Пример 5. Удаление атрибута данных
В этом примере определенный атрибут данных удаляется с помощью ключевого слова «delete».
Текст элемента кнопки изменяется согласно требованию:
< кнопка по клику '=' 'jsFunc()' > Удалить атрибут данных кнопка >Теперь следуйте блоку кода JavaScript:
< сценарий >функция jsFunc ( ) {
константа элемент '=' документ. getElementById ( 'myDiv' ) ;
удалить элемент. набор данных . возраст ;
консоль. бревно ( элемент. набор данных . возраст ) ;
}
сценарий >
В приведенном выше фрагменте кода указано « удалить Ключевое слово «dataset» со свойством «dataset» для удаления атрибута данных, к которому осуществляется доступ.
Выход
Замечено, что консоль показывает « неопределенный » при нажатии кнопки, которое четко подтверждает, что атрибут данных, к которому осуществляется доступ, был удален.
Заключение
В JavaScript атрибуты данных можно использовать различными способами, такими как чтение, доступ, запись, обновление и удаление в соответствии с требованиями. Все эти задачи можно выполнить с помощью встроенного « набор данных ' свойство. Однако пользователь также может получить доступ к атрибуту данных один за другим с помощью « ПолучитьАтрибут() метод. В этом посте практически объяснено использование атрибутов данных в JavaScript.