From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/pt-br/web/api/element/accesskey/index.html | 18 + .../web/api/element/addeventlistener/index.html | 322 +++++++++++++ files/pt-br/web/api/element/animate/index.html | 202 ++++++++ files/pt-br/web/api/element/attributes/index.html | 166 +++++++ files/pt-br/web/api/element/classlist/index.html | 171 +++++++ files/pt-br/web/api/element/classname/index.html | 123 +++++ files/pt-br/web/api/element/click_event/index.html | 276 +++++++++++ files/pt-br/web/api/element/closest/index.html | 127 +++++ .../pt-br/web/api/element/getattribute/index.html | 76 +++ .../api/element/getboundingclientrect/index.html | 84 ++++ .../api/element/getelementsbyclassname/index.html | 108 +++++ files/pt-br/web/api/element/id/index.html | 119 +++++ files/pt-br/web/api/element/index.html | 529 +++++++++++++++++++++ files/pt-br/web/api/element/innerhtml/index.html | 148 ++++++ .../web/api/element/insertadjacenthtml/index.html | 138 ++++++ files/pt-br/web/api/element/matches/index.html | 165 +++++++ .../web/api/element/mousedown_event/index.html | 235 +++++++++ .../web/api/element/mouseenter_event/index.html | 314 ++++++++++++ .../web/api/element/mouseover_event/index.html | 262 ++++++++++ files/pt-br/web/api/element/name/index.html | 79 +++ files/pt-br/web/api/element/outerhtml/index.html | 144 ++++++ .../pt-br/web/api/element/queryselector/index.html | 94 ++++ .../web/api/element/queryselectorall/index.html | 118 +++++ .../web/api/element/removeattribute/index.html | 36 ++ .../web/api/element/scrollintoview/index.html | 89 ++++ files/pt-br/web/api/element/scrollleft/index.html | 83 ++++ files/pt-br/web/api/element/scrolltop/index.html | 69 +++ files/pt-br/web/api/element/scrollwidth/index.html | 116 +++++ .../pt-br/web/api/element/setattribute/index.html | 58 +++ .../web/api/element/setattributens/index.html | 33 ++ files/pt-br/web/api/element/tagname/index.html | 119 +++++ .../web/api/element/touchstart_event/index.html | 174 +++++++ 32 files changed, 4795 insertions(+) create mode 100644 files/pt-br/web/api/element/accesskey/index.html create mode 100644 files/pt-br/web/api/element/addeventlistener/index.html create mode 100644 files/pt-br/web/api/element/animate/index.html create mode 100644 files/pt-br/web/api/element/attributes/index.html create mode 100644 files/pt-br/web/api/element/classlist/index.html create mode 100644 files/pt-br/web/api/element/classname/index.html create mode 100644 files/pt-br/web/api/element/click_event/index.html create mode 100644 files/pt-br/web/api/element/closest/index.html create mode 100644 files/pt-br/web/api/element/getattribute/index.html create mode 100644 files/pt-br/web/api/element/getboundingclientrect/index.html create mode 100644 files/pt-br/web/api/element/getelementsbyclassname/index.html create mode 100644 files/pt-br/web/api/element/id/index.html create mode 100644 files/pt-br/web/api/element/index.html create mode 100644 files/pt-br/web/api/element/innerhtml/index.html create mode 100644 files/pt-br/web/api/element/insertadjacenthtml/index.html create mode 100644 files/pt-br/web/api/element/matches/index.html create mode 100644 files/pt-br/web/api/element/mousedown_event/index.html create mode 100644 files/pt-br/web/api/element/mouseenter_event/index.html create mode 100644 files/pt-br/web/api/element/mouseover_event/index.html create mode 100644 files/pt-br/web/api/element/name/index.html create mode 100644 files/pt-br/web/api/element/outerhtml/index.html create mode 100644 files/pt-br/web/api/element/queryselector/index.html create mode 100644 files/pt-br/web/api/element/queryselectorall/index.html create mode 100644 files/pt-br/web/api/element/removeattribute/index.html create mode 100644 files/pt-br/web/api/element/scrollintoview/index.html create mode 100644 files/pt-br/web/api/element/scrollleft/index.html create mode 100644 files/pt-br/web/api/element/scrolltop/index.html create mode 100644 files/pt-br/web/api/element/scrollwidth/index.html create mode 100644 files/pt-br/web/api/element/setattribute/index.html create mode 100644 files/pt-br/web/api/element/setattributens/index.html create mode 100644 files/pt-br/web/api/element/tagname/index.html create mode 100644 files/pt-br/web/api/element/touchstart_event/index.html (limited to 'files/pt-br/web/api/element') 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 +--- +
{{APIRef("DOM")}}
+ +
 
+ +

A propriedade Element.accessKey define a tecla pelo qual o usuário pode pressionar para saltar para este elemento.

+ +
+

Nota: A propriedade Element.accessKey é 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).

+
+ +

 

+ +

 

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 +--- +

{{apiref("DOM Events")}}

+ +

addEventListener() registra uma única espera de evento em um único alvo. O alvo do evento pode ser um único elemento em um documento, o documento em si, uma janela, ou um XMLHttpRequest.

+ +

Para registrar mais de uma espera de evento como alvo, chame addEventListener() para o mesmo alvo mas com diferentes tipos de evento ou captura de parâmetros.

+ +

Sintaxe

+ +
alvo.addEventListener(type,listener[, options]);
+alvo.addEventListener(type,listener[, useCapture, wantUntrusted {{ Non-standard_inline() }}]); // Gecko/Mozilla only
+ +
+
type
+
Uma linha de texto que representa o tipo de evento a ser esperado.
+
listener
+
O objeto que recebe uma notificação quando um evento do tipo especificado ocorre. Esse objeto precisa implementar a interface do EventListener, ou simplesmente executar uma função JavaScript.
+
useCapture {{ optional_inline() }}
+
Se true, useCapture indica que o usuário deseja iniciar uma captura. Depois de iniciada a captura, todos os eventos do tipo especificado serão enviados à listener registrada antes de serem enviados à qualquer EventTarget 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 Eventos DOM Nível 3 para uma explicação detalhada. Perceba que esse parâmetro não é opcional em todos os navegadores. Se não for especificado, useCapture é false.
+
wantsUntrusted {{ Non-standard_inline() }}
+
Se true, o evento pode ser acionado por conteúdo não-confiável. Veja Interação entre páginas com e sem privilégios.
+
+ +
Nota: useCapture 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.
+ + +

Exemplo

+ +
<!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>
+
+ +

View on JSFiddle

+ +

No exemplo acima, modifyText() é uma escuta para eventos de click registrados usando addEventListener(). Um clique em qualquer lugar da tabela irá borbulhar para cima até o manipulador e executar modifyText().

+ +

Se você deseja passar parâmetros para a função de escuta, você deve usar uma função anônima.

+ +
<!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>
+
+ +

Notas

+ +

Por que usar addEventListener?

+ +

addEventListener é a maneira de registrar uma espera de evento como especificada no W3C DOM. Seus benefícios são os seguintes:

+ + + +

Existe outra alternativa, uma maneira ultrapassada de registrar esperas de evento.

+ +

Adicionando uma espera de evento durante um disparo de evento

+ +

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.

+ +

Múltiplas esperas de evento idênticas

+ +

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 removeEventListener.

+ +

O valor de this no manipulador

+ +

É 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.

+ +

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:

+ +
<table id="t" onclick="modifyText();">
+  . . .
+ +

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).

+ +
Nota: JavaScript 1.8.5 introduz o método Function.prototype.bind(), que permite especificar o valor que deve ser usado como this para todas as chamadas à uma determinada função. Isso evita problemas quando não é claro o que this 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.
+ +

Este é um exemplo com e sem bind:

+ +
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
+}
+
+ +

Outra solução é usar uma função especial chamada handleEvent para capturar quaisquer eventos:

+ +
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
+}
+
+ +

Internet Explorer antigos e attachEvent

+ +

Em versões do Internet Explorer anteriores ao IE9, você precisa usar attachEvent em vez do padrão addEventListener. Para dar suporte ao IE, o exemplo acima pode ser modificado para:

+ +
if (el.addEventListener) {
+  el.addEventListener('click', modifyText, false);
+} else if (el.attachEvent)  {
+  el.attachEvent('onclick', modifyText);
+}
+
+ +

Existe um porém com attachEvent: o valor de this será a referência ao objeto window em vez do elemento do qual foi disparado.

+ +

Uma maneira ultrapassada de registrar esperas de evento

+ +

addEventListener() foi introduzido com as especificações de Eventos DOM 2. Antes disso, esperas de evento eram registradas assim:

+ +
// 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 ...
+};
+
+ +

Esse método substitui as esperar de evento de click no elemento, se houve alguma. Igualmente para outros outros eventos e manipuladores de evento associados, como blur (onblur), keypress (onkeypress), e assim por diante.

+ +

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 addEventListener() sejam necessários.

+ +

Problemas de memória

+ +
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});
+}
+
+
+ +

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 element.removeEventListener porque não há uma referência ao manipulador, enquanto no segundo caso é possível fazer myElement.removeEventListener("click", processEvent, false).

+ +

