Objeto Element HTML DOM

Objeto Elemento

No HTML DOM, o objeto Element representa o elemento HTML, como P, DIV, A, TABLE ou qualquer outro elemento HTML.

Atributos e métodos

Os seguintes atributos e métodos podem ser usados em todos os elementos HTML:

Atributo / Método Descrição
accessKey Definir ou retornar o valor da propriedade accesskey do elemento.
addEventListener() Anexar um manipulador de eventos ao elemento.
appendChild() Adicionar (anexar) um novo nó filho ao elemento.
attributes Retornar o NamedNodeMap de atributos do elemento.
blur() Remover o foco do elemento.
childElementCount Retornar o número de elementos filhos do elemento.
childNodes Retornar o NodeList de nós filhos do elemento.
children Retornar a coleção de elementos filhos do elemento.
classList Retornar o nome da classe do elemento.
className Definir ou retornar o valor da propriedade class do elemento.
click() Simular um clique do mouse no elemento.
clientHeight Retornar a altura do elemento, incluindo a margem interna.
clientLeft Retornar a largura da borda esquerda do elemento.
clientTop Retornar a largura da borda superior do elemento.
clientWidth Retornar a largura do elemento, incluindo a margem interna.
cloneNode() Clonar o elemento.
closest() Procurar o elemento mais próximo no DOM que coincide com o seletor CSS.
compareDocumentPosition() Compara a posição de documentos de dois elementos.
contains() Retorna true se o nó for descendente do nó.
contentEditable Define ou retorna se o conteúdo do elemento é editável.
dir Define ou retorna o valor da propriedade dir do elemento.
firstChild Retorna o primeiro filho do elemento.
firstElementChild Retorna o primeiro elemento filho do elemento.
focus() Deixa o elemento focado.
getAttribute() Retorna o valor do atributo do elemento.
getAttributeNode() Retorna o nó de atributo.
getBoundingClientRect() Retorna o tamanho do elemento e sua posição relativa à viewport.
getElementsByClassName() Retorna a coleção de elementos filhos com a classe fornecida.
getElementsByTagName() Retorna a coleção de elementos filhos com o nome de tag fornecido.
hasAttribute() Retorna true se o elemento tiver o atributo fornecido.
hasAttributes() Retorna true se o elemento tiver qualquer atributo.
hasChildNodes() Retorna true se o elemento tiver qualquer filho.
element.id Define ou retorna o valor da propriedade id do elemento.
innerHTML Define ou retorna o conteúdo do elemento.
innerText Definir ou retornar o conteúdo de texto do nó e de seus descendentes.
insertAdjacentElement() Insere um novo elemento HTML na posição relativa ao elemento.
insertAdjacentHTML() Insere texto no formato HTML na posição relativa ao elemento.
insertAdjacentText() Insere texto na posição relativa ao elemento.
insertBefore() Insere um novo filho antes do filho existente.
isContentEditable Retorna true se o conteúdo do elemento for editável.
isDefaultNamespace() Retorna true se o namespaceURI fornecido for o valor padrão.
isEqualNode() Verifica se dois elementos são iguais.
isSameNode() Verifica se dois elementos são o mesmo nó.
isSupported() Descontinuado.
lang Define ou retorna o valor da propriedade lang do elemento.
lastChild Retorna o último filho do elemento.
lastElementChild Retorna o último elemento filho do elemento.
matches() Retorna true se o elemento correspondente ao seletor CSS.
namespaceURI Retorna o URI do espaço de nomes do elemento.
nextSibling Retorna o nó seguinte na mesma hierarquia de nós.
nextElementSibling Retorna o elemento seguinte na mesma hierarquia de nós.
nodeName Retorna o nome do nó.
nodeType Retorna o tipo de nó.
nodeValue Define ou retorna o valor do nó.
normalize() Combina nós de texto adjacentes no elemento e remove nós de texto vazios.
offsetHeight Retorna a altura do elemento, incluindo margens internas, bordas e barras de rolagem.
offsetWidth Retorna a largura do elemento, incluindo margens internas, bordas e barras de rolagem.
offsetLeft Retorna a posição horizontal deslocada do elemento.
offsetParent Retorna o contêiner deslocado do elemento.
offsetTop Retorna a posição vertical deslocada do elemento.
outerHTML Define ou retorna o conteúdo do elemento (inclusive de tags de início e fim).
outerText Define ou retorna o conteúdo de texto externo do nó e de seus descendentes.
ownerDocument Retorna o elemento raiz (objeto documento).
parentNode Retorna o nó pai do elemento.
parentElement Retorna o nó pai do elemento.
previousSibling Retorna o nó anterior na mesma hierarquia de nós.
previousElementSibling Retorna o elemento anterior na mesma hierarquia de nós.
querySelector() Retorna o primeiro elemento filho que correspondem ao seletor CSS.
querySelectorAll() Retorna todos os elementos filhos que correspondem ao seletor CSS.
remove() Remove o elemento do DOM.
removeAttribute() Remove o atributo do elemento.
removeAttributeNode() Remove o nó de atributo e retorna o nó removido.
removeChild() Remove o nó filho do elemento.
removeEventListener() Remove o manipulador de eventos adicionado com addEventListener().
replaceChild() Substitui os nós filhos do elemento.
scrollHeight Retorna a altura total do elemento, incluindo margens internas.
scrollIntoView() Rollar o elemento para a área visível da janela do navegador.
scrollLeft Definir ou retornar o número de pixels de rolagem horizontal do conteúdo do elemento.
scrollTop Definir ou retornar o número de pixels de rolagem vertical do conteúdo do elemento.
scrollWidth Retornar a largura total do elemento, incluindo a margem interna.
setAttribute() Definir ou alterar o valor da propriedade.
setAttributeNode() Definir ou alterar o nó de atributo.
style Definir ou retornar o valor da propriedade style do elemento.
tabIndex Definir ou retornar o valor da propriedade tabIndex do elemento.
tagName Retornar o nome da tag do elemento.
textContent Definir ou retornar o conteúdo de texto do nó e de seus descendentes.
title Definir ou retornar o valor da propriedade title do elemento.
toString() Converter o elemento em uma string.

