logo

Rozhraní API element.dataset

Před časem jsem vám ukázal úžasné classList API, které umožňuje jednoduché přidávání, odstraňování a přepínání tříd CSS bez nutnosti analyzovat název třídy. Další jednoduché API dostupné ve FireFox Aurora Firefox 6, v době tisku a Chrome 8 je element.dataset API. Toto malé API umožňuje vývojářům získat a nastavit hodnoty atributů dat na prvcích HTML. Pojďme se podívat, jak to funguje!

Jak víte, do prvků HTML můžete přidávat informace pomocí vlastních atributů dat. Tyto datové atributy můžete pojmenovat, jak chcete. Existuje několik pravidel pro práci s rozhraním API datové sady:

  • Na prvek.dataset nelze přímo odkazovat – zobrazí se chyba
  • Na data-názvy vlastností odkazujete pomocí velbloudů v názvech atributů.
  • Název nemůže začínat xml
  • Název nesmí obsahovat velká písmena

Předpokládejme, že se na stránce nachází následující prvek:

<div id="myDiv" data-name="myDiv" data-id="myId" data-my-custom-key="This is the value"></div>

Chcete-li načíst hodnotu atributu data-id, zadejte kód:

// Get the element
var element = document.getElementById("myDiv");

// Get the id
var id = element.dataset.id;

Chcete-li získat atribut data-my-custom-key, zadejte kód:

// Retrieves "data-my-custom-key"
var customKey = element.dataset.myCustomKey;

Přiřazení hodnoty vlastnímu atributu by vypadalo takto:

// Sets the value to something else
element.dataset.myCustomKey = "Some other value";

// Element would be:
//		<div id="myDiv" data-name="myDiv" data-id="myId" data-my-custom-key="Some other value"></div>

Pokud datový atribut, který jste nastavili programově, neexistuje, bude vytvořen:

// Set new data- attribute
element.dataset.mootoolsFtw = "true";

// Element would be:
//		<div id="myDiv" data-name="myDiv" data-id="myId" data-my-custom-key="Some other value" data-mootools-ftw="true"></div>

Pravděpodobně je to samozřejmé, ale nemůžete ukládat objekty do element.dataset, aniž byste je nejprve serializovali. Nejsem si vědom omezení délky datové sady, ale ukládání velkých sad dat prostřednictvím datové sady způsobí nafouklý DOM, který by bylo obtížné ladit. Přesto si myslím, že tento malý nugget je užitečný!