DOM
Manipulowanie atrybutami
Szukaj…
Uwagi
Atrybuty to określony typ obiektu w interfejsie API DOM. We wcześniejszych wersjach DOM API dziedziczyły po typie Node , ale zostało to zmienione w wersji 4.
W przykładach odnoszących się do dataset „nowoczesne przeglądarki” wyraźnie wykluczają wersje przeglądarki Internet Explorer mniejszej niż 11. Więcej informacji można znaleźć na stronie caniuse.com .
Uzyskiwanie atrybutu
Niektóre atrybuty są bezpośrednio dostępne jako właściwości elementu (np. alt , href , id , title i value ).
var a = document.querySelector("a"),
url = a.href;
Dostęp do innych atrybutów, w tym atrybutów danych, można uzyskać w następujący sposób:
var a = document.querySelector("a"),
tooltip = a.getAttribute("aria-label");
Dostęp do atrybutów danych można również uzyskać za pomocą dataset (nowoczesne przeglądarki)
// <a href="#" data-tracking-number="ABC-123">Widget</a>
var a = document.querySelector("a"),
tracker = a.dataset.trackingNumber;
Ustawienie atrybutu
Niektóre atrybuty są bezpośrednio dostępne jako właściwości elementu (np. Alt, href, id, tytuł i wartość).
document.querySelector("a").href = "#top";
Inne atrybuty, w tym atrybuty danych, można ustawić w następujący sposób:
document.querySelector("a").setAttribute("aria-label", "I like turtles");
Atrybuty danych można również ustawić za pomocą zestawu danych (nowoczesne przeglądarki)
var a = document.querySelector("a");
a.dataset.test = "123";
a.dataset['test-2'] = "456";
prowadzi do
<a href="#" data-test="123" data-test-2="456">Widget</a>
Usuwanie atrybutu
Aby usunąć atrybut, w tym bezpośrednio dostępne właściwości
document.querySelector("a").removeAttribute("title");
Atrybuty danych można również usunąć w następujący sposób (nowoczesne przeglądarki):
// remove "data-foo" attribute
delete document.querySelector("a").dataset.foo;
