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

Specification Status Comment
{{SpecName("Web Animations", '', '')}} {{Spec2("Web Animations")}} Adicionado o método getAnimationPlayers().
{{SpecName('Undo Manager', '', 'Element')}} {{Spec2('Undo Manager')}} Adicionadas as propriedades undoScopeundoManager.
{{SpecName('Pointer Events', '#extensions-to-the-element-interface', 'Element')}} {{Spec2('Pointer Events')}} Adicionados os seguintes manipuladores de evento: ongotpointercaptureonlostpointercapture.
Adicionados os seguintes métodos: setPointerCapture()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()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()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 com navegadores

{{CompatibilityTable}}
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Suporte básico 1.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.0 10.0 3.2 (525.3)
insertAdjacentHTML() {{experimental_inline}} 1.0 {{CompatGeckoDesktop("8")}} 4.0 7.0 4.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 msMatchesSelector 11.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()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")}}
undoManagerundoScope {{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()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ística Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Suporte básico 1.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")}}.