Compatiblidade de navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suporte básico1.0{{ CompatGeckoDesktop(1.0) }}9.071.0
useCapture é opcional1.06.09.011.60{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico1.0{{ CompatGeckoMobile(1.0) }}9.06.01.0
+
+ +

Notas Gecko

+ + + +

Notas Webkit

+ + + +

Veja também

+ + + +

Especificação

+ + 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 +--- +
{{APIRef('Web Animations')}} {{SeeCompatTable}}
+ +

Um {{domxref("Element")}} de interface do método animate() é 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.

+ +
+

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()")}}.

+
+ +

Syntax

+ +
var animation = element.animate(keyframes, options); 
+ +

Paramêtros

+ +
+
keyframes
+
+

An Object formatted to represent a set of keyframes.

+
+
opções
+
Ou um inteiro representando a duração da animação (em milisegundos), ou um objeto contendo uma ou mais propriedades de tempo:
+
id {{optional_inline}}
+
+
+
Um propriedade única á animate(): uma DOMString com a qual a animação é referenciada. 
+
+ {{Page("/en-US/docs/Web/API/Web_Animations_API/Animation_timing_properties", "Properties")}}
+
+ +

Opções Futuras

+ +

As seguintes opções atualmente não são embarcadas em nenhum lugar, porém serão adicionadas num futuro próximo.

+ +
+
composite {{optional_inline}}
+
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. +
    +
  • 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 translateX(-200px) rotate(20deg).
    • +
  • accumulate é similar porém um pouco mais inteligente: blur(2) e blur(5) se tornam blur(7), não blur(2) blur(5).
    • +
  • replace sobreescreve o valor anterior com um novo. 
    • +
+
+
iterationComposite {{optional_inline}}
+
Determines how values build from iteration to iteration in this animation. Can be set to accumulate or replace (see above). Defaults to replace.
+
spacing {{optional_inline}}
+
Determina como quadros-chaves sem deslocamento temporal devem ser distribuidos durante a duração da animação. Padrão para distribute. +
    +
  • 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.
    • +
  • paced 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.
    • +
+ +

 

+
+
+ +

Valor de retorno

+ +

Retorna uma {{domxref("Animation")}}.

+ +

Exemplo

+ +

Na demonstração Down the Rabbit Hole (with the Web Animation API), 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.
+ Note o array de quadros-chave passado e também o bloco de opções de temporização.

+ +
document.getElementById("tunnel").animate([
+  // keyframes
+  { transform: 'translateY(0px)' },
+  { transform: 'translateY(-300px)' }
+], {
+  // timing options
+  duration: 1000,
+  iterations: Infinity
+});
+
+ +

Especificações

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Animations', '#the-animatable-interface', 'animate()' )}}{{Spec2('Web Animations')}}Initial definition
+ +

Compatibildade entre Navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome("36")}}{{CompatNo}}{{ CompatGeckoDesktop("48.0")}}{{CompatNo}}23{{CompatUnknown}}
id option{{CompatChrome(50.0)}}{{CompatNo}}{{ CompatGeckoDesktop("48.0")}}{{CompatNo}}37{{CompatUnknown}}
composite, iterationComposite, and spacing options{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatChrome(39.0)}}{{CompatChrome(39.0)}}{{ CompatGeckoMobile("48.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
id option{{CompatNo}}{{CompatChrome(50.0)}}{{CompatChrome(50.0)}}{{ CompatGeckoMobile("48.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
composite, iterationComposite, and spacing options{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Veja Também

+ + 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 +--- +

{{ APIRef("DOM") }}

+ +

A propriedade Element.attributes retorna uma coleção de todos os atributos registrados para um nó especificado. É um {{domxref("NamedNodeMap")}}, e não um Array, 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, attributes é um par de chave/valor de strings que representa qualquer informação relacionada ao atributo.

+ +

Sintaxe

+ +
var attr = element.attributes;
+
+ +

Exemplo

+ +

Exemplos básicos

+ +
// Obtem o primeiro elemento <p> no documento
+var para = document.getElementsByTagName("p")[0];
+var atts = para.attributes;
+ +

Listando os atributos dos elementos

+ +

Indexadores numéricos são úteis para percorrer através de todos os atributos de um elemento.
+ 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.

+ +
<!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>
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('DOM WHATWG', '#dom-element-attributes', 'Element.attributes')}}{{Spec2('DOM WHATWG')}}Da {{SpecName('DOM3 Core')}}, movido de {{domxref("Node")}} para {{domxref("Element")}}
{{SpecName('DOM3 Core', 'core.html#ID-84CF096', 'Element.attributes')}}{{Spec2('DOM3 Core')}}Nenhuma alteração a partir da {{SpecName('DOM2 Core')}}
{{SpecName('DOM2 Core', 'core.html#ID-84CF096', 'Element.attributes')}}{{Spec2('DOM2 Core')}}Nenhuma alteração a partir da {{SpecName('DOM1')}}
{{SpecName('DOM1', 'level-one-core.html#ID-84CF096', 'Element.attributes')}}{{Spec2('DOM1')}}Definição inicial.
+ +

Compatibilidade entre os navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FuncionalidadeChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }} [1]6.0 [2]{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FuncionalidadeAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }} [1]{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

[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.

+ +

[2] Internet Explorer 5.5 retorna um map contendo os valores ao invés dos objetos do atributo.

+ +

Veja também

+ + 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 +--- +
{{APIRef("DOM")}}
+ +

O Element.classList é uma propriedade somente leitura que retorna uma coleção {{domxref ("DOMTokenList")}} ativa dos atributos de classe do elemento.

+ +

Usar classList é 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")}}.

+ +

Sintaxe

+ +
const elementClasses = elementNodeReference.classList;
+
+ +

elementClasses é um DOMTokenList que representa o atributo de classe de elementNodeReference. Se o atributo de classe não foi definido ou está vazio elementClasses.length retorna 0. element.classList propriamente dito é somente leitura, embora você possa modificá-lo usando os métodos add () e remove ().

+ +

Métodos

+ +
+
add( String [, String] )
+
Adicione valores de classe especificados. Se essas classes já existem no atributo do elemento, elas são ignoradas.
+
remove( String [,String] )
+
Remover valores de classe específicos.
+
item ( Number )
+
Retorna o valor da classe por índice na coleção.
+
toggle ( String [, force] )
+
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.
+ 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.
+
contains( String )
+
Verifica se o valor da classe especificado existe no atributo de classe do elemento.
+
+ +

Exemplos

+ +
// 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");
+ +
+

As versões do Firefox antes de 26 não implementam o uso de vários argumentos nos métodos add / remove / toggle. Veja https://bugzilla.mozilla.org/show_bug.cgi?id=814014

+
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaçõesStatusComentário
{{SpecName("HTML WHATWG", "dom.html#dom-classlist", "Element.classList")}}{{Spec2("HTML WHATWG")}}Observe dentro da especificação HTML relacionada ao {{htmlattrxref("class")}} attribute.
{{SpecName("DOM WHATWG", "#dom-element-classlist", "Element.classList")}}{{Spec2("DOM WHATWG")}}Definição inicial
{{SpecName("DOM4", "#dom-element-classlist", "Element.classList")}}{{Spec2("DOM4")}} 
+ +

Compatibilidade do navegador

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support8.0{{CompatVersionUnknown}}[3]{{CompatGeckoDesktop("1.9.2")}}10[1][3]11.505.1
toggle method's second argument24{{CompatVersionUnknown}}{{CompatGeckoDesktop("24")}}{{CompatNo}}[2]155.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support3.0{{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.2")}}1011.105.0
toggle method's second argument{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("24")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Não suportado para elementos SVG. Veja a report at Microsoft about that.
+ [2] O Internet Explorer nunca implementou isso. Veja a report at Microsoft about that.
+ [3] Internet Explorer usa apenas o primeiro parâmetro em "add" e "remove".

+ +

 

+ +

 

+ +

Veja também

+ + 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 +--- +
{{APIRef("DOM")}}
+ +

Sumário

+ +

className retorna e define o valor do atributo class do elemento especificado.

+ +

Syntax

+ +
var cName = elementNodeReference.className;
+elementNodeReference.className = cName;
+ + + +

Exemplo

+ +
var element = document.getElementById("div1");
+
+if (element.className === "fixed") {
+  // verifica a partir de uma classe específica do elemento
+  goNextElement();
+}
+ +

Notas

+ +

O nome className é utilizado para esta propriedade ao invés de class por conta de conflitos com a palavra-chave "class" em variáveis linguagens que são utilizadas para manipulação do DOM.

+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("DOM WHATWG", "#dom-element-classname", "element.className")}}{{Spec2("DOM WHATWG")}} 
{{SpecName("DOM4", "#dom-element-classname", "element.className")}}{{Spec2("DOM4")}} 
{{SpecName("DOM2 HTML", "html.html#ID-95362176", "element.className")}}{{Spec2("DOM2 HTML")}}Definição inicial
+ +

Compatibilidade de Browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte Básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
RecursoAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte Básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Veja também

+ + 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 +--- +

O evento click 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.

+ +

Informações gerais

+ +
+
Especificação
+
DOM L3
+
Interface
+
{{domxref("MouseEvent")}}
+
Bubbles
+
Sim
+
Cancelável
+
Sim
+
Target
+
Element
+
Ação padrão
+
Variável
+
+ +

Propriedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}EventTargetO alvo do evento (o mais alto na arvore de DOM).
type {{readonlyInline}}DOMStringTipo do evento.
bubbles {{readonlyInline}}BooleanSe o evento "bubbles" naturalmente ou não.
cancelable {{readonlyInline}}BooleanSe o evento é cancelável ou não
view {{readonlyInline}}WindowProxydocument.defaultView (window do documento)
detail {{readonlyInline}}long (float) +

Um contador de cliques consecutivos que ocorrem em um curto espaço de tempo, incrementado em 1.

+
currentTarget {{readonlyInline}}EventTargetO node que contem o eventListener.
relatedTarget {{readonlyInline}}EventTargetPara eventos mouseover, mouseout, mouseenter e mouseleave: o alvo do evento complementar (o mouseleave no caso de um evento mouseenter ). null , se falso.
screenX {{readonlyInline}}longA coordenada X do ponteiro do mouse na tela.
screenY {{readonlyInline}}longA coordenada Y do ponteiro do mouse na tela.
clientX {{readonlyInline}}longA coordenada X do ponteiro do mouse no DOM atual.
clientY {{readonlyInline}}longA coordenada Y do ponteiro do mouse no DOM atual.
button {{readonlyInline}}unsigned shortThe 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.
buttons {{readonlyInline}}unsigned shortThe 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). More info.
mozPressure {{readonlyInline}}floatThe 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).
ctrlKey {{readonlyInline}}booleantrue if the control key was down when the event was fired. false otherwise.
shiftKey {{readonlyInline}}booleantrue if the shift key was down when the event was fired. false otherwise.
altKey {{readonlyInline}}booleantrue if the alt key was down when the event was fired. false otherwise.
metaKey {{readonlyInline}}booleantrue if the meta key was down when the event was fired. false otherwise.
+ +

