diff options
Diffstat (limited to 'files/pt-br/web/api/htmlelement/dataset/index.html')
| -rw-r--r-- | files/pt-br/web/api/htmlelement/dataset/index.html | 97 |
1 files changed, 97 insertions, 0 deletions
diff --git a/files/pt-br/web/api/htmlelement/dataset/index.html b/files/pt-br/web/api/htmlelement/dataset/index.html new file mode 100644 index 0000000000..2cb4ba63b0 --- /dev/null +++ b/files/pt-br/web/api/htmlelement/dataset/index.html @@ -0,0 +1,97 @@ +--- +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"><div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe +</div> + +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> |