Detalhamento da interface Element

A interface Element representa elementos HTML, XML ou de marca. A propriedade tagName especifica o nome do elemento. A propriedade documentElement do Document referencia o objeto Element raiz deste documento. A propriedade body do objeto HTMLDocument também é semelhante, referenciando o elemento <body> do documento. Para encontrar um elemento específico em um documento HTML, use Document.getElementById() (e dê ao elemento um nome único através da propriedade id). Para localizar elementos pelo nome da tag, use getElementsByTagName(), que é tanto um método Element quanto um método Document. Também pode-se usar o método HTMLDocument.getElementsByName() do Document para encontrar elementos com base na propriedade name. Finalmente, pode-se criar um novo elemento Element a ser inserido no documento usando o método Document.createElement().

O método addEventListener() (e seu método alternativo específico para o IE, attachEvent()) oferece a capacidade de registrar funções de manipuladores de eventos específicos para tipos de eventos no elemento. Técnicamente falando, addEventListener(), removeEventListener() e dispatchEvent() são definidos pela interface EventTarget do padrão de eventos DOM de nível 2. Todos os objetos Element implementam EventTarget.

Os outros métodos deste interface fornecem acesso aos atributos do elemento. No documento HTML (e muitos documentos XML), todos os atributos têm valores de string simples e você pode usar métodos simples getAttribute() e setAttribute() para qualquer operação de atributo necessária.

Se você estiver usando um documento XML, ele pode conter referências de entidade como parte do valor do atributo, você precisará usar o objeto Attr e a subárvore de nós. Você pode usar getAttributeNode() e setAttributeNode() para obter e definir o objeto Attr para um atributo, ou pode percorrer os nós Attr no array attributes[] da interface Node. Se você usar um documento XML com espaço de nomes, precisará usar os métodos com nome "NS".

No padrão DOM de nível 1, o método normalize() é parte da interface Elemento. No padrão de nível 2, normalize() é parte da interface Node. Todos os nós Elemento herdam este método e ainda podem usá-lo.

Conhecimento: Nó HTML DOM

No HTML DOM (Modelo de Objetos de Documento), cada parte é um nó:

  • O documento em si é nó de documento
  • Todos os elementos HTML são nós de elemento
  • Todos os atributos HTML são nós de atributo
  • O texto dentro do elemento HTML é nó de texto
  • Os comentários são nós de comentário

Objeto Elemento

No HTML DOM, o objeto Elemento representa o elemento HTML.

O objeto Elemento pode ter subnós de tipos de nó de elemento, nó de texto, nó de comentário.

O objeto NodeList representa uma lista de nós, por exemplo, a coleção de subnós de elementos HTML.

Os elementos também podem ter atributos. Os atributos são nós de atributo (veja a próxima seção).