Exemplo

+ +
<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>
+
+ +

Compatibilidade nos Browsers

+ +

Internet Explorer

+ +

O Internet Explorer 8 e 9 apresentam um bug onde o elemento com a propriedade {{cssxref("background-color")}} é definida como transparent that are overlaid on top of other element(s) won't receive click events. Todos os eventos click serão disparados no elemento underlying instead. Veja uma demonstração neste exemplo.

+ +

Soluções de contorno para este bug:

+ + + +

Safari Mobile

+ +

Safari Mobile 7.0+ (and likely earlier versions too) suffers from a bug where click 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. event delegation is being used). See this live example for a demonstration. See also Safari's docs on making elements clickable and the definition of "clickable element".

+ +

Known workarounds for this bug:

+ + + +

Safari Mobile considers the following elements to be typically interactive (and thus they aren't affected by this bug):

+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerEdgeOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
On disabled form elements{{CompatVersionUnknown}}[1]{{CompatNo}}{{CompatVersionUnknown}}[2]{{CompatNo}}{{CompatVersionUnknown}}[1]{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
On disabled form elements{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Only works for {{HTMLElement("textarea")}} elements and some {{HTMLElement("input")}} element types.

+ +

[2] Internet Explorer only triggers the click event on {{HTMLElement("input")}} elements of type checkbox or radio when the element is double-clicked.

+ +

See also

+ + 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 +--- +
{{APIRef("DOM")}}{{SeeCompatTable}}
+ +

O método Element.closest() 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 null.

+ +

Sintaxe

+ +
var elt = element.closest(selectors);
+
+ +

Parâmetros

+ + + +

Valor retornado

+ + + +

Exceções

+ + + +

Exemplo

+ +
<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>
+ +
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
+
+ +

Polyfill

+ +

Para navegadores que não suportam Element.closest(), mas possuem suporte para element.matches() (ou um prefixo equivalente, ou seja IE9+), o seguinte polyfill pode ser usado: 

+ +
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;
+    };
+
+ +

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.

+ +
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;
+    };
+}
+
+ +

Especificações

+ + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('DOM WHATWG', '#dom-element-closest', 'Element.closest()')}}{{Spec2('DOM WHATWG')}}Definição inicial.
+ +

Compatibilidade em navegadores

+ +
{{Compat("api.Element.closest")}}
+ +

Veja também

+ + 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 +--- +
{{APIRef("DOM")}}
+ +

Resumo

+ +

getAttribute() retorna o valor de um argumento específico do elemento. Se o atributo não existir, o valor retornado será null ou "" (string vazia). Veja {{Anch("Notas")}} para mais detalhes.

+ +

Sintaxe

+ +
var atributo = element.getAttribute(nomeDoAtributo);
+
+ +

onde

+ + + +

Exemplo

+ +
var div1 = document.getElementById("div1");
+var align = div1.getAttribute("align");
+
+alert(align); // mostra o valor do atributo "align" do elemento com id="div1"
+ +

Notas

+ +

Quando for utilizado para um elemento HTML num DOM sinalizado como documento HTML,  getAttribute() troca de caixa alta para caixa baixa (maiúscula para minúscula) seu argumento antes de prosseguir.

+ +

Essencialmente todos navegadores (Firefox, Internet Explorer, versões recentes do Opera, Safari, Konqueror, e iCab, por exemplo) retornam null quando o atributo especificado não existe no elemento em questão, seguindo que o esboço atual de especificações DOM diz. A velha especificação do DOM 3 Core, por sua vez, diz que correto é retornar uma string vazia 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 getAttribute()caso exista a possibilidade do argumento inexistir.

+ +
+

Compatibilidade entre browsers

+ +

{{CompatibilityTable}}

+ + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte Básico2923{{CompatVersionUnknown}}{{CompatVersionUnknown}}6
+ +

{{DOMAttributeMethods}}

+
+ +

Especificação

+ + 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 +--- +
{{APIRef("DOM")}}
+ +

O método Element.getBoundingClientRect() retorna o tamanho de um elemento e sua posição relativa ao viewport.

+ +

Sintaxe

+ +
rectObject = object.getBoundingClientRect();
+
+ +

Valor de retorno

+ +

O valor de retorno é o objeto DOMRect que é a uniāo dos retângulos retornados por getClientRects() para o elemento, ou seja, os atributos border-boxes do CSS associados ao elemento.

+ +

O valor retornado é um objeto DOMRect, que contém as propriedades apenas-leitura left, top, right e bottom que descrevem o border-box em pixels. top e left são relativos às propriedades top-left do viewport.

+ +
+

Nota: {{Gecko("1.9.1")}} adiciona as propriedades width e height ao objeto DOMRect.

+
+ +

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 top e left determina-se o top-left do border-box relacionado ao primeiro box CSS (determinado pela ordem do conteúdo) em relaçāo ao elemento.

+ +

A quantidade de scrolling que foi feita na área do viewport (ou qualquer outra área de qualquer outro elemento scrollable) é tomada com medida ao computar o delimitador do retângulo. Isso significa que as propriedades top e left 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 top e left (via window.scrollX e window.scrollY) para pegar os valores constantes independentemente da posiçāo atual do scroll.

+ +

Scripts que requerem uma alta compatibilidade cross-browser podem usar window.pageXOffset e window.pageYOffset ao invés de window.scrollX e window.scrollY. Scripts sem acesso ao window.pageXOffset, window.pageYOffset, window.scrollX e window.scrollY podem usar:

+ +
// 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
+
+ +

Exemplo

+ +
// rect é um objeto DOMRect com seis propriedades: left, top, right, bottom, width, height
+var rect = obj.getBoundingClientRect();
+
+ +

Especificaçōes

+ + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName("CSSOM View", "#dom-element-getboundingclientrect", "Element.getBoundingClientRect()")}}{{Spec2("CSSOM View")}}Definiçāo Inicial
+ +

Notas

+ +

getBoundingClientRect() foi primeiramente introduzida no modelo de objeto MS IE DHTML.

+ +

O valor de retorno de getBoundingClientRect() é frozen.

+ +

Compatibilidade

+ +
{{Compat("api.Element.getBoundingClientRect")}}
+ +

Veja também

+ + 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 +--- +
{{APIRef("DOM")}}
+ +

O método getElementsByClassName() da interface {{domxref("Element")}} retorna um {{domxref("HTMLCollection")}} atualizado simultaneamente que contém todos os elementos descendentes da classe ou das classes especificadas.

+ +

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.

+ +

Sintaxe

+ +
var elements = element.getElementsByClassName(names);
+ +

Parâmetros

+ +
+
names
+
Uma {{domxref("DOMString")}} contendo um ou mais nomes de classes separados por espaço em branco.
+
+ +

Valor de retorno

+ +

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 names.

+ +

Notas de uso

+ +

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 names 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 names tem as suas classes ajustadas para que satisfaça, ele irá instantaneamente ser adicionado ao conjunto de elementos.

+ +

O oposto disso também acontece; os elementos que não satisfazerem mais as classes contidas em name serão removidos instantaneamente do conjunto.

+ +
+

No modo quirks, o nome das classes são comparadas da forma case-insensitive. Caso contrário, considere case sensitive.

+
+ +

Exemplos

+ +

Usando uma única classe

+ +

Para procurarmos elementos que incluem uma classe específica, nós apenas informamos o nome da classe ao chamar getElementsByClassName():

+ +
element.getElementsByClassName('test');
+ +

Esse exemplo retorna todos os elementos que possuem a classe test, e que também são filhos do elemento que possui o id com valor main:

+ +
document.getElementById('main').getElementsByClassName('test');
+ +

Usando várias classes

+ +

Para retornar elementos que incluem as classes red and test:

+ +
element.getElementsByClassName('red test');
+ +

Examinando os resultados

+ +

You can use either the {{domxref("HTMLCollection.item", "item()")}} method on the returned HTMLCollection or standard array syntax to examine individual elements in the collection. However the following code will not work as one might expect because "matches" will change as soon as any "colorbox" class is removed.

+ +
var matches = element.getElementsByClassName('colorbox');
+
+for (var i=0; i<matches.length; i++) {
+  matches[i].classList.remove('colorbox');
+  matches.item(i).classList.add('hueframe');
+}
+
+ +

Instead, use another method, such as:

+ +
var matches = element.getElementsByClassName('colorbox');
+
+while (matches.length > 0) {
+  matches.item(0).classList.add('hueframe');
+  matches[0].classList.remove('colorbox');
+}
+ +

This code finds descendant elements with the "colorbox" class, adds the class "hueframe", by calling item(0), then removes "colorbox" (using array notation). Another element (if any are left) will then become item(0).

+ +

Filtering the results using array methods

+ +

We can also use methods of {{jsxref("Array.prototype")}} on any {{ domxref("HTMLCollection") }} by passing the {{domxref("HTMLCollection")}} as the method's this value. Here we'll find all {{HTMLElement("div")}} elements that have a class of test:

+ +
var testElements = document.getElementsByClassName('test');
+var testDivs = Array.prototype.filter.call(testElements, function(testElement) {
+  return testElement.nodeName === 'DIV';
+});
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-element-getelementsbyclassname', 'Element.getElementsByClassName()')}}{{Spec2('DOM WHATWG')}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("api.Element.getElementsByClassName")}}

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 +--- +
{{ApiRef("DOM")}}
+ +
 
+ +

A propriedade Element.id representa o identificador do elemento, refletindo no atributo global id.

+ +

O ID precisa ser único no documento, e geralmente é utilizado para obter o elemento usando {{domxref("document.getElementById", "getElementById")}}.. Outro uso comum de id é utilizar o ID como um seletor ao estilizar o documento com CSS.

+ +
+

Nota: 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 Case sensitivity in class and id names).

+
+ +

Sintaxe

+ +
var idStr = element.id; // Retorna o id.
+element.id = idStr; // Insere o id
+
+ + + +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('DOM WHATWG', '#dom-element-id', 'id')}}{{Spec2('DOM WHATWG')}}Sem alteração desde {{SpecName('DOM2 HTML')}}.
{{SpecName('DOM2 HTML', 'html.html#ID-63534901', 'id')}}{{Spec2('DOM2 HTML')}}Sem alteração desde {{SpecName('DOM1')}}.
{{SpecName('DOM1', 'level-one-html.html#ID-63534901', 'id')}}{{Spec2('DOM1')}}Definição inicial.
+ +

