Dodatkowe atrybuty HTML. Jak korzystać z atrybutów danych HTML5

Czy zdarzyło Ci się kiedyś używać nazw klas elementów lub atrybutów rel do przechowywania dowolnych fragmentów metadanych wyłącznie w celu uproszczenia kodu JavaScript? Jeśli tak, to mam dla Ciebie ekscytujące wieści! Jeśli tego nie zrobiłeś i myślisz „Wow, to świetny pomysł! Błagam cię, abyś natychmiast uwolnił się od tej myśli i kontynuował czytanie.

Dzięki HTML 5 mamy teraz możliwość osadzania niestandardowych atrybutów danych we wszystkich elementach HTML. Te nowe niestandardowe atrybuty danych składają się z dwóch części:

Nazwa atrybutu Nazwa atrybutu danych musi mieć co najmniej jeden znak i musi być poprzedzona przedrostkiem „data-”. Nie powinien zawierać wielkich liter. Wartość atrybutu Wartość atrybutu może być dowolnym ciągiem.

Używając tej składni, możemy dodać dane aplikacji do naszego znacznika, jak pokazano poniżej:

marchew
Seler
Rzodkiewki

Możemy teraz używać tych danych przechowywanych w kodzie JavaScript naszej witryny, aby tworzyć bogatsze i bardziej angażujące wrażenia użytkownika. Wyobraź sobie, że gdy użytkownik kliknie warzywo, w przeglądarce otwiera się nowa warstwa, wyświetlając dodatkowe odstępy między nasionami i instrukcje siewu. Dzięki atrybutom danych, które dodaliśmy do naszego

elementów, możemy teraz wyświetlać te informacje natychmiast, bez martwienia się o wykonywanie jakichkolwiek wywołań Ajax i bez konieczności wykonywania jakichkolwiek zapytań do bazy danych po stronie serwera.

Poprzedzenie atrybutów niestandardowych danymi — zapewnia, że zostaną one całkowicie zignorowane przez klienta użytkownika. W przypadku przeglądarki, a nawet końcowego użytkownika serwisu, dane te nie istnieją.

Specyfikacja mówi (podkreślenie nasze):

Niestandardowe atrybuty danych są przeznaczone do przechowywania niestandardowych danych prywatnych dla strony lub aplikacji, dla których nie ma więcej odpowiednich atrybutów lub elementów.

Atrybuty te nie są przeznaczone do użytku przez oprogramowanie niezależne od witryny, która z nich korzysta.

Każdy element HTML może mieć określoną liczbę niestandardowych atrybutów danych o dowolnej wartości.
Specyfikacja W3C

Jak mogę używać atrybutów danych?

Ponieważ niestandardowe atrybuty danych są poprawne w HTML 5, można ich używać w dowolnej przeglądarce obsługującej doctypes HTML 5. Na szczęście to prawie wszystkie. Oprócz wspomagania kompatybilności wstecznej zapewnia to również, że niestandardowe atrybuty danych pozostaną skalowalnym, wieloplatformowym rozwiązaniem również w przyszłości.

Teraz, gdy dobrze rozumiemy, czym są atrybuty danych, przyjrzyjmy się, jak można z nich korzystać:

Aby przechowywać początkową wysokość lub krycie elementu, które mogą być wymagane w późniejszych obliczeniach animacji JavaScript
Aby przechowywać parametry filmu Flash, który jest ładowany przez JavaScript
Aby przechowywać niestandardowe dane dotyczące tagowania analityki internetowej, jak zademonstrował Jason Karns
Aby przechowywać dane o stanie zdrowia, amunicji lub życiu elementu w grze JavaScript
Aby zasilać dostępny JavaScript

Do czego nie powinienem używać atrybutów danych?

Chociaż elastyczne, atrybuty danych nie są odpowiednim rozwiązaniem dla wszystkich problemów.

Atrybutów danych nie należy używać, jeśli istnieje atrybut lub element, który jest bardziej odpowiedni do przechowywania danych. Na przykład dane daty/godziny powinny być prawdopodobnie prezentowane semantycznie w elemencie czasu, a nie przechowywane w niestandardowych atrybutach danych.
Niestandardowe atrybuty danych nie mają na celu konkurowania z mikroformatami. W specyfikacji wyraźnie zaznaczono, że dane nie są przeznaczone do użytku publicznego. Oprogramowanie zewnętrzne nie powinno z nim wchodzić w interakcje. Oznaczanie danych kontaktowych lub szczegółów wydarzenia przy użyciu niestandardowych atrybutów danych byłoby niewłaściwe, chyba że jest to przeznaczone tylko do użycia przez Twój własny skrypty wewnętrzne.
Obecność/brak określonego atrybutu danych nie powinna być wykorzystywana jako zaczep CSS dla jakichkolwiek stylów. Sugerowałoby to, że dane, które przechowujesz, mają bezpośrednie znaczenie dla użytkownika i powinny być oznaczone w bardziej semantyczny i przystępny sposób.

