Что такое dataset? Привязка данных к элементам через data-атрибуты без jQuery.

dataset

Все атрибуты, название которых начинается с data-, валидны, согласно спецификации HTML5, и предназначены для привязки некого набора пользовательских данных к html-элементу.

Вот пример:

<div id="my1" data-foot-size="46">Ivan</div>

Вы, наверняка, пользовались jQuery и знаете, как работает метод .data()

// установить значение
jQuery("#my1").data('footSize',44);

// получить значение
console.log(jQuery("#my1").data('footSize')); // 44

Свойство dataset появилось совсем недавно (спецификация) и выполняет такую же роль, только без jQuery. Оно позволяет из javascript получить доступ в режиме чтения и записи к атрибутам data-*, установленным для html-элемента.

var el = document.getElementById('my1');

// проверить, задано ли значение
if('footSize' in el.dataset){...}

// установить значение
el.dataset.footSize = '44';

// получить значение
console.log(el.dataset.footSize); // 44

Устанавливаемое значение поля dataset автоматически синхронизируется с html атрибутом соответствущего элемента.

Как и в случае с jQuery, название html-атрибута в форме data-one-two-three соответствует свойству dataset.oneTwoThree. Вот несколько примеров:

<div data-id="a" data-current-value="b">Some text</div>  
// dataset.id
// dataset.currentValue

<div data-car-brand="Mazda" data-car-model-number="6">Mazda 6</div>
// dataset.carBrand
// dataset.carModelNumber

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

Dataset поддержка браузерами

Если же Вам необходимы ранние версии IE, обратите внимание на этот полифил

One comment on “Что такое dataset? Привязка данных к элементам через data-атрибуты без jQuery.
  1. С той лишь разницей, что jQuery.data может привязывать к элементу любые данные, в т. ч. объекты, а dataset все сериализует в строку, даже в отличие от обычных атрибутов (т. н. expando — расширение нативных объектов, что работает во всех версиях всех браузеров). Минус jquery.data в том, что он течет, если не отключить данные по завершении.
    Я бы настоятельно рекомендовал посмотреть на WeakMap, как замену всей этой махинации с dataset/data.

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

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

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

*

* Copy This Password *

* Type Or Paste Password Here *

Проект создан в GanttPRO
Спасибо за лайк в FACEBOOK
Подписывайтесь на новости вконтакте
Последние статьи от html5.by