Compatibilidade com os browsers

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome para AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

Veja também

+ + 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 +--- +

{{ APIRef("DOM") }}

+ +

A interface Element é 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 Element. 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. 

+ +

Linguagens fora do domínio da plataforma da Web, como XUL através da interface XULElement, também implementa Element.

+ +

Propriedades

+ +

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 {{domxref("Animatable")}}.

+ +
+
{{ domxref("Element.attributes") }}  {{readOnlyInline}}
+
Retorna um {{ domxref("NamedNodeMap") }} que lista todos os atributos associados ao elemento.
+
{{ domxref("ParentNode.childElementCount") }}
+
É um {{jsxref("Number")}} representando o número de nós filhos que são elementos.
+
{{ domxref("ParentNode.children") }}
+
É um {{ domxref("HTMLCollection") }} ao vivo contendo todos os elementos filhos do elemento, como uma coleção.
+
{{ domxref("Element.classList") }} {{readOnlyInline}}
+
Retorna um {{ domxref("DOMTokenList") }} contendo a lista de atributos de classe.
+
{{ domxref("Element.className") }}
+
É um {{domxref("DOMString")}} representando a classe do elemento.
+
{{ domxref("Element.clientHeight") }} {{experimental_inline}} {{readOnlyInline}}
+
Retorna um {{jsxref("Number")}} representando a altura interna do elemento.
+
{{ domxref("Element.clientLeft") }} {{experimental_inline}} {{readOnlyInline}}
+
Retorna um {{jsxref("Number")}} representando a largura da borda do elemento..
+
{{ domxref("Element.clientTop") }} {{experimental_inline}} {{readOnlyInline}}
+
Retorna um {{jsxref("Number")}} representando a largura da borda do topo do elemento.
+
{{ domxref("Element.clientWidth") }} {{experimental_inline}} {{readOnlyInline}}
+
Retorna um {{jsxref("Number")}} representando a largura interna do elemento.
+
{{ domxref("ParentNode.firstElementChild") }}
+
+

É um {{ domxref("Element") }}, o primeiro elemento filho direto de um elemento, ou null se o elemento não tem elementos filho.

+
+
{{ domxref("Element.id") }}
+
É um {{domxref("DOMString")}} representando o id do elemento.
+
{{ domxref("Element.innerHTML") }} {{experimental_inline}}
+
É um {{domxref("DOMString")}} representando a marcação do conteúdo do elemento.
+
{{ domxref("ParentNode.lastElementChild") }}
+
É um {{ domxref("Element") }}, o último elemento filho direto de um elemento, ou null se o elemento não tem elementos filho.
+
{{ domxref("NonDocumentTypeChildNode.nextElementSibling") }}
+
É um {{ domxref("Element") }}, o elemento seguido imediatamente do dito na árvore, ou null se não há nó irmão.
+
{{ domxref("Element.outerHTML") }} {{experimental_inline}}
+
É um {{domxref("DOMString")}} representando a marcação do elemento incluindo seu conteúdo. Quando usado como um setter, substitui o elemento com nós analisados a partir de uma determinada string.
+
{{ domxref("NonDocumentTypeChildNode.previousElementSibling") }}
+
É um {{ domxref("Element") }}, o elemento precedido imediatamente do dito na árvore, ou nulo se não há elemento irmão.
+
{{ domxref("Element.scrollHeight") }} {{experimental_inline}} {{readOnlyInline}}
+
Retorna um {{jsxref("Number")}} representando a altura da vista de rolagem de um elemento.
+
{{ domxref("Element.scrollLeft") }} {{experimental_inline}}
+
É um {{jsxref("Number")}} representando o deslocamento de rolagem esquerdo do elemento.
+
{{ domxref("Element.scrollLeftMax") }} {{non-standard_inline}} {{readOnlyInline}}
+
Retorna um {{jsxref("Number")}} representando o deslocamento de rolagem esquerdo máximo possível para o elemento.
+
{{ domxref("Element.scrollTop") }} {{experimental_inline}}
+
É um {{jsxref("Number")}} representando o deslocamento de rolagem superior de um elemento.
+
{{ domxref("Element.scrollTopMax") }} {{non-standard_inline}} {{readOnlyInline}}
+
Retorna um {{jsxref("Number")}} representando o deslocamento de rolagem máximo superior possível para o elemento.
+
{{ domxref("Element.scrollWidth") }} {{experimental_inline}} {{readOnlyInline}}
+
Retorna um {{jsxref("Number")}} representando a largura de exibição de rolagem do elemento.
+
{{domxref("Element.shadowRoot") }} {{experimental_inline}} {{readOnlyInline}}
+
...
+
{{ domxref("Element.tagName") }} {{readOnlyInline}}
+
Retorna um {{domxref("String")}} com o nome da tag para o elemento em questão.
+
{{ domxref("Element.undoManager")}} {{experimental_inline}} {{readOnlyInline}}
+
Retorna o {{domxref("UndoManager")}} associado com o elemento.
+
{{ domxref("Element.undoScope")}} {{experimental_inline}}
+
É a {{jsxref("Boolean")}} indicando se o elemento é um anular hospedagem de escopo, ou não.
+
+ +

Manipuladores de Eventos

+ +
+
{{ domxref("Element.ongotpointercapture") }}
+
…
+
{{ domxref("Element.onlostpointercapture") }}
+
…
+
{{ domxref("Element.onwheel") }} {{ non-standard_inline() }}
+
Retorna o código de manipulação de evento para o evento wheel.
+
+ +

Métodos

+ +

Herda métodos de seus parentes {{domxref("Node")}}, e seu proprío parente, {{domxref("EventTarget")}}, e implementa aqueles de  {{domxref("ParentNode")}}, {{domxref("ChildNode")}}, {{domxref("NonDocumentTypeChildNode")}}, e {{domxref("Animatable")}}.