Używanie atrybutów danych z JavaScript

Teraz, gdy rozumiemy, czym są niestandardowe atrybuty danych i kiedy możemy ich używać, powinniśmy prawdopodobnie przyjrzeć się, jak możemy z nimi współdziałać za pomocą JavaScript.

Jeśli chcielibyśmy pobrać lub zaktualizować te atrybuty przy użyciu istniejącego, natywnego JavaScript, możemy to zrobić za pomocą metod getAttribute i setAttribute, jak pokazano poniżej:

Ta metoda będzie działać we wszystkich nowoczesnych przeglądarkach, ale nie jest to sposób, w jaki mają być używane atrybuty danych. Drugim (nowym i ulepszonym) sposobem osiągnięcia tego samego celu jest dostęp do właściwości dataset elementu. Ta właściwość dataset - część nowych API JavaScript 5 HTML 5 - zwróci obiekt DOMStringMap wszystkich atrybutów danych wybranego elementu. W przypadku korzystania z tego podejścia, zamiast używania pełnej nazwy atrybutu, można zrezygnować z przedrostka danych i odwoływać się bezpośrednio do danych niestandardowych, używając nazwy, którą im przypisałeś.

Jeśli w pewnym momencie w skrypcie określony atrybut danych stanie się zbędny i nie będzie już potrzebny, można również całkowicie usunąć ten atrybut z elementu DOM, ustawiając go na wartość null .

roślina.dataset.leaves = null; // Gąsienice atakują!

Niestety nowa właściwość dataset nie została jeszcze zaimplementowana w żadnej przeglądarce, więc w międzyczasie najlepiej używać getAttribute i setAttribute, jak pokazano wcześniej.

Podczas tworzenia aplikacji może okazać się przydatna możliwość wybierania elementów na podstawie obecności – lub nawet określonych wartości – ich niestandardowych atrybutów danych. Można to szybko i łatwo osiągnąć za pomocą querySelectorAll, jak pokazano poniżej:

// Zaznacz wszystkie elementy z atrybutem „rozkwitanie danych” document.querySelectorAll(""); // Zaznacz wszystkie elementy z czerwonymi liśćmi document.querySelectorAll("");

Słowo ostrzeżenia

Ponieważ atrybuty danych stają się coraz szerzej stosowane, ryzyko konfliktów w konwencjach nazewnictwa staje się znacznie większe. Jeśli używasz niewyobrażalnej nazwy atrybutu, takiej jak data-height , prawdopodobnie w końcu natkniesz się na bibliotekę lub wtyczkę, która używa tej samej nazwy atrybutu. Wiele skryptów pobierających i ustawiających wspólny atrybut danych prawdopodobnie spowoduje chaos. Aby tego uniknąć, zachęcam ludzi do wybrania standardowego ciągu znaków (być może nazwy strony/wtyczki) jako prefiksu wszystkich atrybutów danych - np. data-html5doctor-height lub data-my-plugin-height .

Streszczenie

Niestandardowe atrybuty danych to świetny sposób na uproszczenie przechowywania danych aplikacji na stronach internetowych. Chociaż nie możesz jeszcze korzystać z nowych API JavaScript, możesz cieszyć się dużym sukcesem, używając getAttribute i setAttribute, wiedząc, że będą działać we wszystkich głównych przeglądarkach.

Praca domowa

Jeśli bardzo chcesz pobawić się nową właściwością zestawu danych, ale rozczarowałeś się, że nie została ona zaimplementowana, nie obawiaj się!, ponieważ na końcu tunelu jest światełko. Być może zainteresuje Cię eksperymentalny kod dr Remy , który częściowo włącza funkcjonalność zestawu danych w niektórych przeglądarkach poprzez edycję elementu Element.prototype .

Kod obsługuje pobieranie atrybutów danych w najnowszych wersjach przeglądarek Firefox, Safari, Opera i Chrome, ale niestety nie będzie działał w żadnej wersji IE (ponieważ IE nie udostępnia obiektu Element). Ten kod również częściowo obsługuje ustawianie atrybutów danych, ale będzie przechowywać tylko nowe wartości atrybutów w JavaScript i nie zaktualizuje elementu DOM, jak zrobiłaby to pełna, natywna implementacja właściwości dataset. Chociaż ten kod jest głównie dowodem koncepcji, może być przydatny do tworzenia aplikacji mobilnych lub intranetowych w zamkniętych środowiskach, w których kompatybilność z różnymi przeglądarkami (IE) nie stanowi problemu.

