diff options
Diffstat (limited to 'files/pt-br/web/api/element')
32 files changed, 4795 insertions, 0 deletions
diff --git a/files/pt-br/web/api/element/accesskey/index.html b/files/pt-br/web/api/element/accesskey/index.html new file mode 100644 index 0000000000..b05fb5e2b3 --- /dev/null +++ b/files/pt-br/web/api/element/accesskey/index.html @@ -0,0 +1,18 @@ +--- +title: Element.accessKey +slug: Web/API/Element/accessKey +translation_of: Web/API/HTMLElement/accessKey +--- +<div>{{APIRef("DOM")}}</div> + +<div> </div> + +<p>A propriedade <font face="Consolas, Monaco, Andale Mono, monospace"><strong>Element.accessKey</strong></font> define a tecla pelo qual o usuário pode pressionar para saltar para este elemento.</p> + +<div class="note"> +<p>Nota: <em>A propriedade <strong>Element.accessKey </strong>é<strong> </strong>raramente usada por causa dos conflitos múltiplos com os atalhos pré-definidos nos navegadores. Para contornar isto, os navegadores implementam o comportamento da tecla de acesso se as teclas são pressionadas com outras teclas "qualificadas" (como Alt + tecla de acesso).</em></p> +</div> + +<p> </p> + +<p> </p> diff --git a/files/pt-br/web/api/element/addeventlistener/index.html b/files/pt-br/web/api/element/addeventlistener/index.html new file mode 100644 index 0000000000..fea1e67e7b --- /dev/null +++ b/files/pt-br/web/api/element/addeventlistener/index.html @@ -0,0 +1,322 @@ +--- +title: Element.addEventListener() +slug: Web/API/Element/addEventListener +translation_of: Web/API/EventTarget/addEventListener +--- +<p>{{apiref("DOM Events")}}</p> + +<p><code>addEventListener()</code> registra uma única espera de evento em um único alvo. O <a href="/pt-BR/docs/DOM/EventTarget" title="DOM/EventTarget">alvo do evento</a> pode ser um único <a href="/pt-BR/docs/DOM/element" title="DOM/element">elemento</a> em um documento, o <code><a href="/pt-BR/docs/DOM/document" title="DOM/document">documento</a></code> em si, uma <code><a href="/pt-BR/docs/DOM/window" title="DOM/window">janela</a></code>, ou um <code><a href="/pt-BR/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code>.</p> + +<p>Para registrar mais de uma espera de evento como alvo, chame <code>addEventListener()</code> para o mesmo alvo mas com diferentes tipos de evento ou captura de parâmetros.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox"><code><em>alvo</em>.addEventListener(<em>type</em>,<em>listener</em>[, <em>options</em>]); +<em>alvo</em>.addEventListener(<em>type</em>,<em>listener</em>[, <em>useCapture</em>, <em>wantUntrusted </em>{{ Non-standard_inline() }}]); // Gecko/Mozilla only</code></pre> + +<dl> + <dt><code>type</code></dt> + <dd>Uma linha de texto que representa o <a class="internal" href="/pt-BR/docs/DOM/event.type" title="DOM/Event.type">tipo de evento</a> a ser esperado.</dd> + <dt>listener</dt> + <dd>O objeto que recebe uma notificação quando um evento do tipo especificado ocorre. Esse objeto precisa implementar a interface do <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventListener"><code>EventListener</code></a>, ou simplesmente executar uma <a href="/pt-BR/docs/JavaScript/Guide/Functions" title="JavaScript/Guide/Functions">função</a> JavaScript.</dd> + <dt><code>useCapture</code> {{ optional_inline() }}</dt> + <dd>Se <code>true</code>, <code>useCapture</code> indica que o usuário deseja iniciar uma captura. Depois de iniciada a captura, todos os eventos do tipo especificado serão enviados à <code>listener</code> registrada antes de serem enviados à qualquer <code>EventTarget</code> abaixo dela na hierarquia de DOMs. Eventos que borbulharem para cima na hierarquia não acionarão a escuta designada a usar a captura. Veja <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow" title="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow">Eventos DOM Nível 3</a> para uma explicação detalhada. Perceba que esse parâmetro não é opcional em todos os navegadores. Se não for especificado, <code>useCapture</code> é <code>false</code>.</dd> + <dt><code>wantsUntrusted</code> {{ Non-standard_inline() }}</dt> + <dd>Se <code>true</code>, o evento pode ser acionado por conteúdo não-confiável. Veja <a href="/pt-BR/docs/Code_snippets/Interaction_between_privileged_and_non-privileged_pages" title="Code snippets/Interaction between privileged and non-privileged pages">Interação entre páginas com e sem privilégios</a>.</dd> +</dl> + +<div class="note"><strong>Nota:</strong> <code>useCapture</code> tornou-se opcional somente nas versões mais recentes dos principais navegadores; não era opcional antes do Firefox 6, por exemplo. Você deve especificar esse parâmetro para obter uma maior compatibilidade.</div> + + +<h2 id="Exemplo">Exemplo</h2> + +<pre class="brush: html"><!DOCTYPE html> +<html> +<head> +<title>Exemplo de Evento DOM</title> + +<style> +#t { border: 1px solid red } +#t1 { background-color: pink; } +</style> + +<script> +// Função para mudar o conteúdo de t2 +function modifyText() { + var t2 = document.getElementById("t2"); + t2.firstChild.nodeValue = "three"; +} + +// Função para adicionar uma espera de evento em t +function load() { + var el = document.getElementById("t"); + el.addEventListener("click", modifyText, false); +} + +document.addEventListener("DOMContentLoaded", load, false); +</script> + +</head> +<body> + +<table id="t"> + <tr><td id="t1">one</td></tr> + <tr><td id="t2">two</td></tr> +</table> + +</body> +</html> +</pre> + +<p><a href="https://jsfiddle.net/madBYK/UumUP">View on JSFiddle</a></p> + +<p>No exemplo acima, <code>modifyText()</code> é uma escuta para eventos de <code>click</code> registrados usando <code>addEventListener()</code>. Um clique em qualquer lugar da tabela irá borbulhar para cima até o manipulador e executar <code>modifyText()</code>.</p> + +<p>Se você deseja passar parâmetros para a função de escuta, você deve usar uma função anônima.</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> +<head> +<title>Exemplo de Evento DOM</title> + +<style> +#t { border: 1px solid red } +#t1 { background-color: pink; } +</style> + +<script> + +// Função para mudar o conteúdo de t2 +function modifyText(new_text) { + var t2 = document.getElementById("t2"); + t2.firstChild.nodeValue = new_text; +} + +// Função para adicionar uma espera de evento em t +function load() { + var el = document.getElementById("t"); + el.addEventListener("click", function(){modifyText("four")}, false); +} +</script> + +</head> +<body onload="load();"> + +<table id="t"> + <tr><td id="t1">one</td></tr> + <tr><td id="t2">two</td></tr> +</table> + +</body> +</html> +</pre> + +<h2 id="Notas">Notas</h2> + +<h3 id="Por_que_usar_addEventListener">Por que usar <code>addEventListener</code>?</h3> + +<p><code>addEventListener</code> é a maneira de registrar uma espera de evento como especificada no W3C DOM. Seus benefícios são os seguintes:</p> + +<ul> + <li>Permite mais de um manipulador por evento. Isso é particularmente útil em bibliotecas <a href="/pt-BR/docs/DHTML" style="line-height: normal;" title="DHTML">DHTML</a> ou em <a href="/pt-BR/docs/Extensions" style="line-height: normal;" title="Extensions">extensões Mozilla</a> que precisam trabalhar bem mesmo com outras bibliotecas/extensões sendo usadas.</li> + <li>Te dá um pente-fino do estágio em que a espera de evento é ativada (captura ou borbulha).</li> + <li>Funciona em qualquer elemento DOM, não só para elementos HTML.</li> +</ul> + +<p>Existe outra alternativa, <a href="#Older_way_to_register_event_listeners">uma maneira ultrapassada de registrar esperas de evento</a>.</p> + +<h3 id="Adicionando_uma_espera_de_evento_durante_um_disparo_de_evento"><strong>Adicionando uma espera de evento durante um disparo de evento</strong></h3> + +<p>Se um EventListener for somado a um EventTarget enquanto está processando um evento, ele não será ativado pelas ações atuais, mas poderá ser ativado em um período posterior no fluxo de eventos, como na fase de borbulha.</p> + +<h3 id="Múltiplas_esperas_de_evento_idênticas"><strong>Múltiplas esperas de evento idênticas</strong></h3> + +<p>Se múltiplas esperas de evento idênticas forem registradas no mesmo EventTarget com os mesmos parâmetros, as versões duplicadas serão descartadas. Elas não fazem o EventListener ser disparado mais de uma vez, e, como as duplicatas são descartadas, elas não precisam ser removidas manualmente com o método <a href="https://developer.mozilla.org/pt-BR/docs/DOM/element.removeEventListener" title="DOM/element.removeEventListener">removeEventListener</a>.</p> + +<h3 id="O_valor_de_this_no_manipulador"><strong>O valor de </strong><strong>this</strong><strong> no manipulador</strong></h3> + +<p>É preferível referenciar o elemento do qual a espera de evento foi disparada, como quando é usado um manipulador genérico para uma série de elementos similares. Quando anexar uma função usando addEventListener(), o valor de this é mudado — perceba que o valor de this é passado para uma função a partir do disparador.</p> + +<p>Nos exemplos acima, o valor de this em modifyText(), quando disparado pelo evento de clique, é uma referência à tabela 't'. Isso é um contraste do comportamento que acontece se o manipulador é adicionado ao HTML fonte:</p> + +<pre class="brush: html"><table id="t" onclick="modifyText();"> + . . .</pre> + +<p>O valor de this em modifyText(), quando disparado pelo evento de clique no HTML, será uma referência ao objeto global (no caso, a janela).</p> + +<div class="note"><strong>Nota:</strong> JavaScript 1.8.5 introduz o método <code><a href="/pt-BR/docs/JavaScript/Reference/Global_Objects/Function/bind" title="JavaScript/Reference/Global Objects/Function/bind">Function.prototype.bind()</a></code>, que permite especificar o valor que deve ser usado como <code>this</code> para todas as chamadas à uma determinada função. Isso evita problemas quando não é claro o que <code>this</code> será, dependendo do contexto do qual a sua função for chamada. Perceba, entretanto, que é preciso manter uma referência da escuta à mão, para que depois você possa removê-la.</div> + +<p>Este é um exemplo com e sem <code>bind</code>:</p> + +<pre class="brush: js">var Algo = function(elemento) +{ + this.nome = 'Algo bom'; + this.onclick1 = function(evento) { + console.log(this.nome); // indefinido, porque this é a função de escuta do clique + }; + this.onclick2 = function(evento) { + console.log(this.nome); // 'Algo bom', porque this está como objeto Algo através do bind + }; + elemento.addEventListener('click', this.onclick1, false); + elemento.addEventListener('click', this.onclick2.bind(this), false); // Truque de bind +} +</pre> + +<p>Outra solução é usar uma função especial chamada <code>handleEvent</code> para capturar quaisquer eventos:</p> + +<pre class="brush: js">var Algo = function(elemento) +{ + this.nome = 'Algo bom'; + this.handleEvent = function(evento) { + console.log(this.nome); // 'Algo bom', porque this é o objeto Algo + switch(evento.type) { + case 'click': + // seu codigo aqui... + break; + case 'dblclick': + // seu codigo aqui... + break; + } + }; + elemento.addEventListener('click', this, false); // Não this.handleEvent, só this + elemento.addEventListener('dblclick', this, false); // Não this.handleEvent, só this +} +</pre> + +<h3 id="Internet_Explorer_antigos_e_attachEvent">Internet Explorer antigos e attachEvent</h3> + +<p>Em versões do Internet Explorer anteriores ao IE9, você precisa usar <code><a class="external" href="http://msdn.microsoft.com/pt-BR/library/ms536343(VS.85).aspx">attachEvent</a></code> em vez do padrão <code>addEventListener</code>. Para dar suporte ao IE, o exemplo acima pode ser modificado para:</p> + +<pre class="brush: js">if (el.addEventListener) { + el.addEventListener('click', modifyText, false); +} else if (el.attachEvent) { + el.attachEvent('onclick', modifyText); +} +</pre> + +<p>Existe um porém com <code>attachEvent:</code> o valor de <code>this</code> será a referência ao objeto <code>window</code> em vez do elemento do qual foi disparado.</p> + +<h3 id="Uma_maneira_ultrapassada_de_registrar_esperas_de_evento">Uma maneira ultrapassada de registrar esperas de evento</h3> + +<p><code>addEventListener()</code> foi introduzido com as especificações de <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events">Eventos</a> DOM 2. Antes disso, esperas de evento eram registradas assim:</p> + +<pre class="brush: js">// Passe uma função de referência — não adicione '()' depois dela, o que chamaria a função! +el.onclick = modifyText; + +// Usando uma expressão de função +element.onclick = function() { + // ... lógica da função ... +}; +</pre> + +<p>Esse método substitui as esperar de evento de <code>click</code> no elemento, se houve alguma. Igualmente para outros outros eventos e manipuladores de evento associados, como <code>blur</code> (<code>onblur</code>), <code>keypress</code> (<code>onkeypress</code>), e assim por diante.</p> + +<p>Porque era essencialmente uma parte do DOM 0, esse método era largamente suportado e não necessitava de códigos entre-navegadores especiais; logo é normalmente usado para registrar esperas de evento dinâmicamente, a menos que atributos extras do <code>addEventListener()</code> sejam necessários.</p> + +<h3 id="Problemas_de_memória">Problemas de memória</h3> + +<pre class="brush: js">var i; +var els = document.getElementsByTagName('*'); + +// Caso 1 +for(i=0 ; i<els.length ; i++){ + els[i].addEventListener("click", function(e){/*fazer algo*/}, false}); +} + +// Caso 2 +function processarEvento(e){ + /*fazer algo*/ +} + +for(i=0 ; i<els.length ; i++){ + els[i].addEventListener("click", processarEvento, false}); +} + +</pre> + +<p>No primeiro caso, uma nova função (anônima) é criada em cada turno do loop. No segundo caso, a mesma função previamente declarada é usada como um manipulador de evento. Isso resulta em um consumo menor de memória. Além do mais, no primeiro caso, já que nenhuma referência à função anônima é mantida, não é possível chamar <code><a href="/pt-BR/docs/DOM/element.removeEventListener" title="DOM/element.removeEventListener">element.removeEventListener</a></code> porque não há uma referência ao manipulador, enquanto no segundo caso é possível fazer <code>myElement.removeEventListener("click", processEvent, false)</code>.</p> + +<h2 id="Compatiblidade_de_navegadores">Compatiblidade de navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>1.0</td> + <td>{{ CompatGeckoDesktop(1.0) }}</td> + <td>9.0</td> + <td>7</td> + <td>1.0</td> + </tr> + <tr> + <td><code>useCapture</code> é opcional</td> + <td>1.0</td> + <td>6.0</td> + <td>9.0</td> + <td>11.60</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>1.0</td> + <td>{{ CompatGeckoMobile(1.0) }}</td> + <td>9.0</td> + <td>6.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<h4 id="Notas_Gecko">Notas Gecko</h4> + +<ul> + <li>Antes do Firefox 6, o navegador daria um erro se o parâmetro <code>useCapture</code> não fosse especificado <code>false</code>. Antes do Gecko 9.0 {{ geckoRelease("9.0") }}, <code>addEventListener()</code> daria um erro se o parâmetro <code>escuta</code> fosse <code>null</code>; agora o método retorna sem erros, mas também sem fazer nada.</li> +</ul> + +<h4 id="Notas_Webkit">Notas Webkit</h4> + +<ul> + <li>Apesar do WebKit ter explicitamente adicionado <code>[optional]</code> ao parâmetro <code>useCapture </code><a class="external" href="http://trac.webkit.org/changeset/89781">como recentemente anunciado em Junho de 2011</a>, já funcionava antes do anúncio da mudança. Ela foi anunciada no Safari 5.1 e no Chrome 13.</li> +</ul> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/pt-BR/docs/DOM/element.removeEventListener" title="DOM/element.removeEventListener">elemento.removeEventListener()</a></li> + <li><a href="/pt-BR/docs/DOM/Creating_and_triggering_events" title="DOM/Creating_and_triggering_custom_events">Criando e disparando eventos customizáveis</a></li> + <li><a class="external" href="http://www.quirksmode.org/js/this.html" title="http://www.quirksmode.org/js/this.html">Mais detalhes no uso de <code>this</code> nos manipuladores de eventos</a></li> +</ul> + +<h2 id="Especificação">Especificação</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget-addEventListener" title="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget-addEventListener">Eventos DOM Nível 2: EventTarget.addEventListener</a></li> + <li><a class="external" href="http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html#events-EventTarget-addEventListener" title="http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html#events-EventTarget-addEventListener">Eventos DOM Nível 3: EventTarget.addEventListener</a></li> +</ul> diff --git a/files/pt-br/web/api/element/animate/index.html b/files/pt-br/web/api/element/animate/index.html new file mode 100644 index 0000000000..8c8d5e58c5 --- /dev/null +++ b/files/pt-br/web/api/element/animate/index.html @@ -0,0 +1,202 @@ +--- +title: Element.animate() +slug: Web/API/Element/animate +translation_of: Web/API/Element/animate +--- +<div>{{APIRef('Web Animations')}} {{SeeCompatTable}}</div> + +<p>Um {{domxref("Element")}} de interface do método <strong><code>animate()</code></strong> é um método de atalho o qual cria uma nova {{domxref("Animation")}}, e a aplica ao elemento, então executa a animação. Retorna a instância do objeto {{domxref("Animation")}} criado.</p> + +<div class="note"> +<p>Elementos podem ter múltiplas animações aplicadas a eles. Você pode obter uma lista de animações que afetam um elemento chamando {{domxref("Element.getAnimations()")}}.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <em>animation</em> = element.animate(<em>keyframes</em>, <em>options</em>); </pre> + +<h3 id="Paramêtros">Paramêtros</h3> + +<dl> + <dt><code>keyframes</code></dt> + <dd> + <p>An <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats">Object formatted to represent a set of keyframes</a>.</p> + </dd> + <dt><code>opções</code></dt> + <dd><code>Ou um inteiro representando a duração da animação (em milisegundos), ou um objeto contendo uma ou mais propriedades de tempo:</code></dd> + <dd><code>id {{optional_inline}}</code></dd> + <dd> + <dl> + <dd>Um propriedade única á animate(): uma <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String.">DOMString</a> com a qual a animação é referenciada.</code> </dd> + </dl> + {{Page("/en-US/docs/Web/API/Web_Animations_API/Animation_timing_properties", "Properties")}}</dd> +</dl> + +<h4 id="Opções_Futuras">Opções Futuras</h4> + +<p>As seguintes opções atualmente não são embarcadas em nenhum lugar, porém serão adicionadas num futuro próximo.</p> + +<dl> + <dt><code>composite {{optional_inline}}</code></dt> + <dd>Determina como os valores são combinados entre animações diferentes, separa animações que não especificam suas próprias operações de composição. Padrão para subtitituir. + <ul> + <li>Adiciona efeito de imposição e aditivação, onde cada iteração sucessiva é executada sobre a última. Por exemplo, com transform translateX(-200px) não sobreescreveria um valor anterior de rotate(20deg) mas resultaria em <code>translateX(-200px) rotate(20deg)</code>.</li> + <li>accumulate é similar porém um pouco mais inteligente: blur(2) e blur(5) se tornam blur(7), não blur(2) blur(5).</li> + <li>replace sobreescreve o valor anterior com um novo. </li> + </ul> + </dd> + <dt><code>iterationComposite {{optional_inline}}</code></dt> + <dd>Determines how values build from iteration to iteration in this animation. Can be set to <code>accumulate</code> or <code>replace</code> (see above). Defaults to <code>replace</code>.</dd> + <dt><code>spacing {{optional_inline}}</code></dt> + <dd>Determina como quadros-chaves sem deslocamento temporal devem ser distribuidos durante a duração da animação. Padrão para distribute. + <ul> + <li>distribuir quadro-chaves de posição de forma que a diferença de deslocamento entre quadros-chaves subsequentes seja igual, distribuirá igualmente os quadros-chaves no decorrer do tempo de execução.</li> + <li><code>paced</code> positions keyframes so that the distance between subsequent values of a specified paced property are equal, that is to say, keyframes are spaced further apart the greater the difference in their property values.</li> + </ul> + + <p><img alt="" src="https://w3c.github.io/web-animations/img/spacing-distribute.svg" style="height: 210px; width: 200px;"> <img alt=" " src="https://w3c.github.io/web-animations/img/spacing-paced.svg" style="height: 210px; width: 200px;"></p> + </dd> +</dl> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>Retorna uma {{domxref("Animation")}}.</p> + +<h2 id="Exemplo">Exemplo</h2> + +<p>Na demonstração <a href="https://codepen.io/rachelnabors/pen/rxpmJL/?editors=0010">Down the Rabbit Hole (with the Web Animation API)</a>, nós usamos o método conveniente animate() para imediamente criar e executar uma animação no elemento #tunnel para faze-lo fluir em direção superior, infinitamente.<br> + Note o array de quadros-chave passado e também o bloco de opções de temporização.</p> + +<pre class="brush: js">document.getElementById("tunnel").animate([ + // keyframes + { transform: 'translateY(0px)' }, + { transform: 'translateY(-300px)' } +], { + // timing options + duration: 1000, + iterations: Infinity +}); +</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Web Animations', '#the-animatable-interface', 'animate()' )}}</td> + <td>{{Spec2('Web Animations')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibildade_entre_Navegadores">Compatibildade entre Navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("36")}}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoDesktop("48.0")}}</td> + <td>{{CompatNo}}</td> + <td>23</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>id</code> option</td> + <td>{{CompatChrome(50.0)}}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoDesktop("48.0")}}</td> + <td>{{CompatNo}}</td> + <td>37</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>composite</code>, <code>iterationComposite</code>, and <code>spacing</code> options</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(39.0)}}</td> + <td>{{CompatChrome(39.0)}}</td> + <td>{{ CompatGeckoMobile("48.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>id</code> option</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(50.0)}}</td> + <td>{{CompatChrome(50.0)}}</td> + <td>{{ CompatGeckoMobile("48.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>composite</code>, <code>iterationComposite</code>, and <code>spacing</code> options</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_Também">Veja Também</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li> + <li>{{domxref("Element.getAnimations()")}}</li> + <li>{{domxref("Animation")}}</li> +</ul> diff --git a/files/pt-br/web/api/element/attributes/index.html b/files/pt-br/web/api/element/attributes/index.html new file mode 100644 index 0000000000..b5888e0f04 --- /dev/null +++ b/files/pt-br/web/api/element/attributes/index.html @@ -0,0 +1,166 @@ +--- +title: Element.attributes +slug: Web/API/Element/attributes +tags: + - API + - DOM + - Element + - Elemento + - Property + - Propriedade + - Reference + - Referencia +translation_of: Web/API/Element/attributes +--- +<p>{{ APIRef("DOM") }}</p> + +<p>A propriedade <strong><code>Element.attributes</code></strong> retorna uma coleção de todos os atributos registrados para um nó especificado. É um {{domxref("NamedNodeMap")}}, e não um <code>Array</code>, então não há os métodos de um {{jsxref("Array")}} e os nós indexados {{domxref("Attr")}} podem ser diferentes entre os navegadores. Para ser mais específico, <code>attributes</code> é um par de chave/valor de strings que representa qualquer informação relacionada ao atributo.</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="syntaxbox">var <em>attr</em> =<em> element</em>.attributes; +</pre> + +<h2 id="Example" name="Example">Exemplo</h2> + +<h3 id="Exemplos_básicos">Exemplos básicos</h3> + +<pre class="brush: js">// Obtem o primeiro elemento <p> no documento +var para = document.getElementsByTagName("p")[0]; +var atts = para.attributes;</pre> + +<h3 id="Notes" name="Notes">Listando os atributos dos elementos</h3> + +<p>Indexadores numéricos são úteis para percorrer através de todos os atributos de um elemento.<br> + O exemplo a seguir percorre através dos nós dos atributos do elemento no documento que tenha o id de "p1", e imprime o valor de cada atributo.</p> + +<pre class="brush: html"><!DOCTYPE html> + +<html> + + <head> + <title>Exemplo com atributos</title> + <script type="text/javascript"> + function listAttributes() { + var paragraph = document.getElementById("paragraph"); + var result = document.getElementById("result"); + + // Antes, vamos verificar se o paragrafo tem algum atributo + if (paragraph.hasAttributes()) { + var attrs = paragraph.attributes; + var output = ""; + for(var i = attrs.length - 1; i >= 0; i--) { + output += attrs[i].name + "->" + attrs[i].value; + } + result.value = output; + } else { + result.value = "Nenhum atributo para mostrar"; + } + } + </script> + </head> + +<body> + <p id="paragraph" style="color: green;">Paragrafo de exemplo</p> + <form action=""> + <p> + <input type="button" value="Mostra o nome e o valor do atributo" + onclick="listAttributes();"> + <input id="result" type="text" value=""> + </p> + </form> +</body> +</html></pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-element-attributes', 'Element.attributes')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Da {{SpecName('DOM3 Core')}}, movido de {{domxref("Node")}} para {{domxref("Element")}}</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-84CF096', 'Element.attributes')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Nenhuma alteração a partir da {{SpecName('DOM2 Core')}}</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-84CF096', 'Element.attributes')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>Nenhuma alteração a partir da {{SpecName('DOM1')}}</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-core.html#ID-84CF096', 'Element.attributes')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Definição inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_entre_os_navegadores">Compatibilidade entre os navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funcionalidade</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }} [1]</td> + <td>6.0 [2]</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funcionalidade</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }} [1]</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Antes do Firefox 22, este atributo foi implementado na interface {{domxref("Node")}} (herdada por {{domxref("Element")}}). foi movido para esta interface para obedecer a especificação e o uso em outros navegadores.</p> + +<p>[2] Internet Explorer 5.5 retorna um map contendo os valores ao invés dos objetos do atributo.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{domxref("NamedNodeMap")}}, a interface do objeto retornado</li> + <li>Considerações sobre a compatibilidade entre os navegadores: em <a class="external" href="http://www.quirksmode.org/dom/w3c_core.html#attributes" title="http://www.quirksmode.org/dom/w3c_core.html#attributes">quirksmode</a></li> +</ul> diff --git a/files/pt-br/web/api/element/classlist/index.html b/files/pt-br/web/api/element/classlist/index.html new file mode 100644 index 0000000000..03b79e63d5 --- /dev/null +++ b/files/pt-br/web/api/element/classlist/index.html @@ -0,0 +1,171 @@ +--- +title: Element.classList +slug: Web/API/Element/classList +translation_of: Web/API/Element/classList +--- +<div>{{APIRef("DOM")}}</div> + +<p>O <strong>E</strong><strong>lement.classList</strong> é uma propriedade somente leitura que retorna uma coleção {{domxref ("DOMTokenList")}} ativa dos atributos de classe do elemento.</p> + +<p>Usar <strong>classList</strong> é uma alternativa conveniente para acessar a lista de classes de um elemento como uma seqüência delimitada por espaço através de {{domxref ("element.className")}}.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox">const <var>elementClasses</var> = elementNodeReference.classList; +</pre> + +<p><strong><em>elementClasses</em></strong> é um DOMTokenList que representa o atributo de classe de <strong><em>elementNodeReference</em></strong>. Se o atributo de classe não foi definido ou está vazio <strong><em>elementClasses.length</em></strong> retorna 0. <strong>element.classList </strong>propriamente dito é somente leitura, embora você possa modificá-lo usando os métodos<em> <strong>add ()</strong></em><strong> </strong>e <em><strong>remove ()</strong></em>.</p> + +<h2 id="Métodos">Métodos</h2> + +<dl> + <dt>add( String [, String] )</dt> + <dd>Adicione valores de classe especificados. Se essas classes já existem no atributo do elemento, elas são ignoradas.</dd> + <dt>remove( String [,String] )</dt> + <dd>Remover valores de classe específicos.</dd> + <dt><strong>item</strong> ( Number )</dt> + <dd>Retorna o valor da classe por índice na coleção.</dd> + <dt><strong>toggle</strong> ( String [, force] )</dt> + <dd>Quando apenas um argumento está presente: Toggle class value; Ou seja, se a classe existir, em seguida, removê-lo e retornar false, se não, então adicioná-lo e retornar true.<br> + Quando um segundo argumento está presente: Se o segundo argumento é avaliado como true, adicione o valor especificado da classe e, se ele for avaliado como false, remova-o.</dd> + <dt>contains( String )</dt> + <dd>Verifica se o valor da classe especificado existe no atributo de classe do elemento.</dd> +</dl> + +<h2 id="Exemplos">Exemplos</h2> + +<pre class="brush: js" dir="rtl">// div é uma referência de objeto para um elemento <div> com class = "foo bar" +div.classList.remove("foo"); +div.classList.add("anotherclass"); + +// Se estiver visível, remova-o, caso contrário, adicione-o +div.classList.toggle("visible"); + +// adicionar/remover, dependendo do teste condicional, i menos de 10 +div.classList.toggle("visible", i < 10 ); + +alert(div.classList.contains("foo")); + +// adicionar ou remover várias classes +div.classList.add("foo","bar"); +div.classList.remove("foo", "bar");</pre> + +<div class="note"> +<p>As versões do Firefox antes de 26 não implementam o uso de vários argumentos nos métodos add / remove / toggle. Veja <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=814014">https://bugzilla.mozilla.org/show_bug.cgi?id=814014</a></p> +</div> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificações</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "dom.html#dom-classlist", "Element.classList")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Observe dentro da especificação HTML relacionada ao {{htmlattrxref("class")}} attribute.</td> + </tr> + <tr> + <td>{{SpecName("DOM WHATWG", "#dom-element-classlist", "Element.classList")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td>Definição inicial</td> + </tr> + <tr> + <td>{{SpecName("DOM4", "#dom-element-classlist", "Element.classList")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>8.0</td> + <td>{{CompatVersionUnknown}}<sup>[3]</sup></td> + <td>{{CompatGeckoDesktop("1.9.2")}}</td> + <td>10<sup>[1][3]</sup></td> + <td>11.50</td> + <td>5.1</td> + </tr> + <tr> + <td>toggle method's second argument</td> + <td>24</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("24")}}</td> + <td>{{CompatNo}}<sup>[2]</sup></td> + <td>15</td> + <td>5.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>3.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.9.2")}}</td> + <td>10</td> + <td>11.10</td> + <td>5.0</td> + </tr> + <tr> + <td>toggle method's second argument</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("24")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Não suportado para elementos SVG. Veja <a href="https://connect.microsoft.com/IE/feedback/details/1046039/classlist-not-working-on-svg-elements">a report at Microsoft about that</a>.<br> + [2] O Internet Explorer nunca implementou isso. Veja <a href="https://connect.microsoft.com/IE/feedback/details/878564/element-classlist-toggle-does-not-support-second-parameter">a report at Microsoft about that</a>.<br> + [3] Internet Explorer usa apenas o primeiro parâmetro em "add" e "remove".</p> + +<p> </p> + +<p> </p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{domxref("element.className")}}</li> + <li>{{domxref("DOMTokenList")}};</li> +</ul> diff --git a/files/pt-br/web/api/element/classname/index.html b/files/pt-br/web/api/element/classname/index.html new file mode 100644 index 0000000000..1db2b4f71e --- /dev/null +++ b/files/pt-br/web/api/element/classname/index.html @@ -0,0 +1,123 @@ +--- +title: Element.className +slug: Web/API/Element/className +tags: + - API + - DOM + - Gecko + - Property + - Reference +translation_of: Web/API/Element/className +--- +<div>{{APIRef("DOM")}}</div> + +<h2 id="Sumário">Sumário</h2> + +<p><strong>className</strong> retorna e define o valor do atributo <code>class</code> do elemento especificado.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>var cName</var> = <var>elementNodeReference</var>.className; +<var>elementNodeReference</var>.className = <var>cName</var>;</pre> + +<ul> + <li><var>cName</var> sendo uma variável de texto (string) que represente uma única classe, ou múltiplas classes (separadas por um espaço) do elemento selecionado.</li> +</ul> + +<h2 id="Exemplo">Exemplo</h2> + +<pre class="brush: js">var element = document.getElementById("div1"); + +if (element.className === "fixed") { + // verifica a partir de uma classe específica do elemento + goNextElement(); +}</pre> + +<h2 id="Notes" name="Notes">Notas</h2> + +<p><code>O nome className</code> é utilizado para esta propriedade ao invés de <code>class</code> por conta de conflitos com a palavra-chave "class" em variáveis linguagens que são utilizadas para manipulação do <a href="/en-US/docs/Web/API/Document_Object_Model">DOM</a>.</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName("DOM WHATWG", "#dom-element-classname", "element.className")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM4", "#dom-element-classname", "element.className")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM2 HTML", "html.html#ID-95362176", "element.className")}}</td> + <td>{{Spec2("DOM2 HTML")}}</td> + <td>Definição inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_Browser">Compatibilidade de Browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte Básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte Básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{domxref("element.classList")}}</li> +</ul> diff --git a/files/pt-br/web/api/element/click_event/index.html b/files/pt-br/web/api/element/click_event/index.html new file mode 100644 index 0000000000..1044c53281 --- /dev/null +++ b/files/pt-br/web/api/element/click_event/index.html @@ -0,0 +1,276 @@ +--- +title: click +slug: Web/API/Element/click_event +translation_of: Web/API/Element/click_event +--- +<p>O evento <code>click</code> event é disparado quando o botão de um dispositivo apontador (normalmente o botão de um mouse) é pressionado e solto logo em seguida em um mesmo elemento.</p> + +<h2 id="Informações_gerais">Informações gerais</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Especificação</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-click">DOM L3</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("MouseEvent")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt> + <dd style="margin: 0 0 0 120px;">Sim</dd> + <dt style="float: left; text-align: right; width: 120px;">Cancelável</dt> + <dd style="margin: 0 0 0 120px;">Sim</dd> + <dt style="float: left; text-align: right; width: 120px;">Target</dt> + <dd style="margin: 0 0 0 120px;">Element</dd> + <dt style="float: left; text-align: right; width: 120px;">Ação padrão</dt> + <dd style="margin: 0 0 0 120px;">Variável</dd> +</dl> + +<h2 id="Propriedades">Propriedades</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td> + <td>O alvo do evento (o mais alto na arvore de DOM).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td><code><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String.">DOMString</a></code></td> + <td>Tipo do evento.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>Se o evento "bubbles" naturalmente ou não.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>Se o evento é cancelável ou não</td> + </tr> + <tr> + <td><code>view</code> {{readonlyInline}}</td> + <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td> + <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> do documento)</td> + </tr> + <tr> + <td><code>detail</code> {{readonlyInline}}</td> + <td><code>long</code> (<code>float</code>)</td> + <td> + <p>Um contador de cliques consecutivos que ocorrem em um curto espaço de tempo, incrementado em 1.</p> + </td> + </tr> + <tr> + <td><code>currentTarget</code> {{readonlyInline}}</td> + <td>EventTarget</td> + <td>O node que contem o eventListener.</td> + </tr> + <tr> + <td><code>relatedTarget</code> {{readonlyInline}}</td> + <td>EventTarget</td> + <td>Para eventos <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> e <code>mouseleave</code>: o alvo do evento complementar (o <code>mouseleave</code> no caso de um evento <code>mouseenter</code> ). <code>null</code> , se falso.</td> + </tr> + <tr> + <td><code>screenX</code> {{readonlyInline}}</td> + <td>long</td> + <td>A coordenada X do ponteiro do mouse na tela.</td> + </tr> + <tr> + <td><code>screenY</code> {{readonlyInline}}</td> + <td>long</td> + <td>A coordenada Y do ponteiro do mouse na tela.</td> + </tr> + <tr> + <td><code>clientX</code> {{readonlyInline}}</td> + <td>long</td> + <td>A coordenada X do ponteiro do mouse no DOM atual.</td> + </tr> + <tr> + <td><code>clientY</code> {{readonlyInline}}</td> + <td>long</td> + <td>A coordenada Y do ponteiro do mouse no DOM atual.</td> + </tr> + <tr> + <td><code>button</code> {{readonlyInline}}</td> + <td>unsigned short</td> + <td>The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.</td> + </tr> + <tr> + <td><code>buttons</code> {{readonlyInline}}</td> + <td>unsigned short</td> + <td>The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">More info</a>.</td> + </tr> + <tr> + <td><code>mozPressure</code> {{readonlyInline}}</td> + <td>float</td> + <td>The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).</td> + </tr> + <tr> + <td><code>ctrlKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>shiftKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>altKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>metaKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + </tbody> +</table> + +<h2 id="Exemplo">Exemplo</h2> + +<pre class="brush: js"><div id="test"></div> + +<script> + document.getElementById("test").addEventListener("click", function( event ) { + // mostra o contador de cliques dentro da div clicada + event.target.innerHTML = "Total de cliques: " + event.detail; + }, false); +</script> +</pre> + +<h2 id="Compatibilidade_nos_Browsers">Compatibilidade nos Browsers</h2> + +<h3 id="Internet_Explorer">Internet Explorer</h3> + +<p>O Internet Explorer 8 e 9 apresentam um bug onde o elemento com a propriedade {{cssxref("background-color")}} é definida como <a href="/en-US/docs/Web/CSS/color_value#transparent_keyword"><code>transparent</code></a> that are overlaid on top of other element(s) won't receive <code>click</code> events. Todos os eventos <code>click</code> serão disparados no elemento underlying instead. Veja uma demonstração <a href="http://jsfiddle.net/YUKma/show/">neste exemplo</a>.</p> + +<p>Soluções de contorno para este bug:</p> + +<ul> + <li>Somente para o IE9: + <ul> + <li>Defina o <code>{{cssxref("background-color")}} como: <a href="/en-US/docs/Web/CSS/color_value#rgba()">rgba</a>(0,0,0,0)</code></li> + <li>Defina a <code>{{cssxref("opacity")}} como: 0</code> e defina explicitamente {{cssxref("background-color")}} com outro valor diferente de <a href="/en-US/docs/Web/CSS/color_value#transparent_keyword"><code>transparent</code></a></li> + </ul> + </li> + <li>Para IE8 e IE9: Defina a propriedade <code><a href="http://msdn.microsoft.com/en-us/library/ms532847(v=vs.85).aspx">filter</a> como: alpha(opacity=0);</code> e o {{cssxref("background-color")}} com outro valor diferente de <a href="/en-US/docs/Web/CSS/color_value#transparent_keyword"><code>transparent</code></a></li> +</ul> + +<h3 id="Safari_Mobile">Safari Mobile</h3> + +<p>Safari Mobile 7.0+ (and likely earlier versions too) <a href="https://bugs.webkit.org/show_bug.cgi?id=153887">suffers from a bug</a> where <code>click</code> events aren't fired on elements that aren't typically interactive (e.g. {{HTMLElement("div")}}) and which also don't have event listeners directly attached to the elements themselves (i.e. <a href="http://davidwalsh.name/event-delegate">event delegation</a> is being used). See <a href="http://jsfiddle.net/cvrhulu/k9t0sdnf/show/">this live example</a> for a demonstration. See also <a href="https://developer.apple.com/library/safari/documentation/appleapplications/reference/safariwebcontent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW6">Safari's docs on making elements clickable</a> and the <a href="https://developer.apple.com/library/safari/documentation/appleapplications/reference/safariwebcontent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW7">definition of "clickable element"</a>.</p> + +<p>Known workarounds for this bug:</p> + +<ul> + <li>Set {{cssxref("cursor")}}<code>: pointer;</code> on the element or any of its ancestors.</li> + <li>Add a dummy <code>onclick="void(0)"</code> attribute to the element or any of its ancestors up to but not including {{HTMLElement("body")}}.</li> + <li>Use a typically interactive element (e.g. {{HTMLElement("a")}}) instead of one that isn't typically interactive (e.g. {{HTMLElement("div")}}).</li> + <li>Stop using <code>click</code> <a href="http://davidwalsh.name/event-delegate">event delegation</a>.</li> +</ul> + +<p>Safari Mobile considers the following elements to be typically interactive (and thus they aren't affected by this bug):</p> + +<ul> + <li>{{HTMLElement("a")}} (but it must have an <code>href</code>)</li> + <li>{{HTMLElement("area")}} (but it must have an <code>href</code>)</li> + <li>{{HTMLElement("button")}}</li> + <li>{{HTMLElement("img")}}</li> + <li>{{HTMLElement("input")}}</li> + <li>{{HTMLElement("label")}} (but it must be associated with a form control)</li> + <li>{{HTMLElement("textarea")}}</li> + <li><em>This list is incomplete; you can help MDN by doing further testing/research and expanding it.</em></li> +</ul> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Edge</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>On disabled form elements</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}<sup>[2]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>On disabled form elements</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Only works for {{HTMLElement("textarea")}} elements and some {{HTMLElement("input")}} element types.</p> + +<p>[2] Internet Explorer only triggers the <code>click</code> event on {{HTMLElement("input")}} elements of type <code>checkbox</code> or <code>radio</code> when the element is double-clicked.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{event("mousedown")}}</li> + <li>{{event("mouseup")}}</li> + <li>{{event("mousemove")}}</li> + <li>{{event("click")}}</li> + <li>{{event("dblclick")}}</li> + <li>{{event("mouseover")}}</li> + <li>{{event("mouseout")}}</li> + <li>{{event("mouseenter")}}</li> + <li>{{event("mouseleave")}}</li> + <li>{{event("contextmenu")}}</li> +</ul> diff --git a/files/pt-br/web/api/element/closest/index.html b/files/pt-br/web/api/element/closest/index.html new file mode 100644 index 0000000000..cfae3b2c98 --- /dev/null +++ b/files/pt-br/web/api/element/closest/index.html @@ -0,0 +1,127 @@ +--- +title: Element.closest() +slug: Web/API/Element/closest +translation_of: Web/API/Element/closest +--- +<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div> + +<p>O método <code><strong>Element.closest()</strong></code> retorna o ancestral mais próximo, em relação ao elemento atual, que possui o seletor fornecido como parâmetro. No caso de o elemento atual possuir o seletor, o mesmo é retornado. Caso não exista um ancestral o método retorna <code>null</code>.</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="syntaxbox">var <em>elt =</em><em> element</em>.closest(<em>selectors</em>); +</pre> + +<h3 id="Parâmetros">Parâmetros</h3> + +<ul> + <li><em>selectors</em> é um {{domxref("DOMString")}} contendo uma lista de seletores, por exemplo <code>"p:hover, .toto + q"</code></li> + <li><em>element</em> é um {{domxref("Element")}} posicionado no início da árvore de elementos a ser percorrida.</li> +</ul> + +<h3 id="Valor_retornado">Valor retornado</h3> + +<ul> + <li><em>elt</em> é um {{domxref("Element")}} selecionado como ancestral mais próximo do elemento pelo qual se iniciou a pesquisa. O valor retornado pode ser <code>null</code>.</li> +</ul> + +<h3 id="Exceções">Exceções</h3> + +<ul> + <li>{{exception("SyntaxError")}} é lançada caso o parâmetro <code>selectors</code> não seja uma string válida contendo uma lista de seletores.</li> +</ul> + +<h2 id="Example" name="Example">Exemplo</h2> + +<pre class="brush: html"><article> + <div id="div-01">Esta é a div-01 + <div id="div-02">Esta é a div-02 + <div id="div-03">Esta é a div-03</div> + </div> + </div> +</article></pre> + +<pre class="brush: js">var el = document.getElementById('div-03'); + +var r1 = el.closest("#div-02"); +// retorna o elemento com id=div-02 + +var r2 = el.closest("div div"); +// retorna o ancestral mais próximo que é uma div dentro de uma div, nesse caso div-03 é retornada + +var r3 = el.closest("article > div"); +// retorna o ancestral mais próximo que é uma div e tem um article como elemento pai, nesse caso div-01 é retornada + +var r4 = el.closest(":not(div)"); +// retorna o ancestral mais próximo que não é uma div, neste caso article é retornado +</pre> + +<h2 id="Polyfill" name="Polyfill">Polyfill</h2> + +<p>Para navegadores que não suportam <code>Element.closest()</code>, mas possuem suporte para <code>element.matches()</code> (ou um prefixo equivalente, ou seja IE9+), o seguinte polyfill pode ser usado: </p> + +<pre class="brush: js">if (!Element.prototype.matches) + Element.prototype.matches = Element.prototype.msMatchesSelector || + Element.prototype.webkitMatchesSelector; + +if (!Element.prototype.closest) + Element.prototype.closest = function(s) { + var el = this; + if (!document.documentElement.contains(el)) return null; + do { + if (el.matches(s)) return el; + el = el.parentElement; + } while (el !== null); + return null; + }; +</pre> + +<p>Contudo, se você de fato precisa dar suporte ao IE 8, você pode usar o polyfill abaixo, o qual é lento mas eficaz. Além disso, ele só garante suporte a seletores CSS 2.1 no IE 8 e ainda pode causar picos de lentidão em websites em produção.</p> + +<pre class="brush: js">if (window.Element && !Element.prototype.closest) { + Element.prototype.closest = + function(s) { + var matches = (this.document || this.ownerDocument).querySelectorAll(s), + i, + el = this; + do { + i = matches.length; + while (--i >= 0 && matches.item(i) !== el) {}; + } while ((i < 0) && (el = el.parentElement)); + return el; + }; +} +</pre> + +<h2 id="Specification" name="Specification">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-element-closest', 'Element.closest()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Definição inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade em navegadores</h2> + +<div>{{Compat("api.Element.closest")}}</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>A interface {{domxref("Element")}}.</li> + <li> + <div class="syntaxbox">A sintaxe em Seletores</div> + </li> + <li> + <div class="syntaxbox">Outros métodos que aceitam seletores: {{domxref("element.querySelector()")}} e {{domxref("element.matches()")}}.</div> + </li> +</ul> diff --git a/files/pt-br/web/api/element/getattribute/index.html b/files/pt-br/web/api/element/getattribute/index.html new file mode 100644 index 0000000000..c5d1a9475b --- /dev/null +++ b/files/pt-br/web/api/element/getattribute/index.html @@ -0,0 +1,76 @@ +--- +title: Element.getAttribute() +slug: Web/API/Element/getAttribute +tags: + - API + - DOM + - Referencia + - metodo +translation_of: Web/API/Element/getAttribute +--- +<div>{{APIRef("DOM")}}</div> + +<h2 id="Summary" name="Summary">Resumo</h2> + +<p><span class="seoSummary"><code>getAttribute()</code> retorna o valor de um argumento específico do elemento.</span> Se o atributo não existir, o valor retornado será <code>null</code> ou <code>""</code> (string vazia). Veja {{Anch("Notas")}} para mais detalhes.</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="syntaxbox"><em>var atributo</em> = element.getAttribute(<em>nomeDoAtributo</em>); +</pre> + +<p>onde</p> + +<ul> + <li><code><em>atributo</em></code> é uma string contendo o valor do <code><em>nomeDoAtributo</em></code>.</li> + <li><code><em>nomeDoAtributo</em></code> é o nome do atributo cujo deseja se obter o valor.</li> +</ul> + +<h2 id="Example" name="Example">Exemplo</h2> + +<pre class="brush:js">var div1 = document.getElementById("div1"); +var align = div1.getAttribute("align"); + +alert(align); // mostra o valor do atributo "align" do elemento com id="div1"</pre> + +<h2 id="Notas" name="Notas">Notas</h2> + +<p>Quando for utilizado para um elemento HTML num DOM sinalizado como documento HTML, <code>getAttribute()</code> troca de caixa alta para caixa baixa (maiúscula para minúscula) seu argumento antes de prosseguir.</p> + +<p>Essencialmente todos navegadores (Firefox, Internet Explorer, versões recentes do Opera, Safari, Konqueror, e iCab, por exemplo) retornam <code>null</code> quando o atributo especificado não existe no elemento em questão, seguindo que <a href="http://dom.spec.whatwg.org/#dom-element-getattribute" title="http://dom.spec.whatwg.org/#dom-element-getattribute">o esboço atual de especificações DOM</a> diz. A velha especificação do DOM 3 Core, por sua vez, diz que correto é retornar uma <em>string vazia</em> e algumas implementações de DOM se comportam dessa forma. Por exemplo, a implementação do getAttribute no XUL (Gecko) segue as especificações do DOM 3 Core e retorna uma string vazia. Consequentemente, deve-se usar {{domxref("Element.hasAttribute()")}} para checar a existência do atributo antes de utilizar o <code>getAttribute()</code>caso exista a possibilidade do argumento inexistir.</p> + +<div> +<h2 id="Compatibilidade_entre_browsers">Compatibilidade entre browsers</h2> + +<p>{{CompatibilityTable}}</p> + +<table> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte Básico</td> + <td>29</td> + <td>23</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>6</td> + </tr> + </tbody> +</table> + +<p>{{DOMAttributeMethods}}</p> +</div> + +<h2 id="Specification" name="Specification">Especificação</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-666EE0F9">DOM Level 2 Core: getAttribute</a> (introduzido em <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-getAttribute">DOM Level 1 Core</a>)</li> + <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents">HTML 5: APIs nos documentos HTML</a></li> +</ul> diff --git a/files/pt-br/web/api/element/getboundingclientrect/index.html b/files/pt-br/web/api/element/getboundingclientrect/index.html new file mode 100644 index 0000000000..5f32a3512a --- /dev/null +++ b/files/pt-br/web/api/element/getboundingclientrect/index.html @@ -0,0 +1,84 @@ +--- +title: Element.getBoundingClientRect() +slug: Web/API/Element/getBoundingClientRect +tags: + - API + - CSSOM View + - Método(2) + - Referência(2) +translation_of: Web/API/Element/getBoundingClientRect +--- +<div>{{APIRef("DOM")}}</div> + +<p>O método <code><strong>Element.getBoundingClientRect() </strong>retorna o tamanho de um elemento e sua posição relativa ao <em>viewport</em>.</code></p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox"><var>rectObject</var> = <var>object</var>.getBoundingClientRect(); +</pre> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>O valor de retorno é o objeto <a href="/en-US/docs/XPCOM_Interface_Reference/nsIDOMClientRect">DOMRect</a> que é a uniāo dos retângulos retornados por <a href="/en-US/docs/DOM/element.getClientRects"><code>getClientRects()</code></a> para o elemento, ou seja, os atributos border-boxes do CSS associados ao elemento.</p> + +<p>O valor retornado é um objeto <code>DOMRect</code>, que contém as propriedades apenas-leitura <code>left</code>, <code>top</code>, <code>right</code> e <code>bottom</code> que descrevem o border-box em pixels. <code>top</code> e <code>left</code> são relativos às propriedades top-left do <em>viewport</em>.</p> + +<div class="note"> +<p><strong>Nota:</strong> {{Gecko("1.9.1")}} adiciona as propriedades <code>width</code> e <code>height</code> ao objeto <code>DOMRect</code>.</p> +</div> + +<p>Border-boxes vazias são completamente ignoradas. Se todos os border-boxes do elemento são vazias, então é retornado o retângulo com width e height como zero, e no lugar de <code>top</code> e <code>left</code> determina-se o top-left do border-box relacionado ao primeiro box CSS (determinado pela ordem do conteúdo) em relaçāo ao elemento.</p> + +<p>A quantidade de scrolling que foi feita na área do viewport (ou qualquer outra área de qualquer outro elemento <em>scrollable</em>) é tomada com medida ao computar o delimitador do retângulo. Isso significa que as propriedades <code>top</code> e <code>left</code> mudam seus valores tão logo a posiçāo do scroll for alterada (assim seus valores sāo relativos ao viewport e não são absolutos). Se esse não for o comportamento esperado basta adicionar a posição atual do scroll para as propriedades <code>top</code> e <code>left</code> (via <code>window.scrollX</code> e <code>window.scrollY</code>) para pegar os valores constantes independentemente da posiçāo atual do scroll.</p> + +<p>Scripts que requerem uma alta compatibilidade cross-browser podem usar <code>window.pageXOffset</code> e <code>window.pageYOffset</code> ao invés de <code>window.scrollX</code> e <code>window.scrollY.</code> Scripts sem acesso ao <code>window.pageXOffset</code>, <code>window.pageYOffset</code>, <code>window.scrollX</code> e <code>window.scrollY</code> podem usar:</p> + +<pre class="brush:js">// Para o scrollX +(((t = document.documentElement) || (t = document.body.parentNode)) + && typeof t.ScrollLeft == 'number' ? t : document.body).ScrollLeft +// Para o scrollY +(((t = document.documentElement) || (t = document.body.parentNode)) + && typeof t.ScrollTop == 'number' ? t : document.body).ScrollTop +</pre> + +<h2 id="Exemplo">Exemplo</h2> + +<pre class="brush:js">// rect é um objeto DOMRect com seis propriedades: left, top, right, bottom, width, height +var rect = obj.getBoundingClientRect(); +</pre> + +<h2 id="Especificaçōes">Especificaçōes</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSSOM View", "#dom-element-getboundingclientrect", "Element.getBoundingClientRect()")}}</td> + <td>{{Spec2("CSSOM View")}}</td> + <td>Definiçāo Inicial</td> + </tr> + </tbody> +</table> + +<h3 id="Notas">Notas</h3> + +<p><code>getBoundingClientRect()</code> foi primeiramente introduzida no modelo de objeto MS IE DHTML.</p> + +<p>O valor de retorno de <code>getBoundingClientRect()</code> é <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze">frozen</a>.</p> + +<h2 id="Compatibilidade">Compatibilidade</h2> + +<div>{{Compat("api.Element.getBoundingClientRect")}}</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="https://msdn.microsoft.com/en-us/library/ms536433(VS.85).aspx">MSDN: <code>getBoundingClientRect</code></a></li> + <li><a href="/en-US/docs/DOM/element.getClientRects"><code>getClientRects()</code></a></li> +</ul> diff --git a/files/pt-br/web/api/element/getelementsbyclassname/index.html b/files/pt-br/web/api/element/getelementsbyclassname/index.html new file mode 100644 index 0000000000..2660d0009b --- /dev/null +++ b/files/pt-br/web/api/element/getelementsbyclassname/index.html @@ -0,0 +1,108 @@ +--- +title: Element.getElementsByClassName() +slug: Web/API/Element/getElementsByClassName +translation_of: Web/API/Element/getElementsByClassName +--- +<div>{{APIRef("DOM")}}</div> + +<p><span class="seoSummary">O método <code><strong>getElementsByClassName()</strong></code> da interface {{domxref("Element")}} retorna um {{domxref("HTMLCollection")}} atualizado simultaneamente que contém todos os elementos descendentes da classe ou das classes especificadas.</span></p> + +<p>O método {{domxref("Document.getElementsByClassName", "getElementsByClassName()")}} da interface {{domxref("Document")}} funciona da mesma forma, exceto que atua em todo o documento, começando da raíz.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox"><var>var <em>elements</em></var> = <em>element</em>.getElementsByClassName(<em>names</em>);</pre> + +<h3 id="Parâmetros">Parâmetros</h3> + +<dl> + <dt><code>names</code></dt> + <dd>Uma {{domxref("DOMString")}} contendo um ou mais nomes de classes separados por espaço em branco.</dd> +</dl> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>Um {{domxref("HTMLCollection")}} que contém uma lista de elementos atualizada em tempo real com todos os elementos que são membros das classes especificadas em <code>names</code>.</p> + +<h2 id="Notas_de_uso">Notas de uso</h2> + +<p>Habitualmente, o conjunto de elementos retornado será atualizado simultaneamente com as mudanças feitas, refletindo no estado atual da árvore DOM, no elemento em que a função foi chamada. Assim que novos elementos que satisfazem as classes contidas em <code>names</code> são adicionados na subárvore, eles imediatamente aparecem no conjunto de elementos. Em um exemplo similar, se um elemento existente que não satisfaz nenhuma classe contida em <code>names</code> tem as suas classes ajustadas para que satisfaça, ele irá instantaneamente ser adicionado ao conjunto de elementos.</p> + +<p>O oposto disso também acontece; os elementos que não satisfazerem mais as classes contidas em <code>name</code> serão removidos instantaneamente do conjunto.</p> + +<div class="note"> +<p>No modo <a href="/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode">quirks</a>, o nome das classes são comparadas da forma case-insensitive. Caso contrário, considere case sensitive.</p> +</div> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Usando_uma_única_classe">Usando uma única classe</h3> + +<p>Para procurarmos elementos que incluem uma classe específica, nós apenas informamos o nome da classe ao chamar <code>getElementsByClassName()</code>:</p> + +<pre class="brush: js">element.getElementsByClassName('test');</pre> + +<p>Esse exemplo retorna todos os elementos que possuem a classe <code>test</code>, e que também são filhos do elemento que possui o <code>id</code> com valor <code>main</code>:</p> + +<pre class="brush: js">document.getElementById('main').getElementsByClassName('test');</pre> + +<h3 id="Usando_várias_classes">Usando várias classes</h3> + +<p>Para retornar elementos que incluem as classes <code>red</code> and <code>test</code>:</p> + +<pre class="brush: js">element.getElementsByClassName('red test');</pre> + +<h3 id="Examinando_os_resultados">Examinando os resultados</h3> + +<p>You can use either the {{domxref("HTMLCollection.item", "item()")}} method on the returned <code>HTMLCollection</code> or standard array syntax to examine individual elements in the collection. However<u><strong> the following code will not work</strong></u> as one might expect because <code>"matches" </code>will change as soon as any <code>"colorbox"</code> class is removed.</p> + +<pre class="brush: js">var matches = element.getElementsByClassName('colorbox'); + +for (var i=0; i<matches.length; i++) { + matches[i].classList.remove('colorbox'); + matches.item(i).classList.add('hueframe'); +} +</pre> + +<p>Instead, use another method, such as:</p> + +<pre class="brush: js">var matches = element.getElementsByClassName('colorbox'); + +while (matches.length > 0) { + matches.item(0).classList.add('hueframe'); + matches[0].classList.remove('colorbox'); +}</pre> + +<p>This code finds descendant elements with the <code>"colorbox"</code> class, adds the class <code>"hueframe"</code>, by calling <code>item(0), </code>then removes <code>"colorbox" </code>(using array notation). Another element (if any are left) will then become <code>item(0)</code>.</p> + +<h3 id="Filtering_the_results_using_array_methods">Filtering the results using array methods</h3> + +<p>We can also use methods of {{jsxref("Array.prototype")}} on any {{ domxref("HTMLCollection") }} by passing the {{domxref("HTMLCollection")}} as the method's <code>this</code> value. Here we'll find all {{HTMLElement("div")}} elements that have a class of <code>test</code>:</p> + +<pre class="brush: js">var testElements = document.getElementsByClassName('test'); +var testDivs = Array.prototype.filter.call(testElements, function(testElement) { + return testElement.nodeName === 'DIV'; +});</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-element-getelementsbyclassname', 'Element.getElementsByClassName()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Element.getElementsByClassName")}}</p> diff --git a/files/pt-br/web/api/element/id/index.html b/files/pt-br/web/api/element/id/index.html new file mode 100644 index 0000000000..864b1fe8b3 --- /dev/null +++ b/files/pt-br/web/api/element/id/index.html @@ -0,0 +1,119 @@ +--- +title: Element.id +slug: Web/API/Element/id +tags: + - API + - DOM + - Gecko + - Property + - Reference +translation_of: Web/API/Element/id +--- +<div>{{ApiRef("DOM")}}</div> + +<div> </div> + +<p>A propriedade <strong><code>Element.id</code></strong> representa o identificador do elemento, refletindo no atributo global <strong><a href="/en-US/docs/Web/HTML/Global_attributes/id">id</a></strong>.</p> + +<p>O ID precisa ser único no documento, e geralmente é utilizado para obter o elemento usando {{domxref("document.getElementById", "getElementById")}}.. Outro uso comum de <code>id</code> é utilizar o <a href="/en-US/docs/Web/CSS/ID_selectors" title="Web/CSS/ID_selectors">ID como um seletor</a> ao estilizar o documento com CSS.</p> + +<div class="note"> +<p><strong>Nota</strong>: IDs são case-sensitive, mas você não deve criar IDs cuja única diferença nos nomes sejam letras maiúsculas/minúsculas (veja <a href="/en-US/docs/Case_Sensitivity_in_class_and_id_Names" title="Case_Sensitivity_in_class_and_id_Names">Case sensitivity in class and id names</a>).</p> +</div> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="syntaxbox"><em>var idStr</em> = <em>element</em>.id; // Retorna o id. +<em>element</em>.id = <em>idStr; // Insere o id</em> +</pre> + +<ul> + <li><code>idStr</code> é o identificador do elemento.</li> +</ul> + +<h2 id="Specification" name="Specification">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-element-id', 'id')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Sem alteração desde {{SpecName('DOM2 HTML')}}.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 HTML', 'html.html#ID-63534901', 'id')}}</td> + <td>{{Spec2('DOM2 HTML')}}</td> + <td>Sem alteração desde {{SpecName('DOM1')}}.</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-html.html#ID-63534901', 'id')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Definição inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_com_os_browsers">Compatibilidade com os browsers</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome para Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>O atributo global <a href="/en-US/docs/Web/HTML/Global_attributes/id"><strong>id</strong></a>.</li> +</ul> diff --git a/files/pt-br/web/api/element/index.html b/files/pt-br/web/api/element/index.html new file mode 100644 index 0000000000..b3779720d9 --- /dev/null +++ b/files/pt-br/web/api/element/index.html @@ -0,0 +1,529 @@ +--- +title: Element +slug: Web/API/Element +tags: + - API + - DOM + - DOM Reference + - Element + - Interface + - Reference + - Web API +translation_of: Web/API/Element +--- +<p>{{ APIRef("DOM") }}</p> + +<p><span class="seoSummary"><font face="Open Sans, Arial, sans-serif">A interface </font><code><strong>Element</strong></code> é a classe base mais geral da qual todos os objetos em um {{domxref("Document")}} herda. Ela somente tem métodos e propriedades comuns para todos os tipos de elementos. Mais classes específicas herdam de <code>Element</code>. Por exemplo, a interface {{domxref("HTMLElement")}} é a interface base para elementos HTML, enquanto a interface {{domxref("SVGElement")}} é a base para todos os elementos SVG. A maioria das funcionalidades é especificada mais abaixo da hierarquia de classes. </span></p> + +<p>Linguagens fora do domínio da plataforma da Web, como XUL através da interface <code>XULElement</code>, também implementa <code>Element</code>.</p> + +<h2 id="Properties" name="Properties">Propriedades</h2> + +<p><em>Herda propriedades de seus parentes {{domxref("Node")}}, e seu próprio parente, {{domxref("EventTarget")}}, e implementa aqueles de {{domxref("ParentNode")}}, {{domxref("ChildNode")}}, {{domxref("NonDocumentTypeChildNode")}}, e </em>{{domxref("Animatable")}}.</p> + +<dl> + <dt>{{ domxref("Element.attributes") }} {{readOnlyInline}}</dt> + <dd>Retorna um {{ domxref("NamedNodeMap") }} que lista todos os atributos associados ao elemento.</dd> + <dt>{{ domxref("ParentNode.childElementCount") }}</dt> + <dd>É um {{jsxref("Number")}} representando o número de nós filhos que são elementos.</dd> + <dt>{{ domxref("ParentNode.children") }}</dt> + <dd>É um {{ domxref("HTMLCollection") }} ao vivo contendo todos os elementos filhos do elemento, como uma coleção.</dd> + <dt>{{ domxref("Element.classList") }} {{readOnlyInline}}</dt> + <dd>Retorna um {{ domxref("DOMTokenList") }} contendo a lista de atributos de classe.</dd> + <dt>{{ domxref("Element.className") }}</dt> + <dd>É um {{domxref("DOMString")}} representando a classe do elemento.</dd> + <dt>{{ domxref("Element.clientHeight") }} {{experimental_inline}} {{readOnlyInline}}</dt> + <dd>Retorna um {{jsxref("Number")}} representando a altura interna do elemento.</dd> + <dt>{{ domxref("Element.clientLeft") }} {{experimental_inline}} {{readOnlyInline}}</dt> + <dd>Retorna um {{jsxref("Number")}} representando a largura da borda do elemento..</dd> + <dt>{{ domxref("Element.clientTop") }} {{experimental_inline}} {{readOnlyInline}}</dt> + <dd>Retorna um {{jsxref("Number")}} representando a largura da borda do topo do elemento.</dd> + <dt>{{ domxref("Element.clientWidth") }} {{experimental_inline}} {{readOnlyInline}}</dt> + <dd>Retorna um {{jsxref("Number")}} representando a largura interna do elemento.</dd> + <dt>{{ domxref("ParentNode.firstElementChild") }}</dt> + <dd> + <p>É um {{ domxref("Element") }}, o primeiro elemento filho direto de um elemento, ou <code>null</code> se o elemento não tem elementos filho.</p> + </dd> + <dt>{{ domxref("Element.id") }}</dt> + <dd>É um {{domxref("DOMString")}} representando o id do elemento.</dd> + <dt>{{ domxref("Element.innerHTML") }} {{experimental_inline}}</dt> + <dd>É um {{domxref("DOMString")}} representando a marcação do conteúdo do elemento.</dd> + <dt>{{ domxref("ParentNode.lastElementChild") }}</dt> + <dd>É um {{ domxref("Element") }}, o último elemento filho direto de um elemento, ou <code>null</code> se o elemento não tem elementos filho.</dd> + <dt>{{ domxref("NonDocumentTypeChildNode.nextElementSibling") }}</dt> + <dd>É um {{ domxref("Element") }}, o elemento seguido imediatamente do dito na árvore, ou <code>null</code> se não há nó irmão.</dd> + <dt>{{ domxref("Element.outerHTML") }} {{experimental_inline}}</dt> + <dd>É um {{domxref("DOMString")}} representando a marcação do elemento incluindo seu conteúdo. Quando usado como um <a href="/pt-BR/docs/Web/JavaScript/Reference/Functions/set">setter</a>, substitui o elemento com nós analisados a partir de uma determinada <a href="/pt-BR/docs/Glossario/String">string</a>.</dd> + <dt>{{ domxref("NonDocumentTypeChildNode.previousElementSibling") }}</dt> + <dd>É um {{ domxref("Element") }}, o elemento precedido imediatamente do dito na árvore, ou <code>nulo</code> se não há elemento irmão.</dd> + <dt>{{ domxref("Element.scrollHeight") }} {{experimental_inline}} {{readOnlyInline}}</dt> + <dd>Retorna um {{jsxref("Number")}} representando a altura da vista de rolagem de um elemento.</dd> + <dt>{{ domxref("Element.scrollLeft") }} {{experimental_inline}}</dt> + <dd>É um {{jsxref("Number")}} representando o deslocamento de rolagem esquerdo do elemento.</dd> + <dt>{{ domxref("Element.scrollLeftMax") }} {{non-standard_inline}} {{readOnlyInline}}</dt> + <dd>Retorna um {{jsxref("Number")}} representando o deslocamento de rolagem esquerdo máximo possível para o elemento.</dd> + <dt>{{ domxref("Element.scrollTop") }} {{experimental_inline}}</dt> + <dd>É um {{jsxref("Number")}} representando o deslocamento de rolagem superior de um elemento.</dd> + <dt>{{ domxref("Element.scrollTopMax") }} {{non-standard_inline}} {{readOnlyInline}}</dt> + <dd>Retorna um {{jsxref("Number")}} representando o deslocamento de rolagem máximo superior possível para o elemento.</dd> + <dt>{{ domxref("Element.scrollWidth") }} {{experimental_inline}} {{readOnlyInline}}</dt> + <dd>Retorna um {{jsxref("Number")}} representando a largura de exibição de rolagem do elemento.</dd> + <dt>{{domxref("Element.shadowRoot") }} {{experimental_inline}} {{readOnlyInline}}</dt> + <dd>...</dd> + <dt>{{ domxref("Element.tagName") }} {{readOnlyInline}}</dt> + <dd>Retorna um {{domxref("String")}} com o nome da tag para o elemento em questão.</dd> + <dt>{{ domxref("Element.undoManager")}} {{experimental_inline}} {{readOnlyInline}}</dt> + <dd>Retorna o {{domxref("UndoManager")}} associado com o elemento.</dd> + <dt>{{ domxref("Element.undoScope")}} {{experimental_inline}}</dt> + <dd>É a {{jsxref("Boolean")}} indicando se o elemento é um anular hospedagem de escopo, ou não.</dd> +</dl> + +<h3 id="Handlers" name="Handlers">Manipuladores de Eventos</h3> + +<dl> + <dt>{{ domxref("Element.ongotpointercapture") }}</dt> + <dd>…</dd> + <dt>{{ domxref("Element.onlostpointercapture") }}</dt> + <dd>…</dd> + <dt>{{ domxref("Element.onwheel") }} {{ non-standard_inline() }}</dt> + <dd>Retorna o código de manipulação de evento para o evento <code>wheel</code>.</dd> +</dl> + +<h2 id="Methods" name="Methods">Métodos</h2> + +<p><em>Herda métodos de seus parentes {{domxref("Node")}}, e seu proprío parente, {{domxref("EventTarget")}}<em>, e implementa aqueles de {{domxref("ParentNode")}}, {{domxref("ChildNode")}}<em>, {{domxref("NonDocumentTypeChildNode")}}, e</em></em> {{domxref("Animatable")}}.</em></p> + +<dl> + <dt>{{ domxref("EventTarget.addEventListener()") }}</dt> + <dd>Registra um manipulador de evento para um tipo específico de evento no elemento.</dd> + <dt>{{ domxref("Element.closest()")}} {{experimental_inline}}</dt> + <dd>Retorna o {{domxref("Element")}}, descendente deste elemento(ou este elemento em si), que é o ancestral mais próximo dos elementos selecionados pelos seletores dados no parâmetro.</dd> + <dt>{{ domxref("Element.createShadowRoot()")}} {{experimental_inline}}</dt> + <dd>…</dd> + <dt>{{ domxref("EventTarget.dispatchEvent()") }}</dt> + <dd>Despacha um evento para este nó no DOM e retorna um {{jsxref("Boolean")}} que indica que pelo menos um manipulador não o cancelou.</dd> + <dt>{{domxref("Element.find()")}}{{experimental_inline}}</dt> + <dd>...</dd> + <dt>{{domxref("Element.findAll()")}}{{experimental_inline}}</dt> + <dd>...</dd> + <dt>{{domxref("Animatable.getAnimationPlayers()")}} {{experimental_inline}}</dt> + <dd>…</dd> + <dt>{{ domxref("Element.getAttribute()") }}</dt> + <dd>Recupera o valor do atributo nomeado do nó atual e o retorna como um {{jsxref("Object")}}.</dd> + <dt>{{ domxref("Element.getAttributeNS()") }}</dt> + <dd>Recupera o valor do atributo com o nome especificado e <a href="/pt-BR/docs/Mozilla/Tech/XUL/Namespaces">namespace</a>, do nó atual e o retorna como um {{jsxref("Object")}}.</dd> + <dt>{{ domxref("Element.getAttributeNode()") }} {{obsolete_inline}}</dt> + <dd>Recupera a representação do nó de um atributo nomeado do nó atual e o retorna como um {{ domxref("Attr") }}.</dd> + <dt>{{ domxref("Element.getAttributeNodeNS()") }} {{obsolete_inline}}</dt> + <dd>Recupera a representação de nó do atributo com o nome especificado e <a href="/pt-BR/docs/Mozilla/Tech/XUL/Namespaces">namespace</a>, do nó atual e o retorna como um {{ domxref("Attr") }}.</dd> + <dt>{{ domxref("Element.getBoundingClientRect()") }}<code> </code>{{experimental_inline}}</dt> + <dd>...</dd> + <dt>{{ domxref("Element.getClientRects()") }} {{experimental_inline}} TYPE of returnvalue????</dt> + <dd>Retorna uma coleção de retângulos que indicam os retângulos delimitadores para cada linha de texto em um cliente.</dd> + <dt>{{domxref("Element.getDestinationInsertionPoints()")}} {{experimental_inline}}</dt> + <dd>…</dd> + <dt>{{ domxref("Element.getElementsByClassName()") }}</dt> + <dd>Retorna um {{ domxref("HTMLCollection") }} vivo que contêm todos os descendentes do elemento atual que possui a lista de classes dadas no parâmetro.</dd> + <dt>{{ domxref("Element.getElementsByTagName()") }}</dt> + <dd>Retorna um {{ domxref("HTMLCollection") }} vivo contendo todos os elementos descendentes, de uma etiqueta de nome particular, do elemento atual.</dd> + <dt>{{ domxref("Element.getElementsByTagNameNS()") }}</dt> + <dd>Retorna um {{ domxref("HTMLCollection") }} vivo contendo todos os elementos descendentes, de uma etiqueta de nome particular e <a href="/pt-BR/docs/Mozilla/Tech/XUL/Namespaces">namespace</a>, do elemento atual.</dd> + <dt>{{ domxref("Element.hasAttribute()") }}</dt> + <dd>Retorna um {{jsxref("Boolean")}} indicando se o elemento tem o atributo especificado ou não.</dd> + <dt>{{ domxref("Element.hasAttributeNS()") }}</dt> + <dd>Retorna um {{jsxref("Boolean")}} indicando se o elemento tem um atributo especificado, no <a href="/pt-BR/docs/Mozilla/Tech/XUL/Namespaces">namespace</a> especificado, ou não.</dd> + <dt>{{ domxref("Element.insertAdjacentHTML") }} {{experimental_inline}}</dt> + <dd>Analisa o texto como HTML ou XML e insere os nós resultantes na árvore em dada posição.</dd> + <dt>{{ domxref("Element.matches()") }}<code> </code>{{experimental_inline}}</dt> + <dd>Retorna um {{jsxref("Boolean")}} indicando se o elemento seria ou não selecionado pelo seletor de string specificada.</dd> + <dt>{{ domxref("Element.querySelector()") }}</dt> + <dd>Retorna {{ domxref("Node") }}...</dd> + <dt>{{ domxref("Element.querySelectorAll") }}</dt> + <dd>Retorna um {{ domxref("NodeList") }}...</dd> + <dt>{{ domxref("Element.releasePointerCapture")}} {{experimental_inline}}</dt> + <dd>…</dd> + <dt>{{domxref("ChildNode.remove()")}}</dt> + <dd>Remove o elemento da lista de filhos de seu parente.</dd> + <dt>{{ domxref("Element.removeAttribute()") }}</dt> + <dd>Remove um atributo nomeado do nó atual.</dd> + <dt>{{ domxref("Element.removeAttributeNS()") }}</dt> + <dd>Remove o atributo com o nome especificado ou <a href="/pt-BR/docs/Mozilla/Tech/XUL/Namespaces">namespace</a>, do nó atual.</dd> + <dt>{{ domxref("Element.removeAttributeNode()") }} {{obsolete_inline}}</dt> + <dd>Remove a representação do nó do atributo nomeado do nó atual.</dd> + <dt>{{ domxref("EventTarget.removeEventListener()") }}</dt> + <dd>Remove um ouvinte de eventos do elemento.</dd> + <dt>{{ domxref("Element.requestFullscreen()") }} {{experimental_inline}}</dt> + <dd>Assíncronamente pede o navegador para fazer o elemento tela cheia.</dd> + <dt>{{ domxref("Element.requestPointerLock()")}} {{experimental_inline}}</dt> + <dd>Permite assíncronamente pedir pelo apontador para ser bloqueado em um dado elemento.</dd> +</dl> + +<dl> + <dt>{{ domxref("Element.scrollIntoView()") }} {{experimental_inline}}</dt> + <dd>Rola a página até que o elemento apareça na visão.</dd> + <dt>{{ domxref("Element.setAttribute()") }}</dt> + <dd>Define o valor de um atributo nomeado do nó atual.</dd> + <dt>{{ domxref("Element.setAttributeNS()") }}</dt> + <dd>Define o valor do atributo com o nome especificado e <a href="/pt-BR/docs/Mozilla/Tech/XUL/Namespaces">namespace</a>, do nó atual.</dd> + <dt>{{ domxref("Element.setAttributeNode()") }} {{obsolete_inline}}</dt> + <dd>Define a representação do nó de um atributo nomeado do nó atual.</dd> + <dt>{{ domxref("Element.setAttributeNodeNS()") }} {{obsolete_inline}}</dt> + <dd>Define a representação do nó do atributo com o nome especificado e <a href="/pt-BR/docs/Mozilla/Tech/XUL/Namespaces">namespace</a>, do nó atual.</dd> + <dt>{{ domxref("Element.setCapture()") }} {{non-standard_inline}}</dt> + <dd>Define a captura de evento do mouse, redirecionando todos os eventos de mouse para este elemento.</dd> + <dt>{{domxref("Element.setPointerCapture()")}}</dt> + <dd>…</dd> +</dl> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Web Animations", '', '')}}</td> + <td>{{Spec2("Web Animations")}}</td> + <td>Adicionado o método <code>getAnimationPlayers()</code>.</td> + </tr> + <tr> + <td>{{SpecName('Undo Manager', '', 'Element')}}</td> + <td>{{Spec2('Undo Manager')}}</td> + <td>Adicionadas as propriedades <code>undoScope</code> e <code>undoManager</code>.</td> + </tr> + <tr> + <td>{{SpecName('Pointer Events', '#extensions-to-the-element-interface', 'Element')}}</td> + <td>{{Spec2('Pointer Events')}}</td> + <td>Adicionados os seguintes manipuladores de evento: <code>ongotpointercapture</code> e <code>onlostpointercapture</code>.<br> + Adicionados os seguintes métodos: <code>setPointerCapture()</code> e <code>releasePointerCapture()</code>.</td> + </tr> + <tr> + <td>{{SpecName('Selectors API Level 2', '#interface-definitions', 'Element')}}</td> + <td>{{Spec2('Selectors API Level 2')}}</td> + <td>Adicionados os seguintes métodos:<code> matches()</code> (implementado como <code>mozMatchesSelector()</code>), <code>find()</code>, <code>findAll()</code>.</td> + </tr> + <tr> + <td>{{SpecName('Selectors API Level 1', '#interface-definitions', 'Element')}}</td> + <td>{{Spec2('Selectors API Level 1')}}</td> + <td>Adicionados os seguintes métodos: <code>querySelector()</code> e <code>querySelectorAll()</code>.</td> + </tr> + <tr> + <td>{{SpecName('Pointer Lock', 'index.html#element-interface', 'Element')}}</td> + <td>{{Spec2('Pointer Lock')}}</td> + <td>Adicionado o método <code>requestPointerLock()</code>.</td> + </tr> + <tr> + <td>{{SpecName('Fullscreen', '#api', 'Element')}}</td> + <td>{{Spec2('Fullscreen')}}</td> + <td>Adicionado o método <code>requestFullscreen()</code>.</td> + </tr> + <tr> + <td>{{SpecName('DOM Parsing', '#extensions-to-the-element-interface', 'Element')}}</td> + <td>{{Spec2('DOM Parsing')}}</td> + <td>Adicionadas as seguintes propriedades: <code>innerHTML</code>, e <code>outerHTML</code>.<br> + Adicionado o seguinte método: <code>insertAdjacentHTML()</code>.</td> + </tr> + <tr> + <td>{{SpecName('CSSOM View', '#extensions-to-the-element-interface', 'Element')}}</td> + <td>{{Spec2('CSSOM View')}}</td> + <td>Adicionadas as seguintes propriedades: <code>scrollTop</code>, <code>scrollLeft</code>, <code>scrollWidth</code>, <code>scrollHeight</code>, <code>clientTop</code>, <code>clientLeft</code>, <code>clientWidth</code>, e <code>clientHeight</code>.<br> + Adicionados os seguintes métodos: <code>getClientRects()</code>, <code>getBoundingClientRect()</code>, e <code>scrollIntoView()</code>.</td> + </tr> + <tr> + <td>{{SpecName('Element Traversal', '#ecmascript-bindings', 'Element')}}</td> + <td>{{Spec2('Element Traversal')}}</td> + <td>Adicionada herança da interface {{domxref("ElementTraversal")}}.</td> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#interface-element', 'Element')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Removidos os seguintes métodos: <code>closest()</code>, <code>setIdAttribute()</code>, <code>setIdAttributeNS()</code>, e <code>setIdAttributeNode()</code>.<br> + Removida a propriedade <code>schemaTypeInfo</code>.<br> + Modificado o valor de retorno de <code>getElementsByTag()</code> e <code>getElementsByTagNS()</code>.<br> + Movida <code>hasAttributes()</code> da interface <code>Node</code> para esta.</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-745549614', 'Element')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Adicionados os seguintes métodos: <code>setIdAttribute()</code>, <code>setIdAttributeNS()</code>, e <code>setIdAttributeNode()</code>. Estes métodos nunca foram implementados e foram removidos em especificações posteriores.<br> + Adicionada a propriedade <code>schemaTypeInfo</code>. Esta propriedade nunca foi implementada e foi removida em especificações posteriores.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-745549614', 'Element')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>O método <code>normalize()</code> foi movido para {{domxref("Node")}}.</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-core.html#ID-745549614', 'Element')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Definição inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_Navegador">Compatibilidade de Navegador</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>1.0</td> + </tr> + <tr> + <td><code>children</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>7.0 com um bug significativo[1]<br> + 9.0 de acordo com as especificações</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>childElementCount</code>, <code>nextElementSibling</code>, <code>previousElementSibling</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>9.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>firstElementChild</code>, <code>lastElementChild</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>9.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>classList</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.2")}}</td> + <td> </td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>outerHTML</code> {{experimental_inline}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("11")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>clientLeft</code>, <code>clientTop</code> {{experimental_inline}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>getBoundingClientRect()</code>, <code>getClientRects()</code> {{experimental_inline}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>querySelector()</code>, <code>querySelectorAll()</code></td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>8.0</td> + <td>10.0</td> + <td>3.2 (525.3)</td> + </tr> + <tr> + <td><code>insertAdjacentHTML()</code> {{experimental_inline}}</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("8")}}</td> + <td>4.0</td> + <td>7.0</td> + <td>4.0 (527)</td> + </tr> + <tr> + <td><code>setCapture() </code>{{non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("2")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>oncopy</code>, <code>oncut</code>, <code>onpaste</code> {{non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td> </td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>onwheel</code> {{non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("17")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>ongotpointercapture</code>, <code>onlostpointercapture</code>, <code>setPointerCapture()</code>, e <code>releasePointerCapture()</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10.0 {{property_prefix("MS")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>matches()</code> {{experimental_inline}}</td> + <td>{{CompatVersionUnknown}} com o nome não padrão <code>webkitMatchesSelector</code></td> + <td>{{CompatGeckoDesktop("1.9.2")}} com o nome não padrão <code>mozMatchesSelector</code><br> + {{CompatGeckoDesktop("34")}} com o nome padrão</td> + <td>9.0 com o nome não padrão <code>msMatchesSelector</code></td> + <td>11.5 com o nome não padrão <code>oMatchesSelector</code><br> + 15.0 com o nome não padrão <code>webkitMatchesSelector</code></td> + <td>5.0 com o nome não padrão <code>webkitMatchesSelector</code></td> + </tr> + <tr> + <td><code>find()</code> e <code>findAll()</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>requestPointerLock()</code></td> + <td>16.0 {{property_prefix("webkit")}}, atrás de um about:flags<br> + 22.0 {{property_prefix("webkit")}} (com casos especiais, levantados progressivamente, veja [2])</td> + <td>{{CompatGeckoDesktop("14")}}{{property_prefix("moz")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>requestFullscreen()</code></td> + <td>14.0 {{property_prefix("webkit")}}</td> + <td>{{CompatGeckoDesktop("10")}} {{property_prefix("moz")}}</td> + <td>11.0 {{property_prefix("ms")}}</td> + <td>12.10<br> + 15.0 {{property_prefix("webkit")}}</td> + <td>5.1 {{property_prefix("webkit")}}</td> + </tr> + <tr> + <td><code>undoManager</code> e <code>undoScope</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}} (atrás do pref <code>dom.undo_manager.enabled</code>)</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>attributes</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("22")}}<br> + Antes era disponível via interface {{domxref("Node")}} que qualquer <code>element</code> herda.</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>scrollTopMax()</code> e <code>scrollLeftMax()</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("16")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>closest()</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("35")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>hasAttributes()</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}} (na interface {{domxref("Node")}})<br> + {{CompatGeckoDesktop("35")}} (nesta interface)</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>1.0</td> + <td>{{CompatGeckoMobile("1")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>1.0</td> + </tr> + <tr> + <td><code>scrollTopMax()</code> and <code>scrollLeftMax()</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("16")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>closest()</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("35")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>hasAttributes()</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}} (na interface {{domxref("Node")}})<br> + {{CompatGeckoMobile("35")}} (nesta interface)</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Internet Explorer 7 e 8 incorretamente retorna os comentários como parte do filho de um Element. Isto está fixado no Internet Explorer 9 e posterior.</p> + +<p>[2] Chrome 16 permitiu <code>webkitRequestPointerLock()</code> somente em tela cheia; Chrome 21 para website confiável(com permissão do usuário); Chrome 22 permitiu por padrão para todos documentos de mesma origem; Chrome 23 permitiu em testes em ambientes locais {{HTMLElement("iframe")}} se o valor não padrão <code>webkit-allow-pointer-lock</code> é definido para o atributo {{htmlattrxref("sandbox", "iframe")}}.</p> diff --git a/files/pt-br/web/api/element/innerhtml/index.html b/files/pt-br/web/api/element/innerhtml/index.html new file mode 100644 index 0000000000..f9ba30f9cf --- /dev/null +++ b/files/pt-br/web/api/element/innerhtml/index.html @@ -0,0 +1,148 @@ +--- +title: Element.innerHTML +slug: Web/API/Element/innerHTML +tags: + - API + - DOM + - Gecko + - NeedsBrowserCompatibility + - Propriedade + - Referência(2) +translation_of: Web/API/Element/innerHTML +--- +<p>{{APIRef("DOM")}}</p> + +<p>A propriedade <strong><code>Element.innerHTML</code></strong> define ou obtém a sintaxe HTML ou XML descrevendo os elementos descendentes.</p> + +<div class="note"><strong>Nota: </strong>Se um nó {{HTMLElement("div")}}, {{HTMLElement("span")}}, ou {{HTMLElement("noembed")}} tem um nó filho que inclui os caracteres (&), (<), ou (>), o innerHTML retornará esses caracteres como &amp, &lt e &gt respectivamente. Utilize {{domxref("Node.textContent")}} para recuperar uma cópia correta do conteúdo desses nós de texto.</div> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="syntaxbox notranslate"><em>var content</em> = <em>element</em>.innerHTML;</pre> + +<p>No retorno, <code>content</code> contém o código HTML serializado descrevendo todos os descendentes dos elementos.</p> + +<pre class="syntaxbox notranslate"><em> element</em>.innerHTML = content;</pre> + +<p>Remove todos os elementos filhos, analisa o conteúdo da string e atribui os nós resultantes como filhos do elemento.</p> + +<h3 id="Exceptions">Exceptions</h3> + +<dl> + <dt><strong><code>SyntaxError</code></strong></dt> + <dd>Foi feita uma tentativa de definir o valor de um <code>innerHTML</code> usando uma string que não é HTML.</dd> + <dt><code>NoModificationAllowedError</code></dt> + <dd>Foi feita uma tentativa de inserir HTML dentro de um nó no qual o pai é um {{domxref("Document")}}.</dd> +</dl> + +<h2 id="Example" name="Example">Exemplo</h2> + +<pre class="brush: html notranslate"><html> +<head></head> +<body> + +<div id="txt"> + <script id="txt0"> x=0 </script> + <noembed id="txt1"> 1 </noembed> + <noframes id="txt2"> 2 </noframes> + <noscript id="txt3"> 3 </noscript> + <div id="txt4"> 4 </div> + <div> + <noscript id="txt5"> 5 </noscript> + </div> + <span id="txt6"> 6 </span> + </div> + + <div id="innerHTMLtxt"></div> +<div id="textContenttxt"><div> + +<script> +for (i = 0; i < 7; i++) { + x = "txt" + i; + document.getElementById(x).firstChild.nodeValue = '&<>'; +} + +document.getElementById("innerHTMLtxt").textContent = document.getElementById("txt").innerHTML +document.getElementById("textContenttxt").textContent = document.getElementById("txt").textContent +</script> + +<body> +</html></pre> + +<pre class="brush: js notranslate">// HTML: +// <div id="d"><p>Content</p> +// <p>Further Elaborated</p> +// </div> + +const d = document.getElementById("d"); +dump(d.innerHTML); + +// a string "<p>Content</p><p>Further Elaborated</p>" +// é exibida na janela do console +</pre> + +<h2 id="Notes" name="Notes">Notas</h2> + +<p>Essa propriedade fornece uma forma simples de trocar completamente o conteúdo de um elemento. Por exemplo, o conteúdo inteiro do elemento body pode ser excluído ao fazer:</p> + +<pre class="brush: js notranslate">// Troca o conteúdo de body por uma string vazia. +document.body.innerHTML = ""; </pre> + +<p>A propriedade <code>innerHTML</code> de vários tipos de elementos — incluindo {{HTMLElement("body")}} ou {{HTMLElement("html")}} — pode ser retornada ou trocada. Essa também pode ser usada para ver o código fonte de uma página que foi modificada dinamicamente:</p> + +<pre class="brush: js notranslate">// Copie e cole este código, em uma única linha, na barra de endereços +javascript:"<pre>"+document.documentElement.innerHTML.replace(/</g,"&lt;") + "</pre>"; +</pre> + +<p>Essa propriedade foi implementada inicialmente pelos navegadores web, e então especificada pela WHATWG e W3C no HTML5. Implementações antigas talvez não tenham implementado-a exatamente da mesma forma. Por exemplo, quando um texto é inserido em uma caixa de texto, o Internet Explorer muda o valor do atributo innerHTML dessa entrada, mas os navegadores Gecko não.</p> + +<h3 id="Considerações_de_segurança">Considerações de segurança</h3> + +<p>Não é incomum ver a propriedade innerHTML usada para inserir texto em uma página web. Isso vem com um risco de segurança.</p> + +<pre class="brush: js notranslate">var name = "John"; + +// presumindo que el é um elemento DOM HTML +el.innerHTML = name; // inofensivo, nesse caso + +// ... + +name = "<script>alert('I am John in an annoying alert!')</script>"; +el.innerHTML = name; // inofensivo, nesse caso</pre> + +<p>Embora isso talvez se pareça como um ataque {{interwiki("wikipedia", "cross-site scripting")}}, o resultado é inofensivo. O HTML5 especifica que uma tag {{HTMLElement("script")}}, inserida via <code>innerHTML</code>, <a href="http://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0" title="http://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0">não deve ser executada</a>.</p> + +<p>No entanto, há formas de se executar JavaScript sem usar elementos {{HTMLElement("script")}}, por isso ainda há um risco de segurança sempre que você usa <code>innerHTML</code> para definir uma string sobre a qual você não tem controle. Por exemplo:</p> + +<pre class="brush: js notranslate" style="font-size: 14px;">const name = "<img src='x' onerror='alert(1)'>"; +el.innerHTML = name; // exibe uma caixa de alerta</pre> + +<p>Por essa razão, recomenda-se que você não use o <code>innerHTML</code> quando estiver inserindo texto puro; como alternativa, utilize {{domxref("node.textContent")}}. Isso não interpreta o conteúdo passado como HTML, mas em vez disso, insere-o como texto puro.</p> + +<h2 id="Specification" name="Specification">Especificação</h2> + +<table class="standard-table"> + <thead> + <tr style="background-color: rgb(255, 204, 255);"> + <th scope="col">Especificação</th> + <th scope="col">Estado</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM Parsing', '#widl-Element-innerHTML', 'Element.innerHTML')}}</td> + <td>{{ Spec2('DOM Parsing') }}</td> + <td>Definição inicial</td> + </tr> + </tbody> +</table> + +<h2 id="See_also" name="See_also">Veja também</h2> + +<ul> + <li><a class="external" href="http://innerdom.sourceforge.net/"><code>innerDOM</code></a> - Para aqueles que desejam aderir aos padrões, aqui oferece um conjunto de funções JavaScript para serializar ou analisar XML, de modo a configurar o conteúdo do elemento definido como uma string(s) através do DOM ou recuperando o conteúdo do elemento obtido a partir do DOM como uma string.</li> + <li><a href="/en-US/docs/DOM/Element.insertAdjacentHTML" title="/en-US/docs/DOM/Element.insertAdjacentHTML">insertAdjacentHTML</a> - Uma alternativa para o innerHTML, permitindo você anexar um novo HTML, ao invés de trocá-la.</li> + <li><a class="external" href="http://code.google.com/p/jssaxparser/" title="http://code.google.com/p/jssaxparser/">jssaxparser</a> - Uma solução mais robusta (embora mais pesada) do innerDOM (suporta análise com namespaces, atributos com aspas simples, seções CDATA, etc.), esse é o analisador SAX2 quando usado com seu manipulador de conteúdo DOM. (Oferece String para DOM; DOM para String é <a class="external" href="http://code.assembla.com/brettz9/subversion/nodes/DOMToString" title="http://code.assembla.com/brettz9/subversion/nodes/DOMToString">significantemente mais fácil</a>)</li> + <li>Considerações de eficiência: Em <a class="external" href="http://www.quirksmode.org/dom/innerhtml.html" title="http://www.quirksmode.org/dom/innerhtml.html">quirksmode</a></li> +</ul> diff --git a/files/pt-br/web/api/element/insertadjacenthtml/index.html b/files/pt-br/web/api/element/insertadjacenthtml/index.html new file mode 100644 index 0000000000..89a0bbdfcc --- /dev/null +++ b/files/pt-br/web/api/element/insertadjacenthtml/index.html @@ -0,0 +1,138 @@ +--- +title: Element.insertAdjacentHTML() +slug: Web/API/Element/insertAdjacentHTML +translation_of: Web/API/Element/insertAdjacentHTML +--- +<div>{{APIRef("DOM")}}</div> + +<h2 id="Summary" name="Summary">Resumo</h2> + +<p><code>insertAdjacentHTML </code>analisa o texto especificado como HTML ou XML e insere os nós que resultam na árvore DOM em uma posição especificada. Não reanalisa o elemento que está a ser utilizado e, portanto, não corrompe os elementos existentes dentro do elemento. Esta, e evitando a etapa extra de serialização, torna-o muito mais rápido do que a manipulação direta innerHTML.</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre><em>element</em>.insertAdjacentHTML(<em>posição</em>, <em>texto</em>);</pre> + +<p><strong><code>Posição</code></strong> é a posição em relação ao elemento, e deve ser um dos seguintes tipos:</p> + +<dl> + <dt><code>'beforebegin'</code></dt> + <dd>Antes do elemento.</dd> + <dt><code>'afterbegin'</code></dt> + <dd>Dentro do elemento, antes de seu primeiro filho (childNode).</dd> + <dt><code>'beforeend'</code></dt> + <dd>Dentro do elemento, após seu último filho (childNode) .</dd> + <dt><code>'afterend'</code></dt> + <dd>Após o elemento.</dd> +</dl> + +<p><code><strong>texto</strong> </code>é a string a ser analisada como HTML ou XML e inserido na árvore.</p> + +<h3 id="Visualização_da_posição_de_nomes">Visualização da posição de nomes</h3> + +<pre class="brush: html"><!-- beforebegin --> +<p> +<!-- afterbegin --> +foo +<!-- beforeend --> +</p> +<!-- afterend --></pre> + +<div class="note"><strong>Nota:</strong> As posições beforeBegin e afterEnd funcionam apenas se o nó está em uma árvore DOM e tem um elemento pai.</div> + +<h2 id="Example" name="Example">Exemplo</h2> + +<pre class="brush: js">// Estrutura inicial: +// <div id="one">one</div> + +var d1 = document.getElementById('one'); +d1.insertAdjacentHTML('afterend', '<div id="two">two</div>'); + +// Neste ponto, a nova estrutura é: +// <div id="one">one</div> +// <div id="two">two</div></pre> + +<h2 id="Specification" name="Specification">Especificação</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM Parsing', '#insertadjacenthtml()', 'Element.insertAdjacentHTML()')}}</td> + <td>{{ Spec2('DOM Parsing') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidade de Navegadores</h2> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility"><span style="font-size: 14px; font-weight: normal; line-height: 1.5;">{{ CompatibilityTable() }}</span></h2> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>1.0</td> + <td>{{ CompatGeckoDesktop("8.0") }}</td> + <td>4.0*</td> + <td>7.0</td> + <td>4.0 (527)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th> Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile("8.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> + +<p> </p> + +<h3 id="Questão_no_IE">Questão no IE:</h3> + +<ul> + <li>No IE8, as mudanças no dom são feitas somente depois do JS ter terminado de carregar, então se você precisa acessar os nós gerados, terá que fazê-lo de uma forma assíncrona.</li> +</ul> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{domxref("Node.insertBefore()")}}</li> + <li>{{domxref("Node.appendChild()")}} (mesmo efeito de <code>beforeend</code>)</li> + <li><a class="external" href="http://hacks.mozilla.org/2011/11/insertadjacenthtml-enables-faster-html-snippet-injection/">hacks.mozilla.org guest post</a><span class="external"> por Henri Sivonen incluem benchmarks que demonstram que insertAdjacentHTML pode ser bem rápido em alguns casos.</span></li> +</ul> diff --git a/files/pt-br/web/api/element/matches/index.html b/files/pt-br/web/api/element/matches/index.html new file mode 100644 index 0000000000..06ce8b5c31 --- /dev/null +++ b/files/pt-br/web/api/element/matches/index.html @@ -0,0 +1,165 @@ +--- +title: Element.matches() +slug: Web/API/Element/matches +translation_of: Web/API/Element/matches +--- +<div>{{APIRef("DOM")}}</div> + +<p>O método <strong><code>Element.matches()</code></strong> retorna verdadeiro se o elemento puder ser selecionado pela sequência de caracteres específica; caso contrário retorna falso.</p> + +<div class="warning"> +<p>Diversos navegadores implementam isto, prefixado, sob nome não padronizado <code>matchesSelector()</code>.</p> +</div> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox"><em>var result</em> = <em>element</em>.matches(selectorString); +</pre> + +<ul> + <li><code>result contém o valor de retorno true ou false.</code></li> + <li><code>selectorString</code> é uma string representando o seletor para teste.</li> +</ul> + +<h2 id="Exemplo">Exemplo</h2> + +<pre class="brush: html"><ul id="birds"> + <li>Orange-winged parrot</li> + <li class="endangered">Philippine eagle</li> + <li>Great white pelican</li> +</ul> + +<script type="text/javascript"> + var birds = document.getElementsByTagName('li'); + + for (var i = 0; i < birds.length; i++) { + if (birds[i].matches('.endangered')) { + console.log('The ' + birds[i].textContent + ' is endangered!'); + } + } +</script> +</pre> + +<p>Isto irá logar "The Philippine eagle is endangered!" para o console, desde que o elemento tenha de fato um atributo de classe com o valor <code>endangered</code>.</p> + +<h2 id="Exceções">Exceções</h2> + +<dl> + <dt><code>SYNTAX_ERR</code></dt> + <dd>O seletor de string específico é inválido.</dd> +</dl> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Para navegadores que não suportam <code>Element.matches()</code> ou <code>Element.matchesSelector()</code>, mass possuem suporte para <code>document.querySelectorAll()</code>, existe um polyfill:</p> + +<pre>if (!Element.prototype.matches) { + Element.prototype.matches = + Element.prototype.matchesSelector || + Element.prototype.mozMatchesSelector || + Element.prototype.msMatchesSelector || + Element.prototype.oMatchesSelector || + Element.prototype.webkitMatchesSelector || + function(s) { + var matches = (this.document || this.ownerDocument).querySelectorAll(s), + i = matches.length; + while (--i >= 0 && matches.item(i) !== this) {} + return i > -1; + }; +}</pre> + +<h2 id="Especificação">Especificação</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-element-matches', 'Element.prototype.matches')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_navegador">Compatibilidade de navegador</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Original support with a non-standard name</td> + <td> + <p>{{CompatVersionUnknown}}<sup>[1]</sup></p> + </td> + <td>{{CompatGeckoDesktop("1.9.2")}}<sup>[2]</sup></td> + <td>9.0<sup>[3]</sup></td> + <td>11.5<sup>[4]</sup><br> + 15.0<sup>[1]</sup></td> + <td>5.0<sup>[1]</sup></td> + </tr> + <tr> + <td>Specified version</td> + <td>{{CompatChrome("34")}}</td> + <td>{{CompatGeckoDesktop("34")}}</td> + <td>{{CompatUnknown}}</td> + <td>21.0</td> + <td>7.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Original support with a non-standard name</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("1.9.2")}}<sup>[2]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Specified version</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("34")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>8</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Esta feature foi implementada com o nome não padronizado <code>webkitMatchesSelector</code>.</p> + +<p>[2] Esta feature foi implementada com o nome não padronizado <code>mozMatchesSelector</code>. Anteriormente para o Gecko 2.0, seletores de string inválido faziam com que retornasse false ao invés de empurrar uma exceção.</p> + +<p>[3] Esta feature foi implementada com o nome não padronizado <code>msMatchesSelector</code>.</p> + +<p>[4] Esta feature foi implementada com o nome não padronizado <code>oMatchesSelector</code>.</p> diff --git a/files/pt-br/web/api/element/mousedown_event/index.html b/files/pt-br/web/api/element/mousedown_event/index.html new file mode 100644 index 0000000000..bbddbff605 --- /dev/null +++ b/files/pt-br/web/api/element/mousedown_event/index.html @@ -0,0 +1,235 @@ +--- +title: mousedown +slug: Web/API/Element/mousedown_event +tags: + - API + - DOM + - Interface + - NeedsSpecTable + - Reference + - events +translation_of: Web/API/Element/mousedown_event +--- +<div>{{APIRef}}</div> + +<p>O evento <code>mousedown</code> é ativado quando um botão de um dispositivo apontador é pressionado sobre um elemento.</p> + +<h2 id="Informação_geral">Informação geral</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Especificação</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mousedown">DOM L3</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("MouseEvent")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt> + <dd style="margin: 0 0 0 120px;">Sim</dd> + <dt style="float: left; text-align: right; width: 120px;">Cancelável</dt> + <dd style="margin: 0 0 0 120px;">Sim</dd> + <dt style="float: left; text-align: right; width: 120px;">Alvo</dt> + <dd style="margin: 0 0 0 120px;">Elemento</dd> + <dt style="float: left; text-align: right; width: 120px;">Ação Padrão</dt> + <dd style="margin: 0 0 0 120px;">Varia: Inicia um operação de arrastar/soltar; inicia a seleção de texto; inicia a interação de rolagem/arrastar (junto do botão do meio do mouse, se suportado)</dd> +</dl> + +<h2 id="Propriedades">Propriedades</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td> + <p>O alvo do evento (o alvo mais alto na árvore do DOM).</p> + </td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>O tipo de evento</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>Boolean</td> + <td>Whether the event normally bubbles or not</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td><code>Boolean</code></td> + <td>O evento é cancelável ou não?</td> + </tr> + <tr> + <td><code>view</code> {{readonlyInline}}</td> + <td>{{domxref("WindowProxy")}}</td> + <td>{{domxref("document.defaultView")}} (<code>window</code> do documento)</td> + </tr> + <tr> + <td><code>detail</code> {{readonlyInline}}</td> + <td><code>long</code> (<code>float</code>)</td> + <td> + <p>Um número de cliques consecutivos que aconteceu num pequeno espaço de tempo, acrescido em um.</p> + </td> + </tr> + <tr> + <td><code>currentTarget</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>O nó que teve o listener do evento anexado.</td> + </tr> + <tr> + <td><code>relatedTarget</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>Para os eventos <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> e <code>mouseleave</code>: o alvo do evento complementar (o alvo do <code>mouseleave</code> no caso de um evento <code>mouseenter</code>). Caso contrário, <code>null</code>.</td> + </tr> + <tr> + <td><code>screenX</code> {{readonlyInline}}</td> + <td>long</td> + <td>A coordenada X do mouse baseada nas coordenadas globais (tela).</td> + </tr> + <tr> + <td><code>screenY</code> {{readonlyInline}}</td> + <td>long</td> + <td>A coordenada Y do mouse baseada nas coordenadas globais (tela).</td> + </tr> + <tr> + <td><code>clientX</code> {{readonlyInline}}</td> + <td>long</td> + <td>A coordenada X do ponteiro do mouse baseada nas coordenadas locais (conteúdo do DOM).</td> + </tr> + <tr> + <td><code>clientY</code> {{readonlyInline}}</td> + <td>long</td> + <td>A coordenada Y do ponteiro do mouse baseada nas coordenadas locais (conteúdo do DOM).</td> + </tr> + <tr> + <td><code>button</code> {{readonlyInline}}</td> + <td>unsigned short</td> + <td>O número do botão que foi pressionado quando o evento mouse foi ativado: Botão esquerdo = 0, botão do meio = 1 (se presente), botão direito = 2. Para os mouses configurados para uso por canhotos onde as ações do mouse são invertidas, os valores são lidos da direita para a esquerda.</td> + </tr> + <tr> + <td><code>buttons</code> {{readonlyInline}}</td> + <td>unsigned short</td> + <td> + <p>Os botões pressionados que foram pressionados quando o evento do mouse foi ativado: Botão esquerdo = 1, botão direito = 2, botão do meio (roda) = 4, 4º botão (geralmente, o "botão de voltar") = 8, 5º botão (geralmente, o "botão de avançar") = 16. Se dois ou mais botões são pressionados, retorna a soma lógica dos valores. Exemplo: se o Botão esquerdo e o Botão direito são pressionados, retorna 3 (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">Mais informações</a>.</p> + </td> + </tr> + <tr> + <td><code>mozPressure</code> {{readonlyInline}}</td> + <td>float</td> + <td>A quantidade de pressão aplicada a um dispositivo touch ou tablet quando o evento estava sendo gerado; este valor varia entre 0.0 (pressão mínima) e 1.0 (pressão máxima).</td> + </tr> + <tr> + <td><code>ctrlKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> se a tecla control estava pressionada quando o evento foi ativado. Caso contrário, <code>false</code>.</td> + </tr> + <tr> + <td><code>shiftKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> se a tecla shift estava pressionada quando o evento foi ativado. Caso contrário, <code>false</code>.</td> + </tr> + <tr> + <td><code>altKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> se a tecla alt estava pressionada quando o evento foi ativado. Caso contrário, <code>false</code>.</td> + </tr> + <tr> + <td><code>metaKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> se a tecla meta estava pressionada quando o evento foi ativado. Caso contrário, <code>false</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_entre_navegadores">Compatibilidade entre navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Edge</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Em elementos desativados</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Em elementos desativados</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Só funciona em elementos {{HTMLElement("textarea")}} e alguns tipos do elemento {{HTMLElement("input")}}.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{Event("mouseup")}}</li> + <li>{{Event("mousemove")}}</li> + <li>{{Event("click")}}</li> + <li>{{Event("dblclick")}}</li> + <li>{{Event("mouseover")}}</li> + <li>{{Event("mouseout")}}</li> + <li>{{Event("mouseenter")}}</li> + <li>{{Event("mouseleave")}}</li> + <li>{{Event("contextmenu")}}</li> +</ul> diff --git a/files/pt-br/web/api/element/mouseenter_event/index.html b/files/pt-br/web/api/element/mouseenter_event/index.html new file mode 100644 index 0000000000..881958914b --- /dev/null +++ b/files/pt-br/web/api/element/mouseenter_event/index.html @@ -0,0 +1,314 @@ +--- +title: mouseenter +slug: Web/API/Element/mouseenter_event +translation_of: Web/API/Element/mouseenter_event +--- +<div>{{APIRef}}</div> + +<p>O evento <code>mouseenter</code> é disparado quando um dispositivo de apontamento (geralmente um mouse) se move sobre um elemento (para dentro do mesmo).</p> + +<p>Similar ao {{event('mouseover')}}, ele se diferencia no fato de que não ocorre a fase <a href="/en-US/docs/Web/API/Event/bubbles">bubble</a> e não é disparado quando o cursor / apontador mover-se do espaço físico de um de seus descendentes para o seu próprio espaço físico.</p> + +<div style="-moz-column-width: 455px; -webkit-column-width: 455px; column-width: 455px; border: solid 1px; padding: 5px; margin-bottom: 10px;"> +<div style="text-align: center;"><img alt="mouseenter.png" class="default internal" src="/@api/deki/files/5908/=mouseenter.png"></div> +Um evento <code>mouseenter</code> é enviado para cada elemento da hierarquia ao entrar neles. Aqui 4 eventos são enviados aos quatro elementos da hierarquia quando o cursor / apontador chega no Text. + +<div style="text-align: center;"><img alt="mouseover.png" class="default internal" src="/@api/deki/files/5909/=mouseover.png"></div> +Um único evento <code>mouseover</code> é enviado ao elemento de maior profundidade na árvore DOM, a partir do qual ocorre a fase bubble e o mesmo percorre subindo na hierarquia dos elementos até que seja cancelado por um <em>handler</em> ou alcance a raíz da árvore.</div> + +<p>De acordo com a profundidade da hierarquia, a quantidade de eventos <code>mouseenter</code> disparados pode se tornar muito grande e causar problemas de performance significativos. Nestes casos é melhor escutar por eventos mouseover.</p> + +<p>Combinado ao comportamento do seu evento simétrico, <code>mouseleave</code>, o evento DOM <code>mouseenter</code> age de modo bastante similar à pseudo-classe CSS {{cssxref(':hover')}}.</p> + +<h2 id="Informações_Gerais">Informações Gerais</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Especificação</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseenter">DOM L3</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0 0 0 120px;">{{domxref('MouseEvent')}}</dd> + <dt style="float: left; text-align: right; width: 120px;">Sincronismo</dt> + <dd style="margin: 0 0 0 120px;">Síncrono</dd> + <dt style="float: left; text-align: right; width: 120px;">Fase Bubble</dt> + <dd style="margin: 0 0 0 120px;">Não</dd> + <dt style="float: left; text-align: right; width: 120px;">Cancelável</dt> + <dd style="margin: 0 0 0 120px;">Não</dd> + <dt style="float: left; text-align: right; width: 120px;">Target</dt> + <dd style="margin: 0 0 0 120px;">Element</dd> + <dt style="float: left; text-align: right; width: 120px;">Ação Padrão</dt> + <dd style="margin: 0 0 0 120px;">Nenhuma</dd> +</dl> + +<h2 id="Propriedades">Propriedades</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>Boolean</td> + <td>Whether the event normally bubbles or not</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td><code>Boolean</code></td> + <td>Whether the event is cancellable or not?</td> + </tr> + <tr> + <td><code>view</code> {{readonlyInline}}</td> + <td>{{domxref("WindowProxy")}}</td> + <td>{{domxref("document.defaultView")}} (<code>window</code> of the document)</td> + </tr> + <tr> + <td><code>detail</code> {{readonlyInline}}</td> + <td><code>long</code> (<code>float</code>)</td> + <td>0.</td> + </tr> + <tr> + <td><code>currentTarget</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>The node that had the event listener attached.</td> + </tr> + <tr> + <td><code>relatedTarget</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>For <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> and <code>mouseleave</code> events: the target of the complementary event (the <code>mouseleave</code> target in the case of a <code>mouseenter</code> event). <code>null</code> otherwise.</td> + </tr> + <tr> + <td><code>screenX</code> {{readonlyInline}}</td> + <td>long</td> + <td>The X coordinate of the mouse pointer in global (screen) coordinates.</td> + </tr> + <tr> + <td><code>screenY</code> {{readonlyInline}}</td> + <td>long</td> + <td>The Y coordinate of the mouse pointer in global (screen) coordinates.</td> + </tr> + <tr> + <td><code>clientX</code> {{readonlyInline}}</td> + <td>long</td> + <td>The X coordinate of the mouse pointer in local (DOM content) coordinates.</td> + </tr> + <tr> + <td><code>clientY</code> {{readonlyInline}}</td> + <td>long</td> + <td>The Y coordinate of the mouse pointer in local (DOM content) coordinates.</td> + </tr> + <tr> + <td><code>button</code> {{readonlyInline}}</td> + <td>unsigned short</td> + <td>The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.</td> + </tr> + <tr> + <td><code>buttons</code> {{readonlyInline}}</td> + <td>unsigned short</td> + <td>The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">More info</a>.</td> + </tr> + <tr> + <td><code>mozPressure</code> {{readonlyInline}}</td> + <td>float</td> + <td>The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).</td> + </tr> + <tr> + <td><code>ctrlKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>shiftKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>altKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>metaKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + </tbody> +</table> + +<h2 id="Examples">Examples</h2> + +<p>The <a href="/en-US/docs/Web/Events/mouseover#Example"><code>mouseover</code> </a>documentation has an example illustrating the difference between <code>mouseover</code> and <code>mouseenter</code>.</p> + +<p>The following example illustrates how to use <code>mouseover</code> to simulate the principle of event delegation for the mouseenter event.</p> + +<pre class="brush: html"><ul id="test"> + <li> + <ul class="enter-sensitive"> + <li>item 1-1</li> + <li>item 1-2</li> + </ul> + </li> + <li> + <ul class="enter-sensitive"> + <li>item 2-1</li> + <li>item 2-2</li> + </ul> + </li> +</ul> + +<script> + var delegationSelector = ".enter-sensitive"; + + document.getElementById("test").addEventListener("mouseover", function( event ) { + var target = event.target, + related = event.relatedTarget, + match; + + // search for a parent node matching the delegation selector + while ( target && target != document && !( match = matches( target, delegationSelector ) ) ) { + target = target.parentNode; + } + + // exit if no matching node has been found + if ( !match ) { return; } + + // loop through the parent of the related target to make sure that it's not a child of the target + while ( related && related != target && related != document ) { + related = related.parentNode; + } + + // exit if this is the case + if ( related == target ) { return; } + + // the "delegated mouseenter" handler can now be executed + // change the color of the text + target.style.color = "orange"; + // reset the color after a small amount of time + setTimeout(function() { + target.style.color = ""; + }, 500); + + + }, false); + + + // function used to check if a DOM element matches a given selector + // the following code can be replaced by this IE8 compatible function: https://gist.github.com/2851541 + function matches( elem, selector ){ + // the matchesSelector is prefixed in most (if not all) browsers + return elem.matchesSelector( selector ); + }; +</script></pre> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>30<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>10<sup>[2]</sup></td> + <td>5.5</td> + <td>{{CompatVersionUnknown}}<br> + {{CompatNo}} 15.0<br> + 17.0</td> + <td>7<sup>[3]</sup></td> + </tr> + <tr> + <td>On disabled form elements</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("44.0")}}<sup>[4]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>On disabled form elements</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Implemented in <a href="https://crbug.com/236215">bug 236215</a>.</p> + +<p>[2] Implemented in {{bug("432698")}}.</p> + +<p>[3] Safari 7 fires the event in many situations where it's not allowed to, making the whole event useless. See <a href="https://crbug.com/470258">bug 470258</a> for the description of the bug (it existed in old Chrome versions as well). Safari 8 has correct behavior</p> + +<p>[4] Implemented in {{bug("218093")}}.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{Event("mousedown")}}</li> + <li>{{Event("mouseup")}}</li> + <li>{{Event("mousemove")}}</li> + <li>{{Event("click")}}</li> + <li>{{Event("dblclick")}}</li> + <li>{{Event("mouseover")}}</li> + <li>{{Event("mouseout")}}</li> + <li>{{Event("mouseenter")}}</li> + <li>{{Event("mouseleave")}}</li> + <li>{{Event("contextmenu")}}</li> +</ul> diff --git a/files/pt-br/web/api/element/mouseover_event/index.html b/files/pt-br/web/api/element/mouseover_event/index.html new file mode 100644 index 0000000000..f4a5c56a9e --- /dev/null +++ b/files/pt-br/web/api/element/mouseover_event/index.html @@ -0,0 +1,262 @@ +--- +title: mouseover +slug: Web/API/Element/mouseover_event +translation_of: Web/API/Element/mouseover_event +--- +<p>O evento <code>mouseover</code> é acionado quando um dispositivo ponteiro é movido para o elemento que esteja escutando ou para um de seus filhos.</p> + +<h2 id="Informações_Gerais">Informações Gerais</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Especificação</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseover" title="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseover">DOM L3</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("MouseEvent")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt> + <dd style="margin: 0 0 0 120px;">Sim</dd> + <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt> + <dd style="margin: 0 0 0 120px;">Sim</dd> + <dt style="float: left; text-align: right; width: 120px;">Alvo</dt> + <dd style="margin: 0 0 0 120px;">Element</dd> + <dt style="float: left; text-align: right; width: 120px;">Ação Padrão</dt> + <dd style="margin: 0 0 0 120px;">None</dd> +</dl> + +<h2 id="Propriedades">Propriedades</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>O evento alvo(o mais alto alvo na arvore do DOM).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>Boolean</td> + <td>Whether the event normally bubbles or not</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td><code>Boolean</code></td> + <td>Whether the event is cancellable or not</td> + </tr> + <tr> + <td><code>view</code> {{readonlyInline}}</td> + <td>{{domxref("WindowProxy")}}</td> + <td>{{domxref("document.defaultView")}} (<code>window</code> of the document)</td> + </tr> + <tr> + <td><code>detail</code> {{readonlyInline}}</td> + <td><code>long</code> (<code>float</code>)</td> + <td>0.</td> + </tr> + <tr> + <td><code>currentTarget</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>The node that had the event listener attached.</td> + </tr> + <tr> + <td><code>relatedTarget</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>For <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> and <code>mouseleave</code> events: the target of the complementary event (the <code>mouseleave</code> target in the case of a <code>mouseenter</code> event). <code>null</code> otherwise.</td> + </tr> + <tr> + <td><code>screenX</code> {{readonlyInline}}</td> + <td>long</td> + <td>The X coordinate of the mouse pointer in global (screen) coordinates.</td> + </tr> + <tr> + <td><code>screenY</code> {{readonlyInline}}</td> + <td>long</td> + <td>The Y coordinate of the mouse pointer in global (screen) coordinates.</td> + </tr> + <tr> + <td><code>clientX</code> {{readonlyInline}}</td> + <td>long</td> + <td>The X coordinate of the mouse pointer in local (DOM content) coordinates.</td> + </tr> + <tr> + <td><code>clientY</code> {{readonlyInline}}</td> + <td>long</td> + <td>The Y coordinate of the mouse pointer in local (DOM content) coordinates.</td> + </tr> + <tr> + <td><code>button</code> {{readonlyInline}}</td> + <td>unsigned short</td> + <td>This is always 0 as no button presses trigger this event (mouse movement does).</td> + </tr> + <tr> + <td><code>buttons</code> {{readonlyInline}}</td> + <td>unsigned short</td> + <td>The buttons depressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are depressed, returns the logical sum of the values. E.g., if Left button and Right button are depressed, returns 3 (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">More info</a>.</td> + </tr> + <tr> + <td><code>mozPressure</code> {{readonlyInline}}</td> + <td>float</td> + <td>The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).</td> + </tr> + <tr> + <td><code>ctrlKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>shiftKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>altKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>metaKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + </tbody> +</table> + +<h2 id="Example">Example</h2> + +<p>The following example illustrates the difference between <code>mouseover</code> and <a href="/en-US/docs/Web/Events/mouseenter" title="/en/Mozilla_event_reference/mouseenter"><code>mouseenter</code></a> events.</p> + +<pre class="brush: html"><ul id="test"> + <li>item 1</li> + <li>item 2</li> + <li>item 3</li> +</ul> + +<script> + var test = document.getElementById("test"); + + + // this handler will be executed only once when the cursor moves over the unordered list + test.addEventListener("mouseenter", function( event ) { + // highlight the mouseenter target + event.target.style.color = "purple"; + + // reset the color after a short delay + setTimeout(function() { + event.target.style.color = ""; + }, 500); + }, false); + + + // this handler will be executed every time the cursor is moved over a different list item + test.addEventListener("mouseover", function( event ) { + // highlight the mouseover target + event.target.style.color = "orange"; + + // reset the color after a short delay + setTimeout(function() { + event.target.style.color = ""; + }, 500); + }, false); +</script> +</pre> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Edge</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>On disabled form elements</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatGeckoDesktop("44.0")}}<sup>[2]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>On disabled form elements</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Only works for {{HTMLElement("textarea")}} elements and some {{HTMLElement("input")}} element types.</p> + +<p>[2] Implemented in {{bug("218093")}}.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{Event("mousedown")}}</li> + <li>{{Event("mouseup")}}</li> + <li>{{Event("mousemove")}}</li> + <li>{{Event("click")}}</li> + <li>{{Event("dblclick")}}</li> + <li>{{Event("mouseover")}}</li> + <li>{{Event("mouseout")}}</li> + <li>{{Event("mouseenter")}}</li> + <li>{{Event("mouseleave")}}</li> + <li>{{Event("contextmenu")}}</li> +</ul> diff --git a/files/pt-br/web/api/element/name/index.html b/files/pt-br/web/api/element/name/index.html new file mode 100644 index 0000000000..d91ce0aa28 --- /dev/null +++ b/files/pt-br/web/api/element/name/index.html @@ -0,0 +1,79 @@ +--- +title: Element.name +slug: Web/API/Element/name +tags: + - API + - DOM + - Element + - NeedsBrowserCompatibility + - NeedsUpdate + - Property + - Reference + - Web +translation_of: Web/API +--- +<p>{{ APIRef("DOM") }}</p> + +<h2 id="Summary" name="Summary">Summary</h2> + +<p><code><strong>name</strong></code> recebe ou ajusta uma propriedade name de um objeto do DOM; ele se aplica somente aos seguintes elementos: {{ HTMLelement("a") }}, {{ HTMLelement("applet") }}, {{ HTMLelement("button") }}, {{ HTMLelement("form") }}, {{ HTMLelement("frame") }}, {{ HTMLelement("iframe") }}, {{ HTMLelement("img") }}, {{ HTMLelement("input") }}, {{ HTMLelement("map") }}, {{ HTMLelement("meta") }}, {{ HTMLelement("object") }}, {{ HTMLelement("param") }}, {{ HTMLelement("select") }} e {{ HTMLelement("textarea") }}.</p> + +<div class="note"> +<p><strong>Nota:</strong> A propriedade <code>name</code> não existe para outros elementos; diferente de <a href="/en/DOM/Element.tagName" title="en/DOM/element.tagName"><code>tagName</code></a> e <a href="/en/DOM/Node.nodeName" title="en/DOM/Node.nodeName"><code>nodeName</code></a>, ela não é uma propriedade das interfaces {{domxref("Node")}}, {{domxref("Element")}} ou {{domxref("HTMLElement")}}.</p> +</div> + +<p><code>name</code> pode ser usada no método {{ domxref("document.getElementsByName()") }}, em um <a href="/en/DOM/HTMLFormElement" title="en/DOM/form">form</a> ou com uma coleção de elementos de formulário. Ela pode retornar um único elemento ou uma coleção quando usada com um formulário ou elementos de coleção.</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="eval"><em>HTMLElement</em>.name = <em>string</em>; +var elName = <em>HTMLElement</em>.name; + +var fControl = <em>HTMLFormElement</em>.<em>elementName</em>; +var controlCollection = <em>HTMLFormElement</em>.elements.<em>elementName</em>; +</pre> + +<h2 id="Example" name="Example">Exemplo</h2> + +<pre class="eval"><form action="" name="formA"> + <input type="text" value="foo"> +</form> + +<script type="text/javascript"> + + // Recebe uma referência ao primeiro elemento no formulário + var formElement = document.forms['formA'].elements[0]; + + // Fornece um name a ele + formElement.name = 'inputA'; + + // Exibe o valor do input + alert(document.forms['formA'].elements['inputA'].value); + +</script> +</pre> + +<h2 id="Notes" name="Notes">Notas</h2> + +<p>No Internet Explorer (IE), não é possível ajustar ou modificar a propriedade <code>name</code> de objetos do DOM criados com {{ domxref("document.createElement()") }}.</p> + +<h2 id="Specification" name="Specification">Especificação</h2> + +<p>Especificação W3C DOM 2 HTML:</p> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-32783304">Anchor</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-39843695">Applet</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-34812697">Button</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-22051454">Form</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-91128709">Frame</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-96819659">iFrame</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-47534097">Image</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-89658498">Input</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-52696514">Map</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-31037081">Meta</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-20110362">Object</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-59871447">Param</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-41636323">Select</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-70715578">Textarea</a></li> +</ul> diff --git a/files/pt-br/web/api/element/outerhtml/index.html b/files/pt-br/web/api/element/outerhtml/index.html new file mode 100644 index 0000000000..1cdfa0826d --- /dev/null +++ b/files/pt-br/web/api/element/outerhtml/index.html @@ -0,0 +1,144 @@ +--- +title: Element.outerHTML +slug: Web/API/Element/outerHTML +translation_of: Web/API/Element/outerHTML +--- +<p>{{APIRef("DOM")}}</p> + +<h2 id="Summary" name="Summary">Sumário</h2> + +<p>O atributo <code>outerHTML</code> da estrutura DOM(Document object model) obtem um fragmento serializado de código HTML descrevendo o elemento incluindo seus descendentes. É possível substituir o elemento em questão com nós obtidos através da análise de uma string.</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<p><em>var conteudo</em> = <em>elemento</em>.outerHTML;</p> + +<p>Na atribuição, <em>conteudo</em> armazena o fragmento de código HTML que descreve o elemento e seus descentes.</p> + +<pre class="eval"><em>elemento</em>.outerHTML = conteudo; +</pre> + +<p><code>Atribui a <em>elemento</em></code> os nós obtidos pela análise da string <code>conteudo</code>, tendo nó pai de elemento como nó de contexto o para o algoritmo de análise do fragmento de código HTML.</p> + +<h2 id="Examples" name="Examples">Exemplos</h2> + +<p>Obtendo o valor da propriedade outerHtml de um elemento :</p> + +<pre class="brush: js">// HTML: +// <div id="d"><p>Conteúdo</p><p>Parágrafo</p></div> + +d = document.getElementById("d"); +dump(d.outerHTML); + +// A string '<div id="d"><p>Conteúdo</p><p>Parágrafo</p></div>' +// é mostrada na janela do console. +</pre> + +<p>Substituindo um nó atribuindo- lhe a propriedade outerHTML</p> + +<pre class="brush: js">// HTML: +// <div id="container"><div id="d">Isto é uma div.</div></div> + +container = document.getElementById("container"); +d = document.getElementById("d"); +console.log(container.firstChild.nodeName); // mostra "DIV" + +d.outerHTML = "<p>Este parágrafo substitui a div original</p>"; +console.log(container.firstChild.nodeName); // mostra "P" + +// A div #d não faz mais parte da estrutura do documento, +// O novo parágrafo a substituiu. +</pre> + +<h2 id="Notas">Notas</h2> + +<p>Se o elemento não tiver um nó pai, ou seja se o nó é a raiz do documento, tentar alterar sua propriedade outerHTML irá lançar um <code><a href="/en/DOM/DOMException" title="DOMException">DOMException</a></code> com o código de erro <code>NO_MODIFICATION_ALLOWED_ERR</code>. Por exemplo:</p> + +<pre class="brush: js">document.documentElement.outerHTML = "test"; // Irá lançar uma DOMException +</pre> + +<p>inclusive, quando o elemento for substituído na estrutura do documento, a variável a qual a propriedade <code>outerHTML</code> foi atribuída ainda irá conter uma referência para o elemento original.</p> + +<pre class="brush: js">var p = document.getElementsByTagName("p")[0]; +console.log(p.nodeName); // mostra: "P" +p.outerHTML = "<div>Esta div substituiu o parágrafo.</div>"; +console.log(p.nodeName); // ainda contém "P"; +</pre> + +<h2 id="Specification" name="Specification">Especificação</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM Parsing', '#outerhtml', 'Element.outerHTML')}}</td> + <td>{{ Spec2('DOM Parsing') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_com_os_navegadores">Compatibilidade com os navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{ CompatGeckoDesktop("11") }}</td> + <td>0.2</td> + <td>4.0</td> + <td>7</td> + <td>1.3</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td> + <p>Suporte básico</p> + </td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoMobile("11") }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{domxref("HTMLElement.outerText")}}</li> + <li>MSDN: <a class="external" href="http://msdn.microsoft.com/en-us/library/ms534310%28v=vs.85%29.aspx">outerHTML Property</a> </li> +</ul> diff --git a/files/pt-br/web/api/element/queryselector/index.html b/files/pt-br/web/api/element/queryselector/index.html new file mode 100644 index 0000000000..cbd41e09ff --- /dev/null +++ b/files/pt-br/web/api/element/queryselector/index.html @@ -0,0 +1,94 @@ +--- +title: Element.querySelector() +slug: Web/API/Element/querySelector +tags: + - API + - DOM + - Elemento + - Referencia +translation_of: Web/API/Element/querySelector +--- +<div>{{APIRef("DOM")}}</div> + +<p>Retorna o primeiro elemento descendente do elemento em que a função foi invocada e que corresponde aos seletores especificado. </p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="syntaxbox"><var>elemento</var> = elementoBase.querySelector(seletores); +</pre> + +<ul> + <li><code>elemento</code> e<code> elementoBase</code> são objetos {{domxref("element")}}.</li> + <li><code>selectores</code> é um grupo de <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">selectores</a>.</li> +</ul> + +<h2 id="Example" name="Example">Exemplo</h2> + +<p>Neste exemplo é retornado o primeiro elemento <code>style</code> que, ou não tem nenhum atributo type, ou tem o atributo type igual a <code>text/css</code>:</p> + +<pre class="brush:js">var el = document.body.querySelector("style[type='text/css'], style:not([type])"); +</pre> + +<h2 id="Notes" name="Notes">Notas</h2> + +<p>Retorna <code>null </code>se nenhum elemento for encontrado; caso contrário retorna o primeiro elemento; </p> + +<p>Lança uma exceção <code>SYNTAX_ERR</code> se o grupo de seletores é inválido.</p> + +<p><span style="font-family: courier new;"><span>querySelector()</span></span> foi introduzido em WebApps API.</p> + +<p>O argumento de string do <code>querySelector</code> deve seguir a sintaxe CSS. Veja exemplos concretos em {{domxref("document.querySelector")}}</p> + +<h2 id="Compatibilidade_de_Browsers">Compatibilidade de Browsers</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Browser</th> + <th>Suporte</th> + <th>Notas</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>8</td> + <td>(IE8) apenas selectores CSS 2.1</td> + </tr> + <tr> + <td>Firefox (Gecko)</td> + <td><strong>3.5</strong> (1.9.1)</td> + <td> </td> + </tr> + <tr> + <td>Opera</td> + <td>10</td> + <td> </td> + </tr> + <tr> + <td>Chrome</td> + <td>1</td> + <td> </td> + </tr> + <tr> + <td>Safari (webkit)</td> + <td>3.2 (525.3)</td> + <td><a class="link-https" href="https://bugs.webkit.org/show_bug.cgi?id=16587">webk.it/16587</a></td> + </tr> + </tbody> +</table> + +<h2 id="Specification" name="Specification">Especificação</h2> + +<ul> + <li>{{spec("http://www.w3.org/TR/selectors-api/","Selectors API Level 1","rec")}}</li> + <li>{{spec("http://www.w3.org/TR/selectors-api2/","Selectors API Level 2","wd")}}</li> + <li>{{spec("http://dev.w3.org/2006/webapi/selectors-api2/","Selectors API Level 2","ed")}}</li> +</ul> + +<h2 id="See_also" name="See_also">Veja Também</h2> + +<ul> + <li><a href="/en-US/docs/DOM/Element.querySelectorAll"><code>element.querySelectorAll</code></a></li> + <li><a href="/en-US/docs/DOM/Document.querySelector"><code>document.querySelector</code></a></li> + <li><a href="/en-US/docs/DOM/Document.querySelectorAll"><code>document.querySelectorAll</code></a></li> + <li><a href="/en-US/docs/Code_snippets/QuerySelector">Code snippets for querySelector</a></li> +</ul> diff --git a/files/pt-br/web/api/element/queryselectorall/index.html b/files/pt-br/web/api/element/queryselectorall/index.html new file mode 100644 index 0000000000..92f6e93506 --- /dev/null +++ b/files/pt-br/web/api/element/queryselectorall/index.html @@ -0,0 +1,118 @@ +--- +title: Element.querySelectorAll() +slug: Web/API/Element/querySelectorAll +translation_of: Web/API/Element/querySelectorAll +--- +<div>{{APIRef("DOM")}}</div> + +<h2 id="Summary" name="Summary">Sumário</h2> + +<p>Retorna uma <span style="line-height: 1.5;"> </span><a href="/en-US/docs/DOM/NodeList" style="line-height: 1.5;" title="DOM/NodeList"><code>NodeList</code></a><span style="line-height: 1.5;"> de todos os elementos descendentes do elemento que foi invocado que sejam compatíveis com o grupo de seletores CSS especificados.</span></p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="syntaxbox"><em>elementList</em> = baseElement.querySelectorAll(<em>selectors</em>); +</pre> + +<p>Onde</p> + +<ul> + <li><code>elementList</code> é uma lista não-viva de objetos <a href="/en-US/docs/DOM/element" title="DOM/Element">element</a>.</li> + <li><code>baseElement</code> é um objeto <a href="/en-US/docs/DOM/element" title="DOM/element">elemento</a>.</li> + <li><code>selectors</code> é um grupo de <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">seletores</a> que serão procurados.</li> +</ul> + +<h2 id="Example" name="Example">Exemplos</h2> + +<p>Este exemplo retorna uma lista de todos os elementos <code>p</code> no corpo do HTML:</p> + +<pre class="brush: js">var matches = document.body.querySelectorAll('p'); +</pre> + +<p><span style="line-height: 1.5;">Este exemplo retorna uma lista de elementos </span><code style="font-style: normal; line-height: 1.5;">p</code><span style="line-height: 1.5;"> que estejam contidos em outro elemento, o qual é uma </span><code style="font-style: normal; line-height: 1.5;">div</code><span style="line-height: 1.5;"> que tem a classe 'highlighted':</span></p> + +<p> </p> + +<pre class="brush:js">var el = document.querySelector('#test'); +var matches = el.querySelectorAll('div.highlighted > p'); </pre> + +<p>Este exemplo retorna uma lista de elementos <code>iframe</code> que contenham um atributo <strong>data</strong> 'src':</p> + +<pre class="brush: js">var matches = el.querySelectorAll('iframe[data-src]'); +</pre> + +<h2 id="Notes" name="Notes">Notas</h2> + +<p>Joga uma excessão <code>SYNTAX_ERR</code> se o grupo especificado de seletores for inválido.</p> + +<p><code>querySelectorAll()</code> foi introduzida na WebApps API.</p> + +<p>A <em>string</em> passada como argumento para <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: 1.5;">querySelectorAll<code> </code></span>deve seguir a sintaxe do CSS. veja {{domxref("document.querySelector")}} para um exemplo concreto.</p> + +<p>Lembre-se que o valor retornado é uma NodeList, então não é recomendado o uso de recursões for...in, nem de nenhum método de <em>array</em>. Se realmente houver a necessidade de usar métodos de uma <em>array,</em> então o NodeList deve ser convertido em uma <em>array </em>antes de ser usado.</p> + +<h2 id="Compatibilidade_com_Browsers">Compatibilidade com Browsers</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>1</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>8</td> + <td>10</td> + <td>3.2 (525.3)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.9.1")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Specification" name="Specification"> </h2> + +<h2 id="Specification" name="Specification">Especificações</h2> + +<ul> + <li><a href="http://www.w3.org/TR/selectors-api/" title="http://www.w3.org/TR/selectors-api/">Selectors API</a></li> +</ul> + +<h2 id="See_also" name="See_also">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/DOM/Document.querySelectorAll" title="DOM/document.querySelectorAll"><code>document.querySelectorAll</code></a></li> + <li><a href="/en-US/docs/DOM/Document.querySelector" title="DOM/document.querySelector"><code>document.querySelector</code></a></li> + <li><a href="/en-US/docs/Code_snippets/QuerySelector" title="Code_snippets/QuerySelector">Code snippets for <code>querySelector</code></a></li> +</ul> diff --git a/files/pt-br/web/api/element/removeattribute/index.html b/files/pt-br/web/api/element/removeattribute/index.html new file mode 100644 index 0000000000..c160dee957 --- /dev/null +++ b/files/pt-br/web/api/element/removeattribute/index.html @@ -0,0 +1,36 @@ +--- +title: Element.removeAttribute() +slug: Web/API/Element/removeAttribute +translation_of: Web/API/Element/removeAttribute +--- +<p>{{ APIRef("DOM") }}</p> + +<p><code>removeAttribute</code> remove um atributo de um elemento específico.</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="eval"><em>element</em>.removeAttribute(<em>attrName</em>); +</pre> + +<ul> + <li><code>attrName</code> é o nome, em formato de texto (<em>string</em>), do atributo a ser removido do <code>element</code><em>.</em></li> +</ul> + +<h2 id="Example" name="Example">Exemplo</h2> + +<pre>// <div id="div1" align="left" width="200px"> +document.getElementById("div1").removeAttribute("align"); +// agora: <div id="div1" width="200px"> +</pre> + +<h2 id="Notes" name="Notes">Observação</h2> + +<p>Você deve usar <code>removeAttribute</code> ao invés de atribuir <code>null</code> ao atributo usando <a href="/en/DOM/element.setAttribute" title="en/DOM/element.setAttribute">setAttribute</a>.</p> + +<p>Tentar remover um atributo que não existe no elemento não fará que uma exceção seja lançada.</p> + +<p>{{ DOMAttributeMethods() }}</p> + +<h2 id="Specification" name="Specification">Especificação</h2> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-6D6AC0F9">DOM Level 2 Core: removeAttribute</a> (introduzido no <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeAttribute">DOM Level 1 Core</a>)</p> diff --git a/files/pt-br/web/api/element/scrollintoview/index.html b/files/pt-br/web/api/element/scrollintoview/index.html new file mode 100644 index 0000000000..28714a4b1e --- /dev/null +++ b/files/pt-br/web/api/element/scrollintoview/index.html @@ -0,0 +1,89 @@ +--- +title: Element.scrollIntoView() +slug: Web/API/Element/scrollIntoView +tags: + - API + - CSSOM Views + - DOM + - Elemento + - Experimental + - Referencia + - Rolagem + - View + - metodo + - scrollIntoView +translation_of: Web/API/Element/scrollIntoView +--- +<div>{{ APIRef("DOM")}}{{SeeCompatTable}}</div> + +<p>O método <code><strong>Element.scrollIntoView()</strong></code> move o elemento ao qual é aplicado para a área visível da janela do navegador.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox notranslate">element.scrollIntoView(); // Equivalente a element.scrollIntoView(true) +element.scrollIntoView(<var>alignToTop</var>); // Argumentos booleanos +element.scrollIntoView(<var>scrollIntoViewOptions</var>); // argumento Objeto +</pre> + +<h3 id="Parâmetros">Parâmetros</h3> + +<dl> + <dt><code>alignToTop</code> {{optional_inline}}</dt> + <dd>É um valor {{jsxref("Boolean")}}: + <ul> + <li>Se <code>true</code>, a parte superior do elemento ficará alinhada com o topo da área visível do elemento-pai. Correponde a <code>scrollIntoViewOptions: {block: "start", inline: "nearest"}</code>. Este é o valor default.</li> + <li><code><font face="Open Sans, Arial, sans-serif">Se </font>false</code>, a parte inferior do elemento ficará alinhada com o fundo da área visível do elemento-pai. Corresponde a <code>scrollIntoViewOptions: {block: "end", inline: "nearest"}</code></li> + </ul> + </dd> + <dt><code>scrollIntoViewOptions</code> {{optional_inline}}</dt> + <dd>Um booleano ou um objeto com as seguintes opções:</dd> + <dd> + <pre class="idl notranslate">{ + behavior: <strong>"auto"</strong> | "instant" | "smooth", + block: <strong>"start"</strong> | "center" | "end" | "nearest", + inline: "start" | "center" | "end" | "<strong>nearest</strong>" +}</pre> + </dd> + <dd>Caso seja um valor booleano, true corresponde a <code>{block: "start"}</code> e false<font face="Consolas, Liberation Mono, Courier, monospace"> a</font> <code>{block: "end"}</code>.</dd> +</dl> + +<h2 id="Exemplo">Exemplo</h2> + +<pre class="brush: js notranslate">var element = document.getElementById("box"); + +element.scrollIntoView(); +element.scrollIntoView(false); +element.scrollIntoView({block: "end"}); +element.scrollIntoView({block: "end", behavior: "smooth"}); +</pre> + +<h2 id="Observações">Observações</h2> + +<p>O elemento poderá não ser movido completamento ao topo ou ao fundo dependendo de sua composição com outros elementos.</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Especificação</th> + <th>Status</th> + <th>Comentário</th> + </tr> + <tr> + <td>{{SpecName("CSSOM View", "#dom-element-scrollintoview", "Element.scrollIntoView()")}}</td> + <td>{{Spec2("CSSOM View")}}</td> + <td>Definição inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h2> + +<p>{{Compat("api.Element.scrollIntoView")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{domxref("Element.scrollIntoViewIfNeeded()")}}<a href="/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded"> </a>{{non-standard_inline}}</li> +</ul> diff --git a/files/pt-br/web/api/element/scrollleft/index.html b/files/pt-br/web/api/element/scrollleft/index.html new file mode 100644 index 0000000000..30df424288 --- /dev/null +++ b/files/pt-br/web/api/element/scrollleft/index.html @@ -0,0 +1,83 @@ +--- +title: Element.scrollLeft +slug: Web/API/Element/scrollLeft +translation_of: Web/API/Element/scrollLeft +--- +<p>{{ APIRef("DOM") }}</p> + +<p>A propriedade <strong>Element.scrollLeft</strong> obtem, ou define o número de pixels do contéudo de um elemento que é rolado para a esquerda.</p> + +<p>Note que se os {{cssxref("direction")}} do elemento do elemento é rtl (direita-para-esquerda) então <code>scrollLeft</code> é <code>0</code> quando a barra de rolagem está na posição mais à direita (o início do conteúdo rolado) e então, fica cada vez mais negativa à medida que se desloca em direção ao fim do conteúdo.</p> + +<h2 id="Syntax_and_values" name="Syntax_and_values">Sintaxe</h2> + +<pre class="eval">// Obtem o número de pixels rolado +var <var>sLeft</var> = <var>element</var>.scrollLeft; +</pre> + +<p><var>sLeft</var> é um inteiro representando o número de pixels do <em>elemento</em> que foi movido para a esquerda.</p> + +<pre class="eval">// Define o número de pixels rolado +<var>element</var>.scrollLeft = 10; +</pre> + +<p><code>scrollLeft</code> pode ser definido para qualquer valor inteiro, entretanto:</p> + +<ul> + <li>Se o elemento não pode ser rolado (ex.: ele é no overflow), <code>scrollLeft</code> é definido para 0.</li> + <li>Se definido um valor menor que 0 (maior que 0 para elementos direita-para-esquerda), <code>scrollLeft</code> é definido para 0.</li> + <li>Se o definido um valor maior que o máximo, que o conteúdo pode ser rolado, é<code>scrollLeft</code> é definido para o valor máximo.</li> +</ul> + +<h2 id="Example" name="Example">Exemplo</h2> + +<pre class="brush: html"><!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <style> + #container { + border: 1px solid #ccc; height: 100px; overflow: scroll; width: 100px; + } + #content { + background-color: #ccc; width: 250px; + } + </style> + <script> + document.addEventListener('DOMContentLoaded', function () { + var button = document.getElementById('slide'); + button.onclick = function () { + document.getElementById('container').scrollLeft += 20; + }; + }, false); + </script> +</head> +<body> + <div id="container"> + <div id="content">Lorem ipsum dolor sit amet.</div> + </div> + <button id="slide" type="button">Slide</button> +</body> +</html> +</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificações</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>{{SpecName('CSSOM View', '#dom-element-scrollleft', 'scrollLeft')}}</td> + <td>{{Spec2("CSSOM View")}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="References" name="References">Referências</h2> + +<p>{{Compat("api.Element.scrollLeft")}}</p> diff --git a/files/pt-br/web/api/element/scrolltop/index.html b/files/pt-br/web/api/element/scrolltop/index.html new file mode 100644 index 0000000000..f8f7dc4cd6 --- /dev/null +++ b/files/pt-br/web/api/element/scrolltop/index.html @@ -0,0 +1,69 @@ +--- +title: Element.scrollTop +slug: Web/API/Element/scrollTop +translation_of: Web/API/Element/scrollTop +--- +<p>{{ APIRef("DOM") }}</p> + +<p>A propriedade Element.scrollTop obtém ou define o número de pixels quando o conteúdo de um elemento é rolado para baixo. O ScrollTop de um elemento é uma medida da distância do topo de um elemento para o seu conteúdo superior visível. Quando um conteúdo de elemento não gera uma barra de rolagem vertical, então o seu valor será padronizado scrollTop = 0.</p> + +<h2 id="Syntax_and_values" name="Syntax_and_values">Sintaxe</h2> + +<pre class="eval">// Obtém o número de pixels rolados +var<var> intElemScrollTop</var> = element.scrollTop; +</pre> + +<p>Depois de executar este código, intElemScrollTop é um número inteiro correspondente ao número de pixels que o {{domxref ("elemento")}} conteúdo foi rolado para cima.</p> + +<pre class="eval">// Define o número de pixels rolados +<var>element</var>.scrollTop = <var>intValue</var>; +</pre> + +<p><code>scrollTop pode ser definido como qualquer valor inteiro, com algumas ressalvas:</code></p> + +<ul> + <li>Se o elemento não pode ser rolada (por exemplo, se o elemento é não-rolagem), scrollTop = 0.</li> + <li>Se for definido como um valor menor do que 0, scrollTop é definido = 0.</li> + <li>Se for definido como um valor maior do que o máximo que o conteúdo pode ser rolada, scrollTop está definido para o máximo.</li> +</ul> + +<h2 id="Example" name="Example">Exemplo</h2> + +<div id="offsetContainer" style="margin: 40px 50px 50px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: relative; display: inline-block;"> +<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;"> +<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p> + +<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> + +<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> + +<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p> +</div> +<strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 170px; position: absolute; top: -24px;">Top</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong> <em>margin-top</em> <em>margin-bottom</em> <em>border-top</em> <em>border-bottom</em></div> + +<p><img alt="Image:scrollTop.png" class="internal" src="/@api/deki/files/842/=ScrollTop.png"></p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('CSSOM View', '#dom-element-scrolltop', 'scrollTop')}}</td> + <td>{{Spec2("CSSOM View")}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Referências">Referências</h2> + +<ul> + <li><a class="external" href="http://dev.w3.org/csswg/cssom-view/#dom-element-scrolltop" title="http://dev.w3.org/csswg/cssom-view/#dom-element-scrolltop">W3C Draft CSSOM View Module</a></li> + <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ms534618(VS.85).aspx" title="http://msdn.microsoft.com/en-us/library/ms534618(VS.85).aspx">MSDN's scrollTop definition</a></li> + <li><a href="http://msdn.microsoft.com/en-us/library/hh781509(v=vs.85).aspx" title="http://msdn.microsoft.com/en-us/library/hh781509(v=vs.85).aspx">MSDN's Measuring Element Dimension and Location</a></li> +</ul> diff --git a/files/pt-br/web/api/element/scrollwidth/index.html b/files/pt-br/web/api/element/scrollwidth/index.html new file mode 100644 index 0000000000..9f0c3009b5 --- /dev/null +++ b/files/pt-br/web/api/element/scrollwidth/index.html @@ -0,0 +1,116 @@ +--- +title: Element.scrollWidth +slug: Web/API/Element/scrollWidth +translation_of: Web/API/Element/scrollWidth +--- +<div>{{ APIRef("DOM") }}</div> + +<p>A propriedade de somente leitura <strong><code>Element.scrollWidth</code></strong> retorna a largura em pixels do conteúdo de um elemento ou a largura do elemento em si, o que for maior. Se o elemento for mais amplo do que a área de conteúdo (por exemplo, se houver barras de rolagem para percorrer o conteúdo), o <code>scrollWidth</code> é maior do que o <code>clientWidth</code>.</p> + +<div class="note"> +<p>Esta propriedade irá arredondar o valor para um número inteiro. Se você precisar de um valor fracionário, use {{ domxref("element.getBoundingClientRect()") }}.</p> +</div> + +<h2 id="Syntax_and_values" name="Syntax_and_values">Syntaxe</h2> + +<pre class="syntaxbox">var <var>xScrollWidth</var> = <var>element</var>.scrollWidth;</pre> + +<p><var>xScrollWidth</var> é a largura do conteúdo do <var>elemento</var> em pixels.</p> + +<h2 id="Example" name="Example">Examplo</h2> + +<pre class="brush:html"><!DOCTYPE html> +<html> +<head> + <title>Example</title> + <style> + div { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + + #aDiv { + width: 100px; + } + + button { + margin-bottom: 2em; + } + </style> +</head> + +<body> + <div id="aDiv"> + FooBar-FooBar-FooBar-FooBar + </div> + <button id="aButton"> + Check for overflow + </button> + + <div id="anotherDiv"> + FooBar-FooBar-FooBar-FooBar + </div> + <button id="anotherButton"> + Check for overflow + </button> +</body> +<script> + var buttonOne = document.getElementById('aButton'), + buttonTwo = document.getElementById('anotherButton'), + divOne = document.getElementById('aDiv'), + divTwo = document.getElementById('anotherDiv'); + + //check to determine if an overflow is happening + function isOverflowing(element) { + return (element.scrollWidth > element.offsetWidth); + } + + function alertOverflow(element) { + if (isOverflowing(element)) { + alert('Contents are overflowing the container.'); + } else { + alert('No overflows!'); + } + } + + buttonOne.addEventListener('click', function() { + alertOverflow(divOne); + }); + + buttonTwo.addEventListener('click', function() { + alertOverflow(divTwo); + }); +</script> +</html> + +</pre> + +<h2 id="Specification" name="Specification">Especificação</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Especificação</th> + <th>Status</th> + <th>Comentário</th> + </tr> + <tr> + <td>{{SpecName("CSSOM View", "#dom-element-scrollwidth", "Element.scrollWidth")}}</td> + <td>{{Spec2("CSSOM View")}}</td> + <td>Definição inicial</td> + </tr> + </tbody> +</table> + +<h2 id="References" name="References">Referências</h2> + +<p>{{Compat("api.Element.scrollWidth")}}</p> + +<h2 id="See_also" name="See_also">Veja também</h2> + +<ul> + <li>{{domxref("Element.clientWidth")}}</li> + <li>{{domxref("HTMLElement.offsetWidth")}}</li> + <li><a href="/en-US/docs/Determining_the_dimensions_of_elements">Determinando as dimensões dos elementos</a></li> +</ul> diff --git a/files/pt-br/web/api/element/setattribute/index.html b/files/pt-br/web/api/element/setattribute/index.html new file mode 100644 index 0000000000..0a3642be64 --- /dev/null +++ b/files/pt-br/web/api/element/setattribute/index.html @@ -0,0 +1,58 @@ +--- +title: Element.setAttribute() +slug: Web/API/Element/setAttribute +tags: + - Elemento + - IPA + - MOD + - Referencia + - metodo +translation_of: Web/API/Element/setAttribute +--- +<p>{{APIRef("DOM")}}</p> + +<p>Adiciona um novo atributo ou modifica o valor de um atributo existente num elemento específico.</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="syntaxbox"><em>element</em>.setAttribute(<em>name</em>, <em>value</em>); +</pre> + +<ul> + <li><font face="Consolas, Liberation Mono, Courier, monospace"><code>name</code> é o nome do atributo como string.</font></li> + <li><code>value</code> é o novo valor desejado do atributo</li> +</ul> + +<h2 id="Example" name="Example">Exemplo</h2> + +<p>No seguinte exemplo, <code>setAttribute()</code> é usado para definir o atributo {{htmlattrxref("disabled")}} em {{htmlelement("button")}}, desabilitado-o.</p> + +<pre class="brush: html"><button>Hello World</button></pre> + +<pre class="brush:js">var b = document.querySelector("button"); + +b.setAttribute("disabled", "disabled"); +</pre> + +<p>{{ EmbedLiveSample('Example', '300', '50', '', 'Web/API/Element/setAttribute') }}</p> + +<h2 id="Notes" name="Notes">Notas</h2> + +<p>Quando chamado em um documento HTML, <code>setAttribute</code> lower-cases its attribute name argument.</p> + +<p>Se um atributo especificado já existe, então o valor do atributo é mudado para o valor passado para a função. Se não existe, então o atributo é criado.</p> + +<p>Apesar de <code><a href="/en-US/docs/DOM/element.getAttribute" title="DOM/element.getAttribute">getAttribute()</a></code> retornar <code>null</code> para atributos ausentes, você precisa usar <code><a href="/en-US/docs/DOM/element.removeAttribute" title="DOM/element.removeAttribute">removeAttribute()</a></code> ao invés de <code><em>elt</em>.setAttribute(<em>attr</em>, null)</code> para remover o atributo. Este último forçará o valor <code>null</code> para a string <code>"null"</code>, o que não é provavelmente o que você quer.</p> + +<p>Usar <code>setAttribute()</code> para modificar certos atributos, mais notavelmente valor em XUL, funciona inconsistentemente, como atributos específicos de valor padrão. Para acessar ou modificar os valores atuais, você deve usar as propriedades. Por exemplo, use <code><em>elt</em>.value</code> ao invés de <code><em>elt</em>.setAttribute('value', <em>val</em>)</code>.</p> + +<p>Para definir um atributo que não leva valor, assim como o atributo <code>autoplay</code> de um elemento {{HTMLElement("audio")}}, use <code>null</code> ou um valor vazio. Por exemplo: <code><em>elt</em>.setAttribute('autoplay', '')</code></p> + +<div>{{DOMAttributeMethods}}</div> + +<h2 id="Specification" name="Specification">Especificação</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68F082">DOM Level 2 Core: setAttribute</a> (introduzido em <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-setAttribute">DOM Level 1 Core</a>)</li> + <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#apis-in-html-documents" title="http://www.whatwg.org/specs/web-apps/current-work/#apis-in-html-documents">HTML5: APIs in HTML documents</a></li> +</ul> diff --git a/files/pt-br/web/api/element/setattributens/index.html b/files/pt-br/web/api/element/setattributens/index.html new file mode 100644 index 0000000000..d4837965a7 --- /dev/null +++ b/files/pt-br/web/api/element/setattributens/index.html @@ -0,0 +1,33 @@ +--- +title: Element.setAttributeNS() +slug: Web/API/Element/setAttributeNS +translation_of: Web/API/Element/setAttributeNS +--- +<p>{{ APIRef("DOM") }}</p> + +<p><code>setAttributeNS</code> adiciona um novo atributo ou modifica o valor de um atributo com um namespace e um nome.</p> + +<p>Syntax</p> + +<pre class="eval"><em>element</em>.setAttributeNS(<em>namespace</em>,<em>name</em>,<em>value</em>) +</pre> + +<ul> + <li><code>namespace</code> é uma string especificando o namespace do atributo.</li> + <li><code>name</code> é uma string identificando o atributo que sera definido.</li> + <li><code>value</code> é o novo valor desejado para o atributo.</li> +</ul> + +<h2 id="Example" name="Example">Exemplo</h2> + +<pre class="eval">var d = document.getElementById("d1"); +d.setAttributeNS("<span class="nowiki">http://www.mozilla.org/ns/specialspace</span>", "align", "center"); +</pre> + +<h2 id="Notes" name="Notes">Notas</h2> + +<p>{{ DOMAttributeMethods() }}</p> + +<h2 id="Specification" name="Specification">Especificação</h2> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElSetAttrNS">DOM Level 2 Core: setAttributeNS</a></p> diff --git a/files/pt-br/web/api/element/tagname/index.html b/files/pt-br/web/api/element/tagname/index.html new file mode 100644 index 0000000000..c0345f4763 --- /dev/null +++ b/files/pt-br/web/api/element/tagname/index.html @@ -0,0 +1,119 @@ +--- +title: Element.tagName +slug: Web/API/Element/tagName +tags: + - API + - DOM + - Gecko + - PrecisaCompatibilidadeBrowser + - Propriedade + - Referência DOM +translation_of: Web/API/Element/tagName +--- +<p>{{ApiRef("DOM")}}</p> + +<p>Retorna o nome do elemento.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox"><em>nomeDoElemento</em> = element.tagName; +</pre> + +<ul> + <li><code>nomeDoElemento</code> é a string contendo o nome do elemento atual.</li> +</ul> + +<h2 id="Notas">Notas</h2> + +<p>Em XML (e linguagens baseadas, como XHTML), <code>tagName </code>conserva o <em>case</em> (caixa alta/baixa) da tag. Nos elementos HTML da árvore do DOM marcados como documentos HTML, <code>tagName </code>retorna o nome do elemento em <em>uppercase</em> (caixa alta). O valor de <code>tagName </code>é o mesmo que o <a href="/en-US/docs/Web/API/Node/nodeName">nodeName</a></p> + +<h2 id="Exemplo">Exemplo</h2> + +<h3 id="conteúdo_HTML">conteúdo HTML</h3> + +<pre class="brush: html"><span id="exemplo">Descrição do exemplo...</span> +</pre> + +<h3 id="conteúdo_JavaScript">conteúdo JavaScript</h3> + +<pre class="brush: js">var span = document.getElementById("exemplo"); +console.log(span.tagName); +</pre> + +<p>Em XHTML (ou qualquer outro formato XML), "<code>span</code>" será a saída. Em HTML, "<code>SPAN</code>" será a saída.</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Especificação</th> + <th>Status</th> + <th>Comentário</th> + </tr> + <tr> + <td>{{SpecName("DOM3 Core", "core.html#ID-104682815", "Element.tagName")}}</td> + <td>{{Spec2("DOM3 Core")}}</td> + <td>No change</td> + </tr> + <tr> + <td>{{SpecName("DOM2 Core", "core.html#ID-104682815", "Element.tagName")}}</td> + <td>{{Spec2("DOM2 Core")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_browser">Compatibilidade de browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/pt-br/web/api/element/touchstart_event/index.html b/files/pt-br/web/api/element/touchstart_event/index.html new file mode 100644 index 0000000000..ae2649f49c --- /dev/null +++ b/files/pt-br/web/api/element/touchstart_event/index.html @@ -0,0 +1,174 @@ +--- +title: touchstart +slug: Web/API/Element/touchstart_event +tags: + - Event + - Evento Toque + - Toque + - TouchEvent +translation_of: Web/API/Element/touchstart_event +--- +<p><code>O evento touchstart</code> é acionado quando o ponteiro de toque<em>(dedo ou caneta)</em> é aplicado sobre à superfície de toque da tela<em>(toque sobre a tela no elemento alvo)</em>.</p> + +<h2 id="Info_Geral">Info Geral</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Especificações</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://w3c.github.io/touch-events/#event-touchstart">Touch Events</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("TouchEvent")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt> + <dd style="margin: 0 0 0 120px;">Sim</dd> + <dt style="float: left; text-align: right; width: 120px;">Cancelável</dt> + <dd style="margin: 0 0 0 120px;">Sim</dd> + <dt style="float: left; text-align: right; width: 120px;">Alvo</dt> + <dd style="margin: 0 0 0 120px;">Documento, Elemento</dd> + <dt style="float: left; text-align: right; width: 120px;">Ação Padrão</dt> + <dd style="margin: 0 0 0 120px;">undefined (indefinido)</dd> +</dl> + +<h2 id="Propriedades">Propriedades</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>EventTarget</td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>DOMString</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>Boolean</td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>Boolean</td> + <td>Whether the event is cancellable or not.</td> + </tr> + <tr> + <td><code>view</code> {{readonlyInline}}</td> + <td>WindowProxy</td> + <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td> + </tr> + <tr> + <td><code>detail</code> {{readonlyInline}}</td> + <td>long (float)</td> + <td>0.</td> + </tr> + <tr> + <td><code>touches</code> {{readonlyInline}}</td> + <td>TouchList</td> + <td>A list of <a href="/en/DOM/Touch"><code>Touch</code></a>es for every point of contact currently touching the surface.</td> + </tr> + <tr> + <td><code>targetTouches</code> {{readonlyInline}}</td> + <td>TouchList</td> + <td>A list of <a href="/en/DOM/Touch"><code>Touch</code></a>es for every point of contact that is touching the surface and started on the element that is the target of the current event.</td> + </tr> + <tr> + <td><code>changedTouches</code> {{readonlyInline}}</td> + <td>TouchList</td> + <td>A list of <a href="/en-US/docs/DOM/Touch"><code>Touch</code></a>es for every point of contact which contributed to the event.<br> + For the touchstart event this must be a list of the touch points that just became active with the current event. For the touchmove event this must be a list of the touch points that have moved since the last event. For the touchend and touchcancel events this must be a list of the touch points that have just been removed from the surface.</td> + </tr> + <tr> + <td><code>ctrlKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>shiftKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>altKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>metaKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + </tbody> +</table> + +<h2 id="Exemplos">Exemplos</h2> + +<p>Os códigos de exemplos para este evento estão disponíveis nesta página dedicada: <a href="/en-US/DOM/Touch_events">Touch events</a>.</p> + +<h2 id="Compatibilidade_de_Navegadores">Compatibilidade de Navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th><span class="short_text" id="result_box" lang="pt"><span>Característica</span></span></th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatChrome("22.0")}}</td> + <td>{{CompatGeckoDesktop("18.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th><span class="short_text" id="result_box" lang="pt"><span>Característica</span></span></th> + <th>Android</th> + <th>Android Webview</th> + <th>Chrome para Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("6.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>11</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Eventos_Relacionados">Eventos Relacionados</h2> + +<ul> + <li>{{ domxref("GlobalEventHandlers.ontouchstart","ontouchstart")}}</li> +</ul> |