+ +
+
{{ domxref("EventTarget.addEventListener()") }}
+
Registra um manipulador de evento para um tipo específico de evento no elemento.
+
{{ domxref("Element.closest()")}} {{experimental_inline}}
+
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.
+
{{ domxref("Element.createShadowRoot()")}} {{experimental_inline}}
+
…
+
{{ domxref("EventTarget.dispatchEvent()") }}
+
Despacha um evento para este nó no DOM e retorna um {{jsxref("Boolean")}} que indica que pelo menos um manipulador não o cancelou.
+
{{domxref("Element.find()")}}{{experimental_inline}}
+
...
+
{{domxref("Element.findAll()")}}{{experimental_inline}}
+
...
+
{{domxref("Animatable.getAnimationPlayers()")}} {{experimental_inline}}
+
…
+
{{ domxref("Element.getAttribute()") }}
+
Recupera o valor do atributo nomeado do nó atual e o retorna como um {{jsxref("Object")}}.
+
{{ domxref("Element.getAttributeNS()") }}
+
Recupera o valor do atributo com o nome especificado e namespace, do nó atual e o retorna como um {{jsxref("Object")}}.
+
{{ domxref("Element.getAttributeNode()") }} {{obsolete_inline}}
+
Recupera a representação do nó de um atributo nomeado do nó atual e o retorna como um {{ domxref("Attr") }}.
+
{{ domxref("Element.getAttributeNodeNS()") }} {{obsolete_inline}}
+
Recupera a representação de nó do atributo com o nome especificado e namespace, do nó atual e o retorna como um {{ domxref("Attr") }}.
+
{{ domxref("Element.getBoundingClientRect()") }} {{experimental_inline}}
+
...
+
{{ domxref("Element.getClientRects()") }} {{experimental_inline}} TYPE of returnvalue????
+
Retorna uma coleção de retângulos que indicam os retângulos delimitadores para cada linha de texto em um cliente.
+
{{domxref("Element.getDestinationInsertionPoints()")}} {{experimental_inline}}
+
…
+
{{ domxref("Element.getElementsByClassName()") }}
+
Retorna um {{ domxref("HTMLCollection") }} vivo que contêm todos os descendentes do elemento atual que possui a lista de classes dadas no parâmetro.
+
{{ domxref("Element.getElementsByTagName()") }}
+
Retorna um {{ domxref("HTMLCollection") }} vivo contendo todos os elementos descendentes, de uma etiqueta de nome particular, do elemento atual.
+
{{ domxref("Element.getElementsByTagNameNS()") }}
+
Retorna um {{ domxref("HTMLCollection") }} vivo contendo todos os elementos descendentes, de uma etiqueta de nome particular e namespace, do elemento atual.
+
{{ domxref("Element.hasAttribute()") }}
+
Retorna um {{jsxref("Boolean")}} indicando se o elemento tem o atributo especificado ou não.
+
{{ domxref("Element.hasAttributeNS()") }}
+
Retorna um {{jsxref("Boolean")}} indicando se o elemento tem um atributo especificado, no namespace especificado, ou não.
+
{{ domxref("Element.insertAdjacentHTML") }} {{experimental_inline}}
+
Analisa o texto como HTML ou XML e insere os nós resultantes na árvore em dada posição.
+
{{ domxref("Element.matches()") }} {{experimental_inline}}
+
Retorna um {{jsxref("Boolean")}} indicando se o elemento seria ou não selecionado pelo seletor de string specificada.
+
{{ domxref("Element.querySelector()") }}
+
Retorna {{ domxref("Node") }}...
+
{{ domxref("Element.querySelectorAll") }}
+
Retorna um {{ domxref("NodeList") }}...
+
{{ domxref("Element.releasePointerCapture")}} {{experimental_inline}}
+
…
+
{{domxref("ChildNode.remove()")}}
+
Remove o elemento da lista de filhos de seu parente.
+
{{ domxref("Element.removeAttribute()") }}
+
Remove um atributo nomeado do nó atual.
+
{{ domxref("Element.removeAttributeNS()") }}
+
Remove o atributo com o nome especificado ou namespace, do nó atual.
+
{{ domxref("Element.removeAttributeNode()") }} {{obsolete_inline}}
+
Remove a representação do nó do atributo nomeado do nó atual.
+
{{ domxref("EventTarget.removeEventListener()") }}
+
Remove um ouvinte de eventos do elemento.
+
{{ domxref("Element.requestFullscreen()") }} {{experimental_inline}}
+
Assíncronamente pede o navegador para fazer o elemento tela cheia.
+
{{ domxref("Element.requestPointerLock()")}} {{experimental_inline}}
+
Permite assíncronamente pedir pelo apontador para ser bloqueado em um dado elemento.
+
+ +
+
{{ domxref("Element.scrollIntoView()") }} {{experimental_inline}}
+
Rola a página até que o elemento apareça na visão.
+
{{ domxref("Element.setAttribute()") }}
+
Define o valor de um atributo nomeado do nó atual.
+
{{ domxref("Element.setAttributeNS()") }}
+
Define o valor do atributo com o nome especificado e namespace, do nó atual.
+
{{ domxref("Element.setAttributeNode()") }} {{obsolete_inline}}
+
Define a representação do nó de um atributo nomeado do nó atual.
+
{{ domxref("Element.setAttributeNodeNS()") }} {{obsolete_inline}}
+
Define a representação do nó do atributo com o nome especificado e namespace, do nó atual.
+
{{ domxref("Element.setCapture()") }} {{non-standard_inline}}
+
Define a captura de evento do mouse, redirecionando todos os eventos de mouse para este elemento.
+
{{domxref("Element.setPointerCapture()")}}
+
…
+
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Web Animations", '', '')}}{{Spec2("Web Animations")}}Adicionado o método getAnimationPlayers().
{{SpecName('Undo Manager', '', 'Element')}}{{Spec2('Undo Manager')}}Adicionadas as propriedades undoScope e undoManager.
{{SpecName('Pointer Events', '#extensions-to-the-element-interface', 'Element')}}{{Spec2('Pointer Events')}}Adicionados os seguintes manipuladores de evento: ongotpointercapture e onlostpointercapture.
+ Adicionados os seguintes métodos: setPointerCapture() e releasePointerCapture().
{{SpecName('Selectors API Level 2', '#interface-definitions', 'Element')}}{{Spec2('Selectors API Level 2')}}Adicionados os seguintes métodos: matches() (implementado como mozMatchesSelector()), find(), findAll().
{{SpecName('Selectors API Level 1', '#interface-definitions', 'Element')}}{{Spec2('Selectors API Level 1')}}Adicionados os seguintes métodos: querySelector() e querySelectorAll().
{{SpecName('Pointer Lock', 'index.html#element-interface', 'Element')}}{{Spec2('Pointer Lock')}}Adicionado o método requestPointerLock().
{{SpecName('Fullscreen', '#api', 'Element')}}{{Spec2('Fullscreen')}}Adicionado o método requestFullscreen().
{{SpecName('DOM Parsing', '#extensions-to-the-element-interface', 'Element')}}{{Spec2('DOM Parsing')}}Adicionadas as seguintes propriedades: innerHTML, e outerHTML.
+ Adicionado o seguinte método: insertAdjacentHTML().
{{SpecName('CSSOM View', '#extensions-to-the-element-interface', 'Element')}}{{Spec2('CSSOM View')}}Adicionadas as seguintes propriedades: scrollTop, scrollLeft, scrollWidth, scrollHeight, clientTop, clientLeft, clientWidth, e clientHeight.
+ Adicionados os seguintes métodos: getClientRects(), getBoundingClientRect(), e scrollIntoView().
{{SpecName('Element Traversal', '#ecmascript-bindings', 'Element')}}{{Spec2('Element Traversal')}}Adicionada herança da interface {{domxref("ElementTraversal")}}.
{{SpecName('DOM WHATWG', '#interface-element', 'Element')}}{{Spec2('DOM WHATWG')}}Removidos os seguintes métodos: closest(), setIdAttribute(), setIdAttributeNS(), e setIdAttributeNode().
+ Removida a propriedade schemaTypeInfo.
+ Modificado o valor de retorno de getElementsByTag() e getElementsByTagNS().
+ Movida hasAttributes() da interface Node para esta.
{{SpecName('DOM3 Core', 'core.html#ID-745549614', 'Element')}}{{Spec2('DOM3 Core')}}Adicionados os seguintes métodos: setIdAttribute(), setIdAttributeNS(), e setIdAttributeNode(). Estes métodos nunca foram implementados e foram removidos em especificações posteriores.
+ Adicionada a propriedade schemaTypeInfo. Esta propriedade nunca foi implementada e foi removida em especificações posteriores.
{{SpecName('DOM2 Core', 'core.html#ID-745549614', 'Element')}}{{Spec2('DOM2 Core')}}O método normalize() foi movido para {{domxref("Node")}}.
{{SpecName('DOM1', 'level-one-core.html#ID-745549614', 'Element')}}{{Spec2('DOM1')}}Definição inicial.
+ +

