Fundamentos do DOM
Este curso explica o DOM, a árvore viva de objetos que o navegador constrói a partir do texto HTML enviado por uma app Rails. Trata de nós de elemento, de texto e comentário, das relações de família entre nós e da raiz document. Mostra como inspecionar a árvore com as DevTools e como seletores e combinadores CSS encontram nós. Mostra ainda como o JavaScript e o Turbo mudam a árvore depois do carregamento. Define render tree, reflow, repaint, virtual DOM e Shadow DOM, e lê um cartão de produto.
O que você vai aprender
- ✓A diferença entre o texto HTML que o servidor envia e a árvore DOM que o navegador constrói
- ✓Tipos de nó, relações na árvore e a raiz document
- ✓Como ler e editar temporariamente o DOM vivo nas DevTools
- ✓Como seletores CSS, combinadores e querySelector encontram nós na árvore
- ✓Como mudar o DOM com createElement, appendChild, textContent e remove, e como o Turbo Drive e os Turbo Frames o atualizam
- ✓O significado de render tree, reflow, repaint, virtual DOM e Shadow DOM
O que é o DOM, de verdade?
Comece por um fato sobre toda página que uma app Rails serve. O HTML que seu servidor envia pela rede é só texto, uma sequência de caracteres como qualquer outro arquivo. Quando um navegador recebe esse texto, ele constrói outra coisa a partir dele: uma árvore viva de objetos na memória, chamada…
Ler a aula completa grátis →Currículo
7 aulasO que é o DOM, de verdade?
Mostra como o navegador transforma o texto HTML de uma app Rails numa árvore viva de objetos na memória.
Nós, elementos, e a árvore
Apresenta nós de elemento, texto e comentário, termos como pai e descendente, a raiz document e os atributos.
Inspecionando o DOM com as DevTools
Ensina a abrir as DevTools, navegar no painel Elements, ler estilos, fazer edições temporárias e usar o Console.
Como seletores CSS andam pela árvore
Explica como seletores de tag, classe, ID e combinadores encontram nós, além de especificidade e querySelector no JavaScript.
O DOM está vivo: como o JavaScript (e o Turbo) mudam ele
Trata das operações JavaScript que mudam o DOM, do funcionamento do Turbo Drive e dos Frames e dos riscos do innerHTML.
Termos do DOM que você vai continuar ouvindo
Define CSSOM, render tree, reflow, repaint, virtual DOM e Shadow DOM com base no modelo de árvore.
Juntando tudo: lendo a árvore DOM de uma página de verdade
Aplica todos os conceitos a um cartão de produto, desde desenhar a árvore até adicionar um nó pelo Console.