Javascript
Responsive Web Development
Clayton Rafael
Frontend Developer & Tech Lead
Formado em sistemas para Internet
Pós-Graduado em Banco de dados
https://www.linkedin.com/in/clayton-rafael/
profclayton.souza@fiap.com.br
pf1874@fiap.com.br
Document
Object Model
(DOM)
JS - Document Object Model (DOM)
O Document Object Model (DOM) é uma interface de programação para documentos HTML.
Ele representa a página de modo que o JS possa alterar a estrutura do documento, estilo e conteúdo.
O DOM fornece uma representação da página como um grupo estruturado de nós e objetos, possibilitando
que as linguagens de script como JavaScript interagem com o texto, estilos e estrutura do documento.
Pode ser usado para tratar eventos, criar dinamismo e interagir com o usuário.
JavaScript pode acessar e alterar todos os elementos de um documento HTML através do DOM
Ex:
JS - DOM
Entendendo o DOM
Uma representação gráfica de uma árvore DOM,
mostrando como o HTML é transformado em uma
estrutura de nós que inclui document, html, head,
body, div, p, etc.
JS - DOM
Estrutura de Árvore do DOM
O DOM é estruturado como uma árvore de nós, onde cada nó representa uma parte do documento
(por exemplo, um elemento, um atributo, ou texto).
Relações:
Parent (Pai): Elemento diretamente superior na hierarquia.
Child (Filho): Elemento diretamente inferior na hierarquia.
Sibling (Irmão): Elementos no mesmo nível de hierarquia.
Nós e Elementos
Node (Nó): Qualquer item na árvore do DOM, incluindo elementos, atributos de texto e comentários.
Element (Elemento): Um tipo de nó que representa as tags HTML.
JS - DOM
Exemplo de Árvore do DOM
JS - DOM
Selecionando Elementos no DOM
Podemos acessar e manipular as informações e
atributos dos nossos elementos HTML pelo ID,
Classe, nome da TAG e etc.
JS DOM - Métodos de Seleção de Elementos
document.getElementById(id)
● Seleciona um único elemento pelo seu atributo id.
● Retorna um objeto Element ou null se nenhum elemento com o ID especificado for encontrado.
Ex:
Pode também ser utilizado para alterar o conteúdo/propriedade de elementos:
document: refere-se a página html;
getElementById( ): recupera um elemento pelo seu ID;
innerText: utilizamos para alterar/inserir o novo conteúdo do elemento selecionado.
JS DOM - Métodos de Seleção de Elementos
JS DOM - Métodos de Seleção de Elementos
document.getElementsByTagName(tagName)
● Seleciona uma lista de elementos que correspondem ao nome da tag especificada.
● Retorna uma coleção HTML ao vivo de elementos.
Ex:
document.getElementsByClassName(className)
● Seleciona uma lista de elementos que têm o atributo class especificado.
● Retorna uma coleção HTML ao vivo de elementos.
Ex:
JS DOM - Métodos de Seleção de Elementos
document.querySelector(selector)
● Seleciona o primeiro elemento que corresponde ao seletor CSS especificado.
● Retorna um objeto Element ou null se nenhum elemento corresponder.
Ex:
document.querySelectorAll(selector)
● Seleciona todos os elementos que correspondem ao seletor CSS especificado.
● Retorna uma NodeList estática de elementos encontrados.
Ex:
JS - DOM
Manipulando Elementos
Quando falamos em manipulação, estamos nos
referindo à capacidade de alterar, adicionar,
remover ou modificar elementos HTML e seus
atributos de estilo diretamente com JavaScript.
JS DOM - Manipulando Elementos
Quando falamos em manipulação, estamos nos referindo à capacidade de alterar, adicionar, remover
ou modificar elementos HTML e seus atributos de estilo diretamente com JavaScript.
Alterando Conteúdo de Texto
innerText: Permite obter ou definir o conteúdo de texto de um elemento.
innerHTML: Permite obter ou definir a marcação HTML dentro do elemento selecionado. Permite a
inserção de novos elementos HTML na página.
JS DOM - Manipulando Elementos
Alterando estilo
Style
● A propriedade style permite alterar o estilo CSS de um elemento.
● Cada propriedade CSS é acessível como uma propriedade do objeto style.
JS DOM - Criando Elementos
Quando a manipulação de elementos existentes não é suficiente, o JavaScript nos permite criar novos
elementos dinamicamente e adicioná-los ao DOM. Isso é especialmente útil para atualizar a UI em
resposta a ações do usuário, como adicionar novos itens a uma lista ou criar novas mensagens em um
chat.
document.createElement()
Permite obter ou definir o conteúdo de texto de um elemento.
JS DOM - Criando Elementos
parentNode.appendChild()
Adiciona um novo elemento como último filho do elemento pai especificado.
JS DOM - Removendo Elementos
parentNode.removeChild()
Remove um filho do elemento pai especificado no DOM.
JS - DOM
Trabalhando com Classes de Elementos
As classes CSS são fundamentais para a
estilização de páginas web. Com JavaScript,
podemos dinamicamente adicionar, remover e
alternar classes em elementos do DOM para
alterar sua aparência e comportamento.
JS DOM - Visualizando Classes Atuais
element.classList
Uma propriedade somente leitura que retorna uma coleção das classes do elemento.
HTML
JS
JS DOM - Adicionando Classes
element.classList.add('nome-da-classe')
Adiciona uma ou mais classes ao elemento. Se a classe já existir, não será adicionada novamente.
JS DOM - Removendo Classes
element.classList.remove('nome-da-classe')
Remove uma ou mais classes do elemento. Se a classe não existir, nenhum erro será lançado.
JS DOM - Alternando Classes
element.classList.toggle('nome-da-classe')
Adiciona a classe se ela não estiver presente, ou remove se estiver.
Mão na massa
Quero mais!
Curso Javascript (Introdução)
Curso Javascript (métodos de array)
JavaScript para Web: Crie páginas dinâmicas
