---
title: HTMLElement.dataset
slug: Web/API/HTMLElement/dataset
translation_of: Web/API/HTMLOrForeignElement/dataset
---
<p>{{ APIRef }}</p>

<p>A propriedade <code><strong>HTMLElement.dataset</strong></code> permite o acesso, em modo de leitura e escrita, a todos os <a href="/en/HTML/Global_attributes#attr-data-*" title="https://developer.mozilla.org/en/HTML/Global_attributes#attr-data-*">atributos de dados personalizado</a> (<em>data-*</em>) no elemento. Ele é um mapa de <a href="/en/DOM/DOMStringMap" title="en/DOM/DOMStringMap">DOMString</a>, com uma entrada para cada atributo de dados personalizado.</p>

<p>O nome de um atributo de dados customizado inicia com <code>data-</code>. Ele deve conter somente letras, números e os seguintes caracteres: dash (<code>-</code>), dot (<code>.</code>), collon(<code>:</code>), underscore (<code>_</code>). Além disso, ele não deve conter letras ASCII captalizadas (<code>A</code> à <code>Z</code>).</p>

<p>Um atributo de dados personalizado é transformado em uma chave para uma entrada no {{ domxref("DOMStringMap") }} de acordo com as seguintes regras</p>

<ul>
 <li>O prefixo <code>data-</code> é removido (incluindo o dash);</li>
 <li>Para qualquer dash (<code>U+002D</code>) seguido por uma ASCII letra minúscula (<code>a</code><span style="line-height: 1.5;"> à </span><code>z</code>)<span style="line-height: 1.5;">, o dash é removido e a letra que segue é tranformada em maíscula;</span></li>
 <li>outros caracteres (incluindo outros dash) são deixados inalterados.</li>
</ul>

<p>A transformação oposta, que mapeia uma chave para um nome de atributo, usa as seguintes regras:</p>

<ul>
 <li>Restrição: um dash pode não ser imediatamente seguido de uma letra ASCII minúscula (<code>a</code> à <code>z</code>)(antes da transformação);</li>
 <li>Um prefixo <code>data-</code> é adicionado;</li>
 <li>Qualquer caractere ASCII maiúsculo (<code>A</code> à <code>Z</code>) é transformado em um dash seguido pela sua forma mínúscula;</li>
 <li>outros caracteres são deixados inalterados.</li>
</ul>

<p>A restrição nas regras acima garantem que as duas trasnformações são inversa uma da outra.</p>

<p>Por exemplo, o atributo <code>data-abc-def</code> corresponde a chave <code>abcDef</code>.</p>

<h2 id="Sintaxe">Sintaxe</h2>

<pre class="syntaxbox"><em>string</em> = <em>element</em>.dataset.<em>camelCasedName</em>;
<em>element.</em>dataset.<em>camelCasedName</em> = <em>string</em>;</pre>

<h2 id="Exemplos">Exemplos</h2>

<pre class="brush: js">&lt;div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth&gt;John Doe
&lt;/div&gt;

var el = document.querySelector('#user');

// el.id == 'user'
// el.dataset.id === '1234567890'
// el.dataset.user === 'johndoe'
// el.dataset.dateOfBirth === ''

el.dataset.dateOfBirth = '1960-10-03'; // set the DOB.

// 'someDataAttr' in el.dataset === false

el.dataset.someDataAttr = 'mydata';
// 'someDataAttr' in el.dataset === true
</pre>

<h2 id="Especificações">Especificações</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Espeficicação</th>
   <th scope="col">Status</th>
   <th scope="col">Comentário</th>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>Sem mudanças desde o último  snapshot, {{SpecName('HTML5.1')}}</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5.1', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td>
   <td>{{Spec2('HTML5.1')}}</td>
   <td>Snapshot de {{SpecName('HTML WHATWG')}}, sem mudanças desde {{SpecName('HTML5 W3C')}}</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>Snapshot de {{SpecName('HTML WHATWG')}}, definição inicial.</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidade_com_Browsers">Compatibilidade com Browsers</h2>

<div class="hidden">
<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p>
</div>

<p>{{Compat("api.HTMLElement.dataset")}}</p>

<h2 id="Veja_também">Veja também</h2>

<ul>
 <li>A classe HTML <a href="/en-US/docs/Web/HTML/Global_attributes/data-*"><strong>data-*</strong></a> de atributos globais.</li>
</ul>