DOM JavaScript – Acervo Lima Tutorials

Esta seção cobre o Document Object Model (DOM) JavaScript e mostra como manipular elementos DOM de maneira eficaz.

Seção 1. Primeiros passos

Compreendendo o modelo de objeto de documento em JavaScript

Seção 2. Seleção de elementos

getElementById() – selecione um elemento por id.
getElementsByName() – seleciona elementos por nome.
getElementsByTagName() – seleciona elementos por um nome de tag.
getElementsByClassName() – seleciona elementos por um ou mais nomes de classe.
querySelector() – seleciona elementos por seletores CSS.

Seção 3. Elementos transversais

Obtenha o elemento pai – obtenha o nó pai de um elemento.
Obtenha elementos filhos – obtenha filhos de um elemento.
Obtenha irmãos de um elemento – obtenha irmãos de um elemento.

Seção 4. Manipulação de elementos

createElement() – cria um novo elemento.
appendChild() – anexa um nó a uma lista de nós filhos de um nó pai especificado.
textContent – obtém e define o conteúdo de texto de um nó.
innerHTML – obtém e define o conteúdo HTML de um elemento.
innerHTML vs. createElement – explique as diferenças entre innerHTML e createElement quando se trata de criar novos elementos.
DocumentFragment – aprenda como compor nós DOM e inseri-los na árvore DOM ativa.
after() – insere um nó após um elemento.
acrescentar() – insere um nó após o último nó filho de um nó pai.
prepend() – insere um nó antes do primeiro nó filho de um nó pai.
insertAdjacentHTML() – analisa um texto como HTML e insere os nós resultantes no documento em uma posição especificada.
replaceChild() – substitui um elemento filho por um novo elemento.
cloneNode() – clona um elemento e todos os seus descendentes.
removeChild() – remove elementos filhos de um nó.
insertBefore() – insere um novo nó antes de um nó existente como um nó filho de um nó pai especificado.
Função auxiliar insertAfter() – insere um novo nó após um nó existente como um nó filho de um nó pai especificado.

Seção 5. Trabalhando com Atributos

Atributos HTML e propriedades do objeto DOM – entenda a relação entre os atributos HTML e as propriedades do objeto DOM.
setAttribute() – define o valor de um atributo especificado em um elemento.
getAttribute() – obtém o valor de um atributo em um elemento.
removeAttribute() – remove um atributo de um elemento especificado.
hasAttribute() – verifica se um elemento possui um atributo especificado ou não.

Seção 6. Manipulando Estilos de Elementos

propriedade style – obtém ou define estilos embutidos de um elemento.
getComputedStyle() – retorna o estilo computado de um elemento.
Propriedade className – retorna uma lista de classes CSS separadas por espaço.
Propriedade classList – manipula classes CSS de um elemento.
Largura e altura do elemento – obtenha a largura e a altura de um elemento.

Seção 7. Trabalhando com Eventos

Eventos JavaScript – apresenta os eventos JavaScript, os modelos de eventos e como lidar com eventos.
Manipulação de eventos – mostra três maneiras de lidar com eventos em JavaScript.
Eventos de carregamento de página – aprenda sobre os eventos de carregamento e descarregamento de página.
evento de carregamento – orienta você nas etapas de manipulação do evento de carregamento originado dos elementos de documento, imagem e script.
DOMContentLoaded – aprenda como usar o DOMContentLoadedevento corretamente.
Evento beforeunload – orienta você sobre como mostrar uma caixa de diálogo de confirmação antes que os usuários saiam da página.
evento unload – mostra como lidar com o evento unload que é acionado quando a página é completamente descarregada.
Eventos de mouse – como lidar com eventos de mouse.
Eventos de teclado – como lidar com eventos de teclado.
Eventos de rolagem – como lidar com eventos de rolagem de maneira eficaz.
scrollIntoView – aprenda como rolar um elemento para visualização.
Eventos de foco – cobre os eventos de foco.
Evento haschange – aprenda como lidar com o evento quando o hash do URL muda.
Delegação de Evento – é uma técnica de alavancar a bolha de evento para lidar com eventos em um nível mais alto no DOM do que o elemento no qual o evento se originou.
dispatchEvent – aprenda como gerar um evento a partir do código e acioná-lo.
Eventos personalizados – defina um evento JavaScript personalizado e anexe-o a um elemento.
MutationObserver – monitore as alterações do DOM e invoque um retorno de chamada quando as alterações ocorrerem.

Seção 8. Script de Formulários Web

Formulário JavaScript – aprenda como lidar com submiteventos de formulário e realizar uma validação simples para um formulário web.
Botão de opção – mostra como escrever JavaScript para botões de opção.
Caixa de seleção – orienta você sobre como manipular a caixa de seleção em JavaScript.
Caixa de seleção – aprenda como lidar com a caixa de seleção e sua opção em JavaScript.
Adicionar/remover opções – mostra como adicionar e remover opções dinamicamente de uma caixa de seleção.
Removendo itens do elemento <select> condicionalmente – mostra como remover itens de um <select>elemento condicionalmente.
Manipulando eventos de mudança – aprenda como lidar com o evento de mudança do texto de entrada, botão de opção, caixa de seleção e elementos de seleção.
Tratamento de evento de entrada – trata o evento de entrada quando o valor do elemento de entrada muda.