Kategoria

45 odpowiedzi na artykuł „Niestandardowe atrybuty danych HTML5 (data-*)”

Zdecydowanie nie rozumiem, dlaczego niewłaściwe jest używanie niestandardowych atrybutów danych dla zewnętrznych aplikacji, pod warunkiem, że te zewnętrzne aplikacje nie są wymagane do przeglądania strony.

Nie rozumiem, dlaczego ten artykuł cytuje część specyfikacji mówiącą, że atrybuty data-* są specyficzne dla witryny, a następnie wyświetla ostrzeżenie promujące przestrzeń nazw. Jeśli postępujesz zgodnie ze specyfikacją, tworzysz wszystko nazw atrybutów, więc nie ma powodu dla przestrzeni nazw. To dokładnie czemu to jest w specyfikacji.

@Scott – przestrzeń nazw nie ma na celu tworzenia atrybutów danych „specyficznych dla witryny”, ale przestrzeń nazw w aplikacji.

Na przykład (a specyfikacja IIRC o tym wspomina) kontrolki widgetu (takie jak widok drzewa) mogą mieć atrybuty danych, ale atrybuty danych mogły zostać utworzone przy użyciu określonej biblioteki, takiej jak jQuery lub Dojo – aby uniknąć kolizji atrybutów danych, moduł aplikacji może chcieć umieścić go w przestrzeni nazw.

Nie widzę, gdzie Chris odniósł się do atrybutu danych związanego z witryną (ale jest już późno i mogłem to przeoczyć).

Jest wiele przypadków, w których nie chcesz lub nie musisz używać przestrzeni nazw, ale w niektórych przypadkach ma to sens. Ale ponieważ opiera się to tylko na istniejących regułach atrybutów treści – możesz swobodnie decydować, w jaki sposób z nich korzystasz.

Korzystam z data-* z getAttribute i setAttribute odkąd widziałem post o tym 2 lata temu autorstwa Jona Resiga, więc mogę potwierdzić, że ten sposób użycia działa na wszystkich przeglądarkach/platformach, począwszy od IE6.
Mam tylko nadzieję, że jakakolwiek przeglądarka implementująca data-* natywnie nie zepsuje metody getAttribute (nie powinno, ale nigdy nie wiadomo)

Z punktu widzenia wydajności, dostęp do DOM poprzez getAttribute() jest oczywiście wolniejszy niż dostęp do zmiennej JS, zdarzenia przechowywanego w tablicy, więc przypadek użycia, który podajesz gry JS używającej go do przechowywania wartości prawdopodobnie nigdy nie będzie się dzieje: programiści będą używać go do przesyłania informacji z serwera do klienta, ale po zebraniu DOM najlepiej zachować wszystkie wartości w JS, aby uzyskać szybszy dostęp

@jpvincent – Tak, całkowicie się z tobą zgadzam.

Sądzę, że początkowe dane o stanie zdrowia i amunicji mogą być przechowywane w bazie danych, a użycie atrybutu danych byłoby prawidłowym mechanizmem przesyłania tych informacji do javascriptu gry. Ale po zakończeniu tego zadania inicjalizacji nie ma sensu kontynuować kosztownych aktualizacji DOM z najnowszymi statystykami zdrowia/amunicji.

Dzięki za komentarz.

Twój artykuł wspomina, że nie powinieneś używać data-* dla hooków CSS. Co by było, gdyby w JS użyto atrybutu data-*, ale chciałbyś również zastosować do niego style. Czy nie byłoby sensowne kierować atrybutem zamiast dodawać klasę drugorzędną.

Weźmy ten formularz na przykład:

data-field_type=”text” może być używany zarówno do walidacji, jak i stylizacji układu.

Całkiem fajna funkcja, chociaż żadna przeglądarka jeszcze jej nie obsługuje. Ten mały fragment kodu działa, aby dodać obsługę właściwości dataset do dowolnej przeglądarki, która obsługuje __defineGetter__. Napisałem to, zanim zdałem sobie sprawę, że połączyłeś kod, który robi prawie to samo. Z drugiej strony mój kod obsługuje faktyczne aktualizowanie wartości atrybutów, ale nie obsługuje dodawania nowych atrybutów.

