O método que verifica se um atributo existe é o Element.hasAttribute()
.
No entanto se deseja trabalhar com atributos data-*
você deve usar preferencialmente (pois é mais fácil de trabalhar) a propriedade HTMLElement.dataset
(somente leitura) que retorna um DOMStringMap
com os valores dos seus atributos, por exemplo:
const el = document.getElementById('teste');
console.log('Mapeando', el.dataset);
console.log('validationMessage (invalido)', el.dataset.validationMessage);
console.log('validationmessage (valido)', el.dataset.validationmessage);
console.log('track', el.dataset.track);
console.log('ignore', el.dataset.ignore);
console.log('index', el.dataset.index);
console.log('foo', el.dataset.foo);
console.log('bar', el.dataset.bar);
console.log('baz (não existe)', el.dataset.baz);
<input type="text" id="teste"
data-validationMessage="Esse campo é obrigatório"
data-track="true"
data-ignore="false"
data-index="1"
data-foo="null"
data-bar=""
/>
Note que todos valores retornados são do tipo string
e que todas propriedades foram tratadas como lowercase, isso ocorre porque os valores camelCase são "reservados" para o uso do hífen nos atributos, por exemplo:
const el = document.getElementById('teste');
console.log('Mapeando', el.dataset);
console.log('validationMessage', el.dataset.validationMessage);
<input type="text" id="teste"
data-validation-message="Esse campo é obrigatório"
/>
Também é importante entender que para o HTML e para as funções hasAttribute
ou getAttribute
é irrelevante você escrever os atributos em camelCase, pois sempre serão tratados como case-insensitive:
const el = document.getElementById('teste');
console.log('data-validationMessage', el.hasAttribute("data-validationMessage"));
console.log('DATA-VALIDATIONMESSAGE', el.hasAttribute("DATA-VALIDATIONMESSAGE"));
console.log('DATA-VALIDATIONMESSAGE', el.getAttribute("DATA-VALIDATIONMESSAGE"));
<input type="text" id="teste"
data-validationMessage="Esse campo é obrigatório"
/>
Já com HTMLElement.dataset
existe a padronização, que faz a conversão dos nomes, aonde os atributos dash-style
serão convertidos para chaves em camelCase
no DOMStringMap
, seguindo:
- Letras minúsculas serão todos os ASCII
- Letras maiúsculas de A a Z
- Removerá os prefixos
data-*
(incluindo os traços)
- Qualquer traço (
U+002D
) seguido por uma letra (ASCII) de a a z, irá remover o traço e irá colocar a letra seguida em maiúsculo
- Outros caracteres (incluindo outros traços) permanecerão inalterados
Como pode ver:
const el = document.getElementById('teste');
console.log('Mapeando', el.dataset);
<input type="text" id="teste"
data-afoo-ebar-obaz="'a' a 'z' se tornarão camelCase"
data-áfoo-ébar-óbaz="Caracteres diferentes de 'a' a 'z' não mudarão"
data-Áfoo-Ébar-Óbaz="Caracteres diferentes de 'a' a 'z' não mudarão"
data-&foo-%bar-*baz----="outros caracteres ASCII"
/>