Compatibilidade de Navegador

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suporte básico1.0{{CompatGeckoDesktop("1")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}1.0
children{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9")}}7.0 com um bug significativo[1]
+ 9.0 de acordo com as especificações		{{CompatVersionUnknown}}{{CompatNo}}
childElementCount, nextElementSibling, previousElementSibling{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}9.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
firstElementChild, lastElementChild{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9")}}9.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
classList{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.2")}} {{CompatVersionUnknown}}{{CompatVersionUnknown}}
outerHTML {{experimental_inline}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("11")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
clientLeft, clientTop {{experimental_inline}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
getBoundingClientRect(), getClientRects() {{experimental_inline}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
querySelector(), querySelectorAll()1.0{{CompatGeckoDesktop("1.9.1")}}8.010.03.2 (525.3)
insertAdjacentHTML() {{experimental_inline}}1.0{{CompatGeckoDesktop("8")}}4.07.04.0 (527)
setCapture() {{non-standard_inline}}{{CompatNo}}{{CompatGeckoDesktop("2")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
oncopy, oncut, onpaste {{non-standard_inline}}{{CompatNo}}{{CompatGeckoDesktop("1.9")}}{{CompatVersionUnknown}} {{CompatNo}}
onwheel {{non-standard_inline}}{{CompatNo}}{{CompatGeckoDesktop("17")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
ongotpointercapture, onlostpointercapture, setPointerCapture(), e releasePointerCapture(){{CompatNo}}{{CompatNo}}10.0 {{property_prefix("MS")}}{{CompatNo}}{{CompatNo}}
matches() {{experimental_inline}}{{CompatVersionUnknown}} com o nome não padrão webkitMatchesSelector{{CompatGeckoDesktop("1.9.2")}} com o nome não padrão mozMatchesSelector
+ {{CompatGeckoDesktop("34")}} com o nome padrão		9.0 com o nome não padrão msMatchesSelector11.5 com o nome não padrão oMatchesSelector
+ 15.0 com o nome não padrão webkitMatchesSelector		5.0 com o nome não padrão webkitMatchesSelector
find() e findAll(){{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
requestPointerLock()16.0  {{property_prefix("webkit")}}, atrás de um about:flags
+ 22.0 {{property_prefix("webkit")}} (com casos especiais, levantados progressivamente, veja [2])		{{CompatGeckoDesktop("14")}}{{property_prefix("moz")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
requestFullscreen()14.0 {{property_prefix("webkit")}}{{CompatGeckoDesktop("10")}} {{property_prefix("moz")}}11.0 {{property_prefix("ms")}}12.10
+ 15.0 {{property_prefix("webkit")}}		5.1 {{property_prefix("webkit")}}
undoManager e undoScope{{CompatNo}}{{CompatVersionUnknown}} (atrás do pref dom.undo_manager.enabled){{CompatNo}}{{CompatNo}}{{CompatNo}}
attributes{{CompatUnknown}}{{CompatGeckoDesktop("22")}}
+ Antes era disponível via interface {{domxref("Node")}} que qualquer element herda.		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
scrollTopMax() e scrollLeftMax(){{CompatNo}}{{CompatGeckoDesktop("16")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
closest(){{CompatUnknown}}{{CompatGeckoDesktop("35")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
hasAttributes(){{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}} (na interface {{domxref("Node")}})
+ {{CompatGeckoDesktop("35")}} (nesta interface)		{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suporte básico1.0{{CompatGeckoMobile("1")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}1.0
scrollTopMax() and scrollLeftMax(){{CompatNo}}{{CompatGeckoMobile("16")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
closest(){{CompatUnknown}}{{CompatGeckoMobile("35")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
hasAttributes(){{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}} (na interface {{domxref("Node")}})
+ {{CompatGeckoMobile("35")}} (nesta interface)		{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[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.

+ +

[2] Chrome 16 permitiu webkitRequestPointerLock() 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 webkit-allow-pointer-lock é definido para o atributo {{htmlattrxref("sandbox", "iframe")}}.

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 +--- +

{{APIRef("DOM")}}

+ +

A propriedade Element.innerHTML define ou obtém a sintaxe HTML ou XML descrevendo os elementos descendentes.

+ +
Nota: 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.
+ +

Sintaxe

+ +
var content = element.innerHTML;
+ +

No retorno, content contém o código HTML serializado descrevendo todos os descendentes dos elementos.

+ +
 element.innerHTML = content;
+ +

Remove todos os elementos filhos, analisa o conteúdo da string e atribui os nós resultantes como filhos do elemento.

+ +

Exceptions

+ +
+
SyntaxError
+
Foi feita uma tentativa de definir o valor de um innerHTML usando uma string que não é HTML.
+
NoModificationAllowedError
+
Foi feita uma tentativa de inserir HTML dentro de um nó no qual o pai é um {{domxref("Document")}}.
+
+ +

Exemplo

+ +
<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>
+ +
// 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
+
+ +

Notas

+ +

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:

+ +
// Troca o conteúdo de body por uma string vazia.
+document.body.innerHTML = "";
+ +

A propriedade innerHTML 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:

+ +
// Copie e cole este código, em uma única linha, na barra de endereços
+javascript:"<pre>"+document.documentElement.innerHTML.replace(/</g,"&lt;") + "</pre>";
+
+ +

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.

+ +

Considerações de segurança

+ +

Não é incomum ver a propriedade innerHTML usada para inserir texto em uma página web. Isso vem com um risco de segurança.

+ +
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
+ +

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 innerHTML, não deve ser executada.

+ +

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 innerHTML para definir uma string sobre a qual você não tem controle. Por exemplo:

+ +
const name = "<img src='x' onerror='alert(1)'>";
+el.innerHTML = name; // exibe uma caixa de alerta
+ +

Por essa razão, recomenda-se que você não use o innerHTML 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.

+ +

Especificação

+ + + + + + + + + + + + + + + + +
EspecificaçãoEstadoComentário
{{SpecName('DOM Parsing', '#widl-Element-innerHTML', 'Element.innerHTML')}}{{ Spec2('DOM Parsing') }}Definição inicial
+ +

Veja também

+ + 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 +--- +
{{APIRef("DOM")}}
+ +

Resumo

+ +

insertAdjacentHTML 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.

+ +

Sintaxe

+ +
element.insertAdjacentHTML(posição, texto);
+ +

Posição é a posição em relação ao elemento, e deve ser um dos seguintes tipos:

+ +
+
'beforebegin'
+
Antes do elemento.
+
'afterbegin'
+
Dentro do elemento, antes de seu primeiro filho (childNode).
+
'beforeend'
+
Dentro do elemento, após seu último filho (childNode) .
+
'afterend'
+
Após o elemento.
+
+ +

texto é a string a ser analisada como HTML ou XML e inserido na árvore.

+ +

Visualização da posição de nomes

+ +
<!-- beforebegin -->
+<p>
+<!-- afterbegin -->
+foo
+<!-- beforeend -->
+</p>
+<!-- afterend -->
+ +
Nota:  As posições beforeBegin e afterEnd funcionam apenas se o nó está em uma árvore DOM e tem um elemento pai.
+ +

Exemplo

+ +
// 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>
+ +

Especificação

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM Parsing', '#insertadjacenthtml()', 'Element.insertAdjacentHTML()')}}{{ Spec2('DOM Parsing') }} 
+ +

Compatibilidade de Navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suporte básico1.0{{ CompatGeckoDesktop("8.0") }}4.0*7.04.0 (527)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
 CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suporte básico{{ CompatUnknown() }}{{ CompatGeckoMobile("8.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+ +

 

+ +

Questão no IE:

+ + +
+ +

Veja também

+ + 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 +--- +
{{APIRef("DOM")}}
+ +

O método Element.matches() retorna verdadeiro se o elemento puder ser selecionado pela sequência de caracteres específica; caso contrário retorna falso.

+ +
+

Diversos navegadores implementam isto, prefixado, sob nome não padronizado matchesSelector().

+
+ +

Sintaxe

+ +
var result = element.matches(selectorString);
+
+ + + +

Exemplo

+ +
<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>
+
+ +

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 endangered.

+ +

Exceções

+ +
+
SYNTAX_ERR
+
O seletor de string específico é inválido.
+
+ +

Polyfill

+ +

Para navegadores que não suportam Element.matches() ou Element.matchesSelector(),  mass possuem suporte para document.querySelectorAll(), existe um polyfill:

+ +
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;
+        };
+}
+ +

Especificação

+ + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('DOM WHATWG', '#dom-element-matches', 'Element.prototype.matches')}}{{Spec2('DOM WHATWG')}}Initial definition
+ +

Compatibilidade de navegador

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Original support with a non-standard name +

{{CompatVersionUnknown}}[1]

+ 		{{CompatGeckoDesktop("1.9.2")}}[2]9.0[3]11.5[4]
+ 15.0[1]		5.0[1]
Specified version{{CompatChrome("34")}}{{CompatGeckoDesktop("34")}}{{CompatUnknown}}21.07.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Original support with a non-standard name{{CompatUnknown}}{{CompatGeckoMobile("1.9.2")}}[2]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Specified version{{CompatUnknown}}{{CompatGeckoMobile("34")}}{{CompatUnknown}}{{CompatUnknown}}8
+
+ +

[1] Esta feature foi implementada com o nome não padronizado webkitMatchesSelector.

+ +

[2] Esta feature foi implementada com o nome não padronizado mozMatchesSelector. Anteriormente para o Gecko 2.0, seletores de string inválido faziam com que retornasse false ao invés de empurrar uma exceção.

+ +

[3] Esta feature foi implementada com o nome não padronizado msMatchesSelector.

+ +

[4] Esta feature foi implementada com o nome não padronizado oMatchesSelector.

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 +--- +
{{APIRef}}
+ +

O evento mousedown é ativado quando um botão de um dispositivo apontador é pressionado sobre um elemento.

+ +

Informação geral

+ +
+
Especificação
+
DOM L3
+
Interface
+
{{domxref("MouseEvent")}}
+
Bubbles
+
Sim
+
Cancelável
+
Sim
+
Alvo
+
Elemento
+
Ação Padrão
+
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)
+
+ +

Propriedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}} +

O alvo do evento (o alvo mais alto na árvore do DOM).

+
type {{readonlyInline}}{{domxref("DOMString")}}O tipo de evento
bubbles {{readonlyInline}}BooleanWhether the event normally bubbles or not
cancelable {{readonlyInline}}BooleanO evento é cancelável ou não?
view {{readonlyInline}}{{domxref("WindowProxy")}}{{domxref("document.defaultView")}} (window do documento)
detail {{readonlyInline}}long (float) +

Um número de cliques consecutivos que aconteceu num pequeno espaço de tempo, acrescido em um.

+
currentTarget {{readonlyInline}}{{domxref("EventTarget")}}O nó que teve o listener do evento anexado.
relatedTarget {{readonlyInline}}{{domxref("EventTarget")}}Para os eventos mouseover, mouseout, mouseenter e mouseleave: o alvo do evento complementar (o alvo do mouseleave no caso de um evento mouseenter). Caso contrário, null.
screenX {{readonlyInline}}longA coordenada X do mouse baseada nas coordenadas globais (tela).
screenY {{readonlyInline}}longA coordenada Y do mouse baseada nas coordenadas globais (tela).
clientX {{readonlyInline}}longA coordenada X do ponteiro do mouse baseada nas coordenadas locais (conteúdo do DOM).
clientY {{readonlyInline}}longA coordenada Y do ponteiro do mouse baseada nas coordenadas locais (conteúdo do DOM).
button {{readonlyInline}}unsigned shortO 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.
buttons {{readonlyInline}}unsigned short +

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). Mais informações.

+
mozPressure {{readonlyInline}}floatA 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).
ctrlKey {{readonlyInline}}booleantrue se a tecla control estava pressionada quando o evento foi ativado. Caso contrário, false.
shiftKey {{readonlyInline}}booleantrue se a tecla shift estava pressionada quando o evento foi ativado. Caso contrário, false.
altKey {{readonlyInline}}booleantrue se a tecla alt estava pressionada quando o evento foi ativado. Caso contrário, false.
metaKey {{readonlyInline}}booleantrue se a tecla meta estava pressionada quando o evento foi ativado. Caso contrário, false.
+ +

Compatibilidade entre navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
RecursoChromeFirefox (Gecko)Internet ExplorerEdgeOperaSafari
Suporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Em elementos desativados{{CompatVersionUnknown}}[1]{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}[1]{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
RecursoAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Em elementos desativados{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Só funciona em elementos {{HTMLElement("textarea")}} e alguns tipos do elemento {{HTMLElement("input")}}.

+ +

Veja também

+ + 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 +--- +
{{APIRef}}
+ +

O evento mouseenter é disparado quando um dispositivo de apontamento (geralmente um mouse) se move sobre um elemento (para dentro do mesmo).

+ +

Similar ao {{event('mouseover')}}, ele se diferencia no fato de que não ocorre a fase bubble 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.

+ +
+
mouseenter.png
+Um evento mouseenter é 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. + +
mouseover.png
+Um único evento mouseover é 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 handler ou alcance a raíz da árvore.
+ +

De acordo com a profundidade da hierarquia, a quantidade de eventos mouseenter disparados pode se tornar muito grande e causar problemas de performance significativos. Nestes casos é melhor escutar por eventos mouseover.

+ +

Combinado ao comportamento do seu evento simétrico, mouseleave, o evento DOM mouseenter age de modo bastante similar à pseudo-classe CSS {{cssxref(':hover')}}.

+ +

Informações Gerais

+ +
+
Especificação
+
DOM L3
+
Interface
+
{{domxref('MouseEvent')}}
+
Sincronismo
+
Síncrono
+
Fase Bubble
+
Não
+
Cancelável
+
Não
+
Target
+
Element
+
Ação Padrão
+
Nenhuma
+
+ +

Propriedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}BooleanWhether the event normally bubbles or not
cancelable {{readonlyInline}}BooleanWhether the event is cancellable or not?
view {{readonlyInline}}{{domxref("WindowProxy")}}{{domxref("document.defaultView")}} (window of the document)
detail {{readonlyInline}}long (float)0.
currentTarget {{readonlyInline}}{{domxref("EventTarget")}}The node that had the event listener attached.
relatedTarget {{readonlyInline}}{{domxref("EventTarget")}}For mouseover, mouseout, mouseenter and mouseleave events: the target of the complementary event (the mouseleave target in the case of a mouseenter event). null otherwise.
screenX {{readonlyInline}}longThe X coordinate of the mouse pointer in global (screen) coordinates.
screenY {{readonlyInline}}longThe Y coordinate of the mouse pointer in global (screen) coordinates.
clientX {{readonlyInline}}longThe X coordinate of the mouse pointer in local (DOM content) coordinates.
clientY {{readonlyInline}}longThe Y coordinate of the mouse pointer in local (DOM content) coordinates.
button {{readonlyInline}}unsigned shortThe 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.
buttons {{readonlyInline}}unsigned shortThe 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). More info.
mozPressure {{readonlyInline}}floatThe 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).
ctrlKey {{readonlyInline}}booleantrue if the control key was down when the event was fired. false otherwise.
shiftKey {{readonlyInline}}booleantrue if the shift key was down when the event was fired. false otherwise.
altKey {{readonlyInline}}booleantrue if the alt key was down when the event was fired. false otherwise.
metaKey {{readonlyInline}}booleantrue if the meta key was down when the event was fired. false otherwise.
+ +

Examples

+ +

The mouseover documentation has an example illustrating the difference between mouseover and mouseenter.

+ +

The following example illustrates how to use mouseover to simulate the principle of event delegation for the mouseenter event.

+ +
<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>
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support30[1]{{CompatVersionUnknown}}10[2]5.5{{CompatVersionUnknown}}
+ {{CompatNo}} 15.0
+ 17.0		7[3]
On disabled form elements{{CompatNo}}{{CompatNo}}{{CompatGeckoDesktop("44.0")}}[4]{{CompatNo}}{{CompatNo}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
On disabled form elements{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Implemented in bug 236215.

+ +

[2] Implemented in {{bug("432698")}}.

+ +

[3] Safari 7 fires the event in many situations where it's not allowed to, making the whole event useless. See bug 470258 for the description of the bug (it existed in old Chrome versions as well). Safari 8 has correct behavior

+ +

[4] Implemented in {{bug("218093")}}.

+ +

See also

+ + 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 +--- +

O evento mouseover é acionado quando um dispositivo ponteiro é movido para o elemento que esteja escutando ou para um de seus filhos.

+ +

Informações Gerais

+ +
+
Especificação
+
DOM L3
+
Interface
+
{{domxref("MouseEvent")}}
+
Bubbles
+
Sim
+
Cancelable
+
Sim
+
Alvo
+
Element
+
Ação Padrão
+
None
+
+ +

Propriedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}O evento alvo(o mais alto alvo na arvore do DOM).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}BooleanWhether the event normally bubbles or not
cancelable {{readonlyInline}}BooleanWhether the event is cancellable or not
view {{readonlyInline}}{{domxref("WindowProxy")}}{{domxref("document.defaultView")}} (window of the document)
detail {{readonlyInline}}long (float)0.
currentTarget {{readonlyInline}}{{domxref("EventTarget")}}The node that had the event listener attached.
relatedTarget {{readonlyInline}}{{domxref("EventTarget")}}For mouseover, mouseout, mouseenter and mouseleave events: the target of the complementary event (the mouseleave target in the case of a mouseenter event). null otherwise.
screenX {{readonlyInline}}longThe X coordinate of the mouse pointer in global (screen) coordinates.
screenY {{readonlyInline}}longThe Y coordinate of the mouse pointer in global (screen) coordinates.
clientX {{readonlyInline}}longThe X coordinate of the mouse pointer in local (DOM content) coordinates.
clientY {{readonlyInline}}longThe Y coordinate of the mouse pointer in local (DOM content) coordinates.
button {{readonlyInline}}unsigned shortThis is always 0 as no button presses trigger this event (mouse movement does).
buttons {{readonlyInline}}unsigned shortThe 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). More info.
mozPressure {{readonlyInline}}floatThe 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).
ctrlKey {{readonlyInline}}booleantrue if the control key was down when the event was fired. false otherwise.
shiftKey {{readonlyInline}}booleantrue if the shift key was down when the event was fired. false otherwise.
altKey {{readonlyInline}}booleantrue if the alt key was down when the event was fired. false otherwise.
metaKey {{readonlyInline}}booleantrue if the meta key was down when the event was fired. false otherwise.
+ +

Example

+ +

The following example illustrates the difference between mouseover and mouseenter events.

+ +
<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>
+
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerEdgeOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
On disabled form elements{{CompatVersionUnknown}}[1]{{CompatGeckoDesktop("44.0")}}[2]{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}[1]{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
On disabled form elements{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Only works for {{HTMLElement("textarea")}} elements and some {{HTMLElement("input")}} element types.

+ +

[2] Implemented in {{bug("218093")}}.

+ +

See also

+ + 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 +--- +

{{ APIRef("DOM") }}

+ +

Summary

+ +

name 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") }}.

+ +
+

Nota: A propriedade name não existe para outros elementos; diferente de tagName e nodeName, ela não é uma propriedade das interfaces {{domxref("Node")}}, {{domxref("Element")}} ou {{domxref("HTMLElement")}}.

+
+ +

name pode ser usada no método {{ domxref("document.getElementsByName()") }}, em um form 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.

+ +

Sintaxe

+ +
HTMLElement.name = string;
+var elName = HTMLElement.name;
+
+var fControl = HTMLFormElement.elementName;
+var controlCollection = HTMLFormElement.elements.elementName;
+
+ +

Exemplo

+ +
<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>
+
+ +

Notas

+ +

No Internet Explorer (IE), não é possível ajustar ou modificar a propriedade name de objetos do DOM criados com {{ domxref("document.createElement()") }}.

+ +

Especificação

+ +

Especificação W3C DOM 2 HTML:

+ + 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 +--- +

{{APIRef("DOM")}}

+ +

Sumário

+ +

O atributo outerHTML 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.

+ +

Sintaxe

+ +

var conteudo = elemento.outerHTML;

+ +

Na atribuição, conteudo armazena o fragmento de código HTML que descreve o elemento e seus descentes.

+ +
elemento.outerHTML = conteudo;
+
+ +

Atribui a elemento  os nós obtidos pela análise da  string conteudo, tendo nó pai de elemento como nó de contexto o para o algoritmo de análise do fragmento de código HTML.

+ +

Exemplos

+ +

Obtendo o valor da propriedade outerHtml de um elemento :

+ +
// 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.
+
+ +

Substituindo um nó atribuindo- lhe a propriedade outerHTML

+ +
// 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.
+
+ +

Notas

+ +

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  DOMException com o código de erro NO_MODIFICATION_ALLOWED_ERR. Por exemplo:

+ +
document.documentElement.outerHTML = "test";  // Irá lançar uma DOMException
+
+ +

inclusive, quando o elemento for substituído na estrutura do documento, a variável a qual a propriedade outerHTML foi atribuída ainda irá conter uma referência para o elemento original.

+ +
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";
+
+ +

Especificação

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM Parsing', '#outerhtml', 'Element.outerHTML')}}{{ Spec2('DOM Parsing') }} 
+ +

Compatibilidade com os navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Suporte básico{{ CompatGeckoDesktop("11") }}0.24.071.3
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
+

Suporte básico

+ 		{{ CompatVersionUnknown() }}{{ CompatGeckoMobile("11") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

Veja também

+ + 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 +--- +
{{APIRef("DOM")}}
+ +

Retorna o primeiro elemento descendente do elemento em que a função foi invocada e que corresponde aos seletores especificado. 

+ +

Sintaxe

+ +
elemento = elementoBase.querySelector(seletores);
+
+ + + +

Exemplo

+ +

Neste exemplo é retornado o primeiro elemento style que, ou não tem nenhum atributo type, ou tem o atributo type igual a  text/css:

+ +
var el = document.body.querySelector("style[type='text/css'], style:not([type])");
+
+ +

Notas

+ +

Retorna null se nenhum elemento for encontrado; caso contrário retorna o primeiro elemento; 

+ +

Lança uma exceção SYNTAX_ERR se o grupo de seletores é inválido.

+ +

querySelector() foi introduzido em WebApps API.

+ +

O argumento de string do querySelector deve seguir a sintaxe CSS. Veja exemplos concretos em {{domxref("document.querySelector")}}

+ +

Compatibilidade de Browsers

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
BrowserSuporteNotas
Internet Explorer8(IE8) apenas selectores CSS 2.1
Firefox (Gecko)3.5 (1.9.1) 
Opera10 
Chrome1 
Safari (webkit)3.2 (525.3)webk.it/16587
+ +

Especificação

+ + + +

Veja Também

+ + 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 +--- +
{{APIRef("DOM")}}
+ +

Sumário

+ +

Retorna uma  NodeList de todos os elementos descendentes do elemento que foi invocado que sejam compatíveis com o grupo de seletores CSS especificados.

+ +

Sintaxe

+ +
elementList = baseElement.querySelectorAll(selectors);
+
+ +

Onde

+ + + +

Exemplos

+ +

Este exemplo retorna uma lista de todos os elementos p no corpo do HTML:

+ +
var matches = document.body.querySelectorAll('p');
+
+ +

Este exemplo retorna uma lista de elementos p que estejam contidos em outro elemento, o qual é uma div que tem a classe 'highlighted':

+ +

 

+ +
var el = document.querySelector('#test');
+var matches = el.querySelectorAll('div.highlighted > p');
+ +

Este exemplo retorna uma lista de elementos iframe que contenham um atributo data 'src':

+ +
var matches = el.querySelectorAll('iframe[data-src]');
+
+ +

Notas

+ +

Joga uma excessão SYNTAX_ERR se o grupo especificado de seletores for inválido.

+ +

querySelectorAll() foi introduzida na WebApps API.

+ +

A string passada como argumento para querySelectorAll deve seguir a sintaxe do CSS. veja {{domxref("document.querySelector")}} para um exemplo concreto.

+ +

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 array. Se realmente houver a necessidade de usar métodos de uma array, então o NodeList deve ser convertido em uma array antes de ser usado.

+ +

Compatibilidade com Browsers

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suporte básico1{{CompatGeckoDesktop("1.9.1")}}8103.2 (525.3)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suporte básico{{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.1")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +

 

+ +

Especificações

+ + + +

Veja também

+ + 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 +--- +

{{ APIRef("DOM") }}

+ +

removeAttribute remove um atributo de um elemento específico.

+ +

Sintaxe

+ +
element.removeAttribute(attrName);
+
+ + + +

Exemplo

+ +
// <div id="div1" align="left" width="200px">
+document.getElementById("div1").removeAttribute("align");
+// agora: <div id="div1" width="200px">
+
+ +

Observação

+ +

Você deve usar removeAttribute ao invés de atribuir null ao atributo usando setAttribute.

+ +

Tentar remover um atributo que não existe no elemento não fará que uma exceção seja lançada.

+ +

{{ DOMAttributeMethods() }}

+ +

Especificação

+ +

DOM Level 2 Core: removeAttribute (introduzido no DOM Level 1 Core)

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 +--- +
{{ APIRef("DOM")}}{{SeeCompatTable}}
+ +

O método Element.scrollIntoView() move o elemento ao qual é aplicado para a área visível da janela do navegador.

+ +

Sintaxe

+ +
element.scrollIntoView(); // Equivalente a element.scrollIntoView(true)
+element.scrollIntoView(alignToTop); // Argumentos booleanos
+element.scrollIntoView(scrollIntoViewOptions); // argumento Objeto
+
+ +

Parâmetros

+ +
+
alignToTop {{optional_inline}}
+
É um valor {{jsxref("Boolean")}}: +
    +
  • Se true, a parte superior do elemento ficará alinhada com o topo da área visível do elemento-pai. Correponde a scrollIntoViewOptions: {block: "start", inline: "nearest"}. Este é o valor default.
    • +
  • Se false, a parte inferior do elemento ficará alinhada com o fundo da área visível do elemento-pai. Corresponde a scrollIntoViewOptions: {block: "end", inline: "nearest"}
    • +
+
+
scrollIntoViewOptions {{optional_inline}}
+
Um booleano ou um objeto com as seguintes opções:
+
+ 
{
+  behavior: "auto"  | "instant" | "smooth",
+  block:    "start" | "center" | "end" | "nearest",
+  inline:   "start" | "center" | "end" | "nearest"
+}
+
+
Caso seja um valor booleano, true corresponde a {block: "start"} e false a {block: "end"}.
+
+ +

Exemplo

+ +
var element = document.getElementById("box");
+
+element.scrollIntoView();
+element.scrollIntoView(false);
+element.scrollIntoView({block: "end"});
+element.scrollIntoView({block: "end", behavior: "smooth"});
+
+ +

Observações

+ +

O elemento poderá não ser movido completamento ao topo ou ao fundo dependendo de sua composição com outros elementos.

+ +

Especificações

+ + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName("CSSOM View", "#dom-element-scrollintoview", "Element.scrollIntoView()")}}{{Spec2("CSSOM View")}}Definição inicial
+ +

Compatibilidade com navegadores

+ +

{{Compat("api.Element.scrollIntoView")}}

+ +

Veja também

+ + 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 +--- +

{{ APIRef("DOM") }}

+ +

A propriedade Element.scrollLeft obtem, ou define o número de pixels do contéudo de um elemento que é rolado para a esquerda.

+ +

Note que se os {{cssxref("direction")}} do elemento do elemento é rtl (direita-para-esquerda) então scrollLeft é 0 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.

+ +

Sintaxe

+ +
// Obtem o número de pixels rolado
+var sLeft = element.scrollLeft;
+
+ +

sLeft é um inteiro representando o número de pixels do elemento que foi movido para a esquerda.

+ +
// Define o número de pixels rolado
+element.scrollLeft = 10;
+
+ +

scrollLeft pode ser definido para qualquer valor inteiro, entretanto:

+ + + +

Exemplo

+ +
<!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>
+
+ +

Especificações

+ + + + + + + + + + + + + + +
EspecificaçõesStatusComentário
{{SpecName('CSSOM View', '#dom-element-scrollleft', 'scrollLeft')}}{{Spec2("CSSOM View")}} 
+ +

Referências

+ +

{{Compat("api.Element.scrollLeft")}}

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 +--- +

{{ APIRef("DOM") }}

+ +

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.

+ +

Sintaxe

+ +
// Obtém o número de pixels rolados
+var intElemScrollTop = element.scrollTop;
+
+ +

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.

+ +
// Define o número de pixels rolados
+element.scrollTop = intValue;
+
+ +

scrollTop pode ser definido como qualquer valor inteiro, com algumas ressalvas:

+ + + +

Exemplo

+ +
+
+

padding-top

+ +

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.

+ +

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.

+ +

padding-bottom

+
+Left Top Right Bottom margin-top margin-bottom border-top border-bottom
+ +

Image:scrollTop.png

+ +

Especificações

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSSOM View', '#dom-element-scrolltop', 'scrollTop')}}{{Spec2("CSSOM View")}} 
+ +

Referências

+ + 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 +--- +
{{ APIRef("DOM") }}
+ +

A propriedade de somente leitura Element.scrollWidth 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 scrollWidth é maior do que o clientWidth.

+ +
+

Esta propriedade irá arredondar o valor para um número inteiro. Se você precisar de um valor fracionário, use {{ domxref("element.getBoundingClientRect()") }}.

+
+ +

Syntaxe

+ +
var xScrollWidth = element.scrollWidth;
+ +

xScrollWidth é a largura do conteúdo do elemento em pixels.

+ +

Examplo

+ +
<!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>
+
+
+ +

Especificação

+ + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName("CSSOM View", "#dom-element-scrollwidth", "Element.scrollWidth")}}{{Spec2("CSSOM View")}}Definição inicial
+ +

Referências

+ +

{{Compat("api.Element.scrollWidth")}}

+ +

Veja também

+ + 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 +--- +

{{APIRef("DOM")}}

+ +

Adiciona um novo atributo ou modifica o valor de um atributo existente num elemento específico.

+ +

Sintaxe

+ +
element.setAttribute(name, value);
+
+ + + +

Exemplo

+ +

No seguinte exemplo, setAttribute() é usado para definir o atributo {{htmlattrxref("disabled")}} em {{htmlelement("button")}}, desabilitado-o.

+ +
<button>Hello World</button>
+ +
var b = document.querySelector("button");
+
+b.setAttribute("disabled", "disabled");
+
+ +

{{ EmbedLiveSample('Example', '300', '50', '', 'Web/API/Element/setAttribute') }}

+ +

Notas

+ +

Quando chamado em um documento HTML, setAttribute lower-cases its attribute name argument.

+ +

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.

+ +

Apesar de getAttribute() retornar null para atributos ausentes, você precisa usar removeAttribute() ao invés de elt.setAttribute(attr, null) para remover o atributo. Este último forçará o valor null para a string "null", o que não é provavelmente o que você quer.

+ +

Usar setAttribute() 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 elt.value ao invés de elt.setAttribute('value', val).

+ +

Para definir um atributo que não leva valor, assim como o atributo autoplay de um elemento {{HTMLElement("audio")}}, use null ou um valor vazio. Por exemplo: elt.setAttribute('autoplay', '')

+ +
{{DOMAttributeMethods}}
+ +

Especificação

+ + 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 +--- +

{{ APIRef("DOM") }}

+ +

setAttributeNS adiciona um novo atributo ou modifica o valor de um atributo com um namespace e um nome.

+ +

Syntax

+ +
element.setAttributeNS(namespace,name,value)
+
+ + + +

Exemplo

+ +
var d = document.getElementById("d1");
+d.setAttributeNS("http://www.mozilla.org/ns/specialspace", "align", "center");
+
+ +

Notas

+ +

{{ DOMAttributeMethods() }}

+ +

Especificação

+ +

DOM Level 2 Core: setAttributeNS

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 +--- +

{{ApiRef("DOM")}}

+ +

Retorna o nome do elemento.

+ +

Sintaxe

+ +
nomeDoElemento = element.tagName;
+
+ + + +

Notas

+ +

Em XML (e linguagens baseadas, como XHTML), tagName conserva o case  (caixa alta/baixa) da tag. Nos elementos HTML da árvore do DOM marcados como documentos HTML, tagName retorna o nome do elemento em uppercase (caixa alta). O valor de tagName é o mesmo que o nodeName

+ +

Exemplo

+ +

conteúdo HTML

+ +
<span id="exemplo">Descrição do exemplo...</span>
+
+ +

conteúdo JavaScript

+ +
var span = document.getElementById("exemplo");
+console.log(span.tagName);
+
+ +

Em XHTML (ou qualquer outro formato XML), "span" será a saída. Em HTML, "SPAN" será a saída.

+ +

Especificações

+ + + + + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName("DOM3 Core", "core.html#ID-104682815", "Element.tagName")}}{{Spec2("DOM3 Core")}}No change
{{SpecName("DOM2 Core", "core.html#ID-104682815", "Element.tagName")}}{{Spec2("DOM2 Core")}}Initial definition
+ +

Compatibilidade de browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
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 +--- +

O evento touchstart é acionado quando o ponteiro de toque(dedo ou caneta) é aplicado sobre à superfície de toque da tela(toque sobre a tela no elemento alvo).

+ +

Info Geral

+ +
+
Especificações
+
Touch Events
+
Interface
+
{{domxref("TouchEvent")}}
+
Bubbles
+
Sim
+
Cancelável
+
Sim
+
Alvo
+
Documento, Elemento
+
Ação Padrão
+
undefined (indefinido)
+
+ +

Propriedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}EventTargetThe event target (the topmost target in the DOM tree).
type {{readonlyInline}}DOMStringThe type of event.
bubbles {{readonlyInline}}BooleanWhether the event normally bubbles or not.
cancelable {{readonlyInline}}BooleanWhether the event is cancellable or not.
view {{readonlyInline}}WindowProxydocument.defaultView (window of the document)
detail {{readonlyInline}}long (float)0.
touches {{readonlyInline}}TouchListA list of Touches for every point of contact currently touching the surface.
targetTouches {{readonlyInline}}TouchListA list of Touches for every point of contact that is touching the surface and started on the element that is the target of the current event.
changedTouches {{readonlyInline}}TouchListA list of Touches for every point of contact which contributed to the event.
+ 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.
ctrlKey {{readonlyInline}}booleantrue if the control key was down when the event was fired. false otherwise.
shiftKey {{readonlyInline}}booleantrue if the shift key was down when the event was fired. false otherwise.
altKey {{readonlyInline}}booleantrue if the alt key was down when the event was fired. false otherwise.
metaKey {{readonlyInline}}booleantrue if the meta key was down when the event was fired. false otherwise.
+ +

Exemplos

+ +

Os códigos de exemplos para este evento estão disponíveis nesta página dedicada: Touch events.

+ +

Compatibilidade de Navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suporte básico{{CompatChrome("22.0")}}{{CompatGeckoDesktop("18.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidAndroid WebviewChrome para AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Suporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("6.0")}}{{CompatVersionUnknown}}11{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Eventos Relacionados

+ + -- cgit v1.2.3-54-g00ecf