Element.prototype.__defineGetter__('zbiór danych', funkcja()(
var zbiór danych = ();
for (var i=0, l=this.attributes.length; i varattr = this.attributes[i];
if (nazwa.atrybutu && nazwa.atrybutu.indexOf("data-") == 0) (
var el = this, name = new String(atr.name), key = name.substring(5).replace(/-()/ig, function (a, b) ( return b.toUpperCase(); ));
dataset.__defineGetter__(klucz, funkcja()(zwróć el.getAttribute(nazwa;));
dataset.__defineSetter__(klucz, funkcja(wartość)( el.setAttribute(nazwa, wartość; ));
}
}
zwróć zbiór danych;
});

Dane-* z pewnością się przydadzą, ale ten przykład marchewki nie jest dobrym przykładem. Można użyć danych w atrybutach data-*, a nie do wyświetlania treści. Jak mówisz: „W specyfikacji wyraźnie stwierdzono, że dane nie są przeznaczone do użytku publicznego”

Zamiast tego:

marchew

Treść należy zawrzeć w samym tekście HTML, a nie w atrybutach. W ten sposób Twoje dane są indeksowane w wyszukiwarkach, dostępne dla maszyn w czytelnym formacie itp. Jeśli mam gt i lt dobrze, byłoby to coś takiego:

marchew Rozstaw: 10cm. Czas siewu: od marca do czerwca

Uważam, że jeśli tworzysz klasy, które nigdy nie będą stylizowane, lub przechowujesz zmienne w ukrytych polach formularzy, które nigdy nie są odczytywane z serwera, są to dobre przypadki użycia atrybutu data.

Powinieneś jednak zadać sobie pytanie: „czy kiedykolwiek będę chciał zmienić styl tych informacji lub utworzyć na podstawie tych danych opinie użytkowników?”

Jeśli odpowiedź brzmi tak, to dane są złym podejściem.

Dziękujemy za wyjaśnienie atrybutów danych. Microsoft planuje włączyć atrybuty danych HTML do następnej wersji formularzy internetowych ASP.NET w swoich kontrolkach walidatora, a Twój artykuł bardzo mi pomógł, gdy próbowałem to wszystko ogarnąć… !

A co z właściwościami expando? Atrybuty danych wydają mi się haszem w przestrzeni nazw (z „data-”) właściwości expando, z dodatkową wygodą zestawu danych. Jak wypada porównanie poniższych?

roślina.setAttribute('dane-owoce','7');

roślina.owoc = 7;

Ogólnie rzecz biorąc, właśnie przechowuję dane związane z elementem w pamięci w hashu lub obiekcie, który można pobrać na podstawie identyfikatora elementu.

Znalazłem przypadek, w którym uważam, że użycie atrybutów data-* dla hooków CSS jest prawidłowe. Opinie są oczywiście mile widziane.

Mam tabelę danych HTML, którą można sortować, rosnąco i malejąco, za pomocą AJAX, klikając nagłówki kolumn. Zdecydowałem się użyć atrybutu data-sort-dir = „asc” w nagłówku kolumny, aby nie tylko powiedzieć wywołaniu AJAX, w którym kierunku sortować żądanie, ale także utworzyć strzałkę obok nagłówka kolumny wskazującą kierunek, w którym wskazuje strzałka .

A(
/* Pokaż rosnącą strzałkę */
}

a (
/* Pokaż strzałkę opadającą */
}

Po kliknięciu nagłówka kolumny atrybut data-sort-dir jest aktualizowany lub przesuwany, aby prawidłowo odzwierciedlać kierunek sortowania.

Zgadzam się również, że przykład marchewki był słabym przykładem, ponieważ przechowujesz dane do wyświetlenia użytkownikowi w innej metodzie, która została uznana za niezgodną ze specyfikacją. W takim przypadku opcja ukrytego elementu, którą David R podał w komentarzach lub użycie atrybutu title, prawdopodobnie byłaby lepsza.

@Andres - data-* służy wyłącznie do przechowywania danych, które mają być używane w ramach Twojej własnej strony internetowej. Ponieważ głównym celem ról ARIA jest przekazanie dodatkowej struktury strony przeglądarce/programowi do odczytu ekranu, nie byłby to odpowiedni moment na ich użycie. Trzymaj się roli = „główna”.

Często używam atrybutów danych w aplikacjach jQuery. Ten atrybut służy do przechowywania prywatnych danych aplikacji. Jeśli planujesz zrozumienie danych przez wyszukiwarki, możesz użyć mikrodanych, które są bardziej semantyczne.

Czy atrybuty danych byłyby odpowiednie do czegoś takiego jak przełączanie atrybutu src „” między wersją hi-res i lo-res (dla lepszego działania responsywnego projektu)? (Coś takiego)

Jaki jest najlepszy sposób przetestowania obsługi tego?

„Dzięki HTML5 mamy teraz możliwość osadzania niestandardowych atrybutów danych we wszystkich elementach HTML [!!11!!1!1!]”

Wow, jak właściwości expando są dostępne od IE4? Dzięki HTML5, jesteś najlepszy!

OK, zakładając, że „zestaw danych” zapewnia zbiór wartości w wielu elementach, to trochę przydatne (choć już trywialne przez jQuery).. ale ten artykuł pachnie amnezją funkcji.

z pewnością stylizacja na data-* ma sens w aplikacji internetowej bogatej w dane, a nie nadużywanie atrybutu class?

w pseudokodzie łączącym się z danymi jako interfejs użytkownika: usuń klasę X
dodaj klasę Y
jako informacja zwrotna i jako konsekwencja działania użytkownika

vs zmień dane-* na Y

nie to, że patrzenie na podstawowy DOM jest krytyczne dla użytkownika końcowego, ale wypełnianie klasy danymi niehierarchicznymi DLA ZE WZGLĘDU NA STYLIZACJA wydaje się bardziej błędne niż przechowywanie stylów do danych???

Czy w jakichś przeglądarkach zaimplementowano algorytm usuwania zestawu danych? Wykonanie `plant.dataset.leaves = null` w Chrome nie powoduje usunięcia atrybutu. Konwertuje go na tekst „null”. Czy to jest w specyfikacji? a po pobraniu za pomocą jquery
$('div').data('longnumber')
zwraca wartość wykładniczą (1,1111111111111112e+209)
Jaki będzie problem?
Czy jest na to jakieś rozwiązanie?

Czy istnieją jakieś wytyczne dotyczące używania RDFa w XHTML5?
Zgodnie z moim ograniczonym zrozumieniem DOCTYPE jest ignorowany w tych plikach, atrybut wersji jest przestarzały. używam w obrębie znacznika głowy.

Skoro mówimy o skrypcie, a tym samym o DOM
setAttribute został określony jako zdolny od DOM Core 1.0 do ustawiania atrybutów zdefiniowanych przez użytkownika i nie ma problemów z implementacją.

Jednak ci z nas, którzy skrypty dokumentów XML, w tym dokumenty htmlN.., zwykle używają odniesienia do obiektu do elementów i przechowują tam zmienne zdefiniowane przez użytkownika, ponieważ są one szybciej dostępne i zaspokajają wszelkie potrzeby związane ze skryptami:

var a=elobj['elementid'].user_defined_attribute;

var a=element.getAttribute(user_defined_attribute);

i może zaspokoić wszelkie potrzeby związane ze skryptami, które data-* lub jakakolwiek inna funkcja skryptów języka znaczników udaje wprowadzić lub dostarczyć.

Jestem profesjonalnym programistą i przechodzę teraz na html5 i budowanie aplikacji…

Jak dotąd tak dobrze, ale mam jeden mały problem, którego nie jestem w stanie rozwiązać.

Chcę po prostu:

przeczytaj zdalny plik tekstowy na moim serwerze
przeczytaj plik wierszami
sklep lokalny parami

okres… proste prawda? cóż, znalazłem około 20 różnych odpowiedzi online, żadna nie działa.

Gdzie mogę znaleźć PRAWDZIWĄ odpowiedź?

Jak twórcy gier robią, aby w parach przesyłać słownik słów, na przykład na urządzenie mobilne?

Zaczynam od HTML5 i prawda jest taka, że nie znałem tej etykiety. Najwyraźniej jest bardzo últil, studiować go dokładnie, aby wykorzystać go w moich następnych projektach.

Zauważyłem tego rodzaju pola, gdy mam do czynienia z projektami Rails, ale w tej chwili nie znalazłem czasu, aby to zbadać. Cieszę się, że to zrobiłem dzisiaj, dzięki za ten naprawdę pomocny artykuł.

Właściwości Expando i atrybuty „data-*” to nie to samo.

jeśli ktoś napisze:

Skąd walidatory/silniki mogą wiedzieć, że autor nie chciał pisać?

Dzięki atrybutom „data-*” można poznać intencję Autora.

Jeśli ktoś napisze:

Prawdopodobnie miał to na myśli.

W ten sposób Microsoft się mylił i nadal jest.
Trzeba przyznać, że właściwości expando były dobrym pomysłem (po stronie implementacji oznacza to wymaganie MNIEJSZEJ walidacji), ale nie tak dobre, jak wymaganie przedrostka „data-”.

Wyobraź sobie również, że w HTML6 divs mogą pobierać atrybut „src” do ładowania asynchronicznej zawartości. (Np. renderujesz coś złożonego, więc chcesz, aby użytkownik nie czekał przed pustą stroną)
Bez atrybutu „data-” nie można po prostu zmienić swojego doctype na „html6”, co utrudnia migrację.

Dzięki atrybutowi „data-*” masz pewność, że Twoja strona HTML nie zostanie zepsuta, ponieważ specyfikacja dodała nowy atrybut.

cześć, używam niestandardowego atrybutu danych do ładowania treści postów za pomocą JavaScript bez zapytania Ajax.

wczytaj zawartość

czy się mylę, jeśli umieszczę zawartość html w atrybucie danych? proszę mam te wątpliwości

czy to możliwe, że problem z SEO?

czy używanie/przechowywanie wartości danych w znacznikach html nie jest złym projektem?
więc jeśli rozważymy takie rzeczy jak zasada pojedynczej odpowiedzialności (nie jak wzorzec projektowy, ale jak mądrość), czy nie mylimy się z tym, do czego HTML jest przeznaczony???

czy istnieją jakieś wytyczne dotyczące używania RDFa w XHTML5?
Zgodnie z moim ograniczonym zrozumieniem DOCTYPE jest ignorowany w tych plikach, atrybut wersji jest przestarzały. Używam tagu w obrębie głowy.
Atrybut property jest używany przez licencję Creative Commons, którą umieszczam w stopce pliku.

Dawno temu, w czasach XHTML/HTML4, programiści mieli tylko kilka opcji, których mogli użyć do przechowywania dowolnych danych związanych z DOM. Mógłbyś wymyślać własne atrybuty, ale to było ryzykowne — Twój kod nie byłby prawidłowy, przeglądarki mogłyby ignorować Twoje dane, a to mogłoby powodować problemy, gdyby nazwa pasowała do standardowych atrybutów HTML.

Dlatego większość programistów trzymała się atrybutów class lub rel, ponieważ były one jedynym rozsądnym sposobem przechowywania dodatkowych ciągów. Załóżmy na przykład, że budujemy widżet do wyświetlania wiadomości, takich jak oś czasu na Twitterze. W idealnym przypadku JavaScript powinien być konfigurowalny bez konieczności przepisywania kodu, więc definiujemy identyfikator użytkownika w atrybucie class, tak jak poniżej:

Nasz kod JavaScript będzie szukał elementu z identyfikatorem msglist. Za pomocą skryptu poszukamy zajęć rozpoczynających się od użytkownik_, a „bob” w naszym przypadku będzie identyfikatorem użytkownika, a my wyświetlimy wszystkie posty tego użytkownika.

Załóżmy, że chcielibyśmy również ustawić maksymalną liczbę wiadomości i pominąć wiadomości starsze niż sześć miesięcy (180 dni):

Nasz atrybut klasa bardzo szybko się zaśmieca - łatwiej o pomyłkę, a parsowanie ciągów w JavaScript staje się coraz trudniejsze.

Atrybuty danych HTML5

Na szczęście HTML5 wprowadził możliwość używania niestandardowych atrybutów. Możesz użyć dowolnej nazwy pisanej małymi literami z prefiksem dane-, na przykład:

Niestandardowe atrybuty danych:

są to ciągi - w nich można przechowywać dowolne informacje, które mogą być reprezentowane lub zakodowane jako ciąg, np. JSON. Rzutowanie typu musi być wykonane za pomocą JavaScript
należy stosować w przypadkach, gdy nie ma odpowiednich elementów lub atrybutów HTML5
odnoszą się tylko do strony. W przeciwieństwie do mikroformatów powinny być ignorowane przez systemy zewnętrzne, takie jak wyszukiwarki i roboty.

Przykład przetwarzania JavaScript #1: getAttribute i setAttribute

Wszystkie przeglądarki umożliwiają pobieranie i zmianę atrybutów danych za pomocą metod getAttribute i setAttribute:

Var msglist = document.getElementById("msglist"); var show = msglist.getAttribute("rozmiar-listy-danych"); msglist.setAttribute("rozmiar-listy-danych", +pokaż+3);

To działa, ale powinno być używane tylko w celu zachowania zgodności ze starszymi przeglądarkami.

Przykład przetwarzania JavaScript #2: metoda jQuery data()

Od wersji jQuery 1.4.3 metoda data() obsługuje atrybuty danych HTML5. Nie musisz wyraźnie określać prefiksu dane- więc taki kod zadziała:

Var msglist = $("#msglist"); var show = msglist.data("rozmiar-listy"); msglist.data("rozmiar-listy", pokaż+3);

Ale bądź tak, pamiętaj, że jQuery próbuje przekonwertować wartości takich atrybutów na odpowiednie typy (boolean, liczby, obiekty, tablice lub null) i wpłynie na DOM. w odróżnieniu setAtrybut, metoda dane() nie zastąpi fizycznie atrybutu rozmiar-listy-danych- jeśli sprawdzisz jego wartość poza jQuery - nadal będzie 5.

Przykład 3 przetwarzania JavaScript: API do pracy z zestawami danych

I wreszcie mamy interfejs API zestawu danych HTML5, który zwraca obiekt DOMStringMap. Należy pamiętać, że atrybuty danych są mapowane na obiekt bez prefiksów dane-, myślniki są usuwane z imion, a same nazwy są konwertowane na camelCase, na przykład:

Nazwa atrybutu	Nazwa w API zbioru danych
użytkownik danych	użytkownik
data-maxage	maxage
rozmiar-listy-danych	listaRozmiar

Nasz nowy kod:

Var msglist = document.getElementById("msglist"); var show = msglist.dataset.listSize; msglist.dataset.listSize = +pokaż+3;

Ten interfejs API jest obsługiwany przez wszystkie nowoczesne przeglądarki, ale nie przez IE10 i starsze. Istnieje obejście dla takich przeglądarek, ale prawdopodobnie bardziej praktyczne jest użycie jQuery, jeśli piszesz dla starszych przeglądarek.

Vlad Merzhevich

W HTML 4 brakowało możliwości tworzenia własnych atrybutów do przechowywania wartości. Dlaczego jest to konieczne? Oto kilka zadań, w których może to być potrzebne.

Twórz podpowiedzi bez używania skryptów.
Określanie stylu elementu na podstawie wartości atrybutu.
Pozyskiwanie i zmiana wartości poprzez skrypty.

HTML5 ma nowy atrybut ogólny, który można dodać do dowolnego tagu. Zasady pisania atrybutu są proste:

zawsze zaczynaj od danych-;
używamy tylko liter łacińskich, łącznika (-), dwukropka (:) i podkreślenia (_).

CSS i JavaScript obsługują te atrybuty trochę inaczej, więc spójrzmy na ich przykłady osobno.

css

W CSS występują atrybuty tagów, jeśli jest jakiś atrybut lub dana wartość, ustawiamy odpowiedni styl.

Zawartość

Teraz możemy odnieść się do tego elementu jako div w stylach i ustawić dla niego pożądany wygląd. Ogólnie rzecz biorąc, jest to podobne do działania klas, więc nie jest to jakaś unikalna lub niezbędna funkcja. Dlatego bardziej przydatne jest ustawianie wartości.

Zawartość

W CSS po tym możemy ustawić inny styl dla różnych wartości naszego atrybutu data-columns.

div (szerokość: 480px; ) div (szerokość: 720px; )

Znowu jest to w pewnym stopniu zamiennik dla klas, ponieważ nic nie stoi na przeszkodzie, aby tworzyć klasy o nazwach column-2, column-3 i dodawać je w razie potrzeby.

Bardziej eleganckim przypadkiem użycia jest włączenie funkcji attr(). Pobiera wartość danego atrybutu i wstawia ją do stylu. Jest to przydatne przy tworzeniu podpowiedzi. Piszemy tekst bezpośrednio w elemencie oraz implementujemy wyświetlanie i projekt podpowiedzi za pomocą CSS.

Etykietka

Temperatura wody

W tym przykładzie element dodawany jest atrybut opis danych zawierający wymagany tekst do wyjścia. Samo wyświetlenie odbywa się za pomocą pseudoelementu ::after oraz właściwości content, której wartością jest funkcja attr().

JavaScript

Jeśli w CSS odwołujemy się bezpośrednio do nazwy atrybutu, określając ją w całości, to w JavaScript odbywa się to za pomocą metody dataset. Sama nazwa atrybutu jest konwertowana na zmienną zgodnie z następującymi regułami:

dane odrzucone;
każdy myślnik przed literą jest odrzucany, a następująca po nim litera jest pisana wielkimi literami.

W praktyce wygląda to tak.

opis-danych staje się opisem.
pełny opis danych staje się pełnym opisem.
data-opis-tagu staje się descriptionOfTag.

Tradycyjnym sposobem uzyskania dostępu do elementu i jego atrybutów jest podanie identyfikatora i dostęp do elementu poprzez getElementById , jak pokazano w poniższym przykładzie.

zbiór danych

Użytkownik

Najpierw dodajemy do elementu identyfikator o unikalnej wartości. Następnie uzyskujemy dostęp do elementu poprzez getElementById . Teraz możemy uzyskać dostęp do dowolnych atrybutów danych za pomocą metody dataset i nie tylko pobierać, ale także ustawiać wartości. Będą one przechowywane do momentu ponownego załadowania strony lub ustawienia nowej wartości.

Pozwól nam przechowywać dodatkowe informacje w standardowych, semantycznych elementach HTML bez innych hacków, takich jak niestandardowe atrybuty, dodatkowe właściwości w DOM lub Node.setUserData() .

Składnia HTML

Składnia jest prosta. Każdy atrybut w dowolnym elemencie, którego nazwa zaczyna się od data- jest atrybutem danych. Załóżmy, że masz artykuł i chcesz przechowywać dodatkowe informacje, które nie mają żadnej reprezentacji wizualnej. Po prostu użyj do tego atrybutów danych:

...

Dostęp do JavaScript

Aby uzyskać atrybut danych przez obiekt dataset, pobierz właściwość według części nazwy atrybutu po data- (zauważ, że myślniki są konwertowane na camelCase).

Const article = document.querySelector("#samochody-elektryczne"); article.dataset.columns // „3” article.dataset.indexNumber // „12314” article.dataset.parent // „samochody”

Każda właściwość jest ciągiem i może być odczytywana i zapisywana. W powyższym przypadku ustawienie article.dataset.columns = 5 zmieniłoby ten atrybut na „5” .

Dostęp do CSS

Pamiętaj, że ponieważ atrybuty danych są zwykłymi atrybutami HTML, możesz nawet uzyskać do nich dostęp z CSS . Na przykład, aby pokazać dane nadrzędne artykułu, możesz użyć wygenerowanej treści w CSS za pomocą funkcji attr():

Artykuł::before ( content: attr(data-parent); )

Atrybuty danych mogą być również przechowywane w celu przechowywania informacji, które stale się zmieniają, na przykład wyniki w grze. Korzystając z selektorów CSS i dostępu JavaScript tutaj, możesz zbudować kilka fajnych efektów bez konieczności pisania własnych procedur wyświetlania. Widzieć ten screencast na przykład za pomocą wygenerowanej treści i przejść CSS (przykład JSBin).

Wartości danych są ciągami. Wartości liczbowe muszą być podane w selektorze, aby stylizacja zaczęła obowiązywać.

Zagadnienia

Nie przechowuj treści, które powinny być widoczne i dostępne w atrybutach danych, ponieważ technologie wspomagające mogą nie mieć do nich dostępu. Ponadto przeszukiwacze wyszukiwania nie mogą indeksować wartości atrybutów danych”.

Główne kwestie do rozważenia to obsługa i wydajność przeglądarki Internet Explorer. Internet Explorer 11+ zapewnia obsługę standardu, ale wszystkie wcześniejsze wersje nie obsługują zestawu danych . Aby obsługiwać IE 10 i niższe, musisz uzyskać dostęp do atrybutów danych za pomocą metody getAttribute(). Ponadto wydajność odczytu atrybutów danych w porównaniu z przechowywaniem tych danych w zwykłym obiekcie JS jest słaba.

Umożliwia tworzenie własnych atrybutów do przechowywania dowolnych informacji. Dane można pobrać za pomocą skryptów lub funkcji stylu attr().

Nazwa atrybutu musi koniecznie zaczynać się od data-, wtedy możesz użyć małych liter łacińskich, cyfr i następujących znaków: łącznik (-), dwukropek (:), podkreślenie (_).

Nazwy atrybutów są przekształcane w zmienne, do których można później uzyskać dostęp i uzyskać wartości, zgodnie z następującymi regułami:

dane- są usuwane;
każdy myślnik przed usunięciem litery, a litera po nim jest pisana wielkimi literami;
wszelkie inne litery pozostają bez zmian.

Na przykład atrybut data-data-urodzenia jest konwertowany na zmienną dateOfBirth.

Aby uzyskać dostęp do atrybutów i uzyskać ich wartości za pomocą skryptów, używana jest metoda dataset. Służy również do ustawiania nowej wartości.

oznaczający = element.zbiór danych. atrybut element.zbiór danych. atrybut = oznaczający

Tutaj nazwa atrybutu jest zmienną uzyskaną poprzez zmianę atrybutu zgodnie z powyższymi zasadami (data-urodzenia, a nie data-data-urodzenia lub data-urodzenia).

Przykład

dane-*