DOM e manipulação de elementos

CAPÍTULO 1
DOM
DOCUMENT
OBJECT MODEL
MODELO DE OBJETO DE DOCUMENTO
DOM
DOM
1. ENCONTRAR ELEMENTOS
2. ACESSAR E DEFINIR CONTEÚDO
3. ALTERAR ESTILO DOS ELEMENTOS
4. CRIAR EVENT LISTENERS
DOM - ACESSAR CONTEÚDO
<!DOCTYPE html>
<html lang="en">
Lista de Receitas <head>...</head>
● Bolo de Chocolate <body>
● Cookies ... <h1>Lista de Receitas<h1> == $0
● Torta de Banana
● Brigadeiro <ul>...</ul>
● Bolo de Cenoura <script src="app/app.js"></script>
</body>
</html>
DOM - ADICIONAR INTERATIVIDADE
DOM E O NAVEGADOR
DOM X HTML
<h1>Lista de Receitas</h1>
Lista de Receitas <ul>
<li>Bolo de Chocolate</li>
● Bolo de Chocolate
● Cookies <li>Cookies</li>
● Torta de Banana <li>Torta de Banana</li>
● Brigadeiro <li id="importante">Brigadeiro</li>
● Bolo de Cenoura
<li>Bolo de Cenoura</li>
</ul>
CAPÍTULO 2
NODELISTS
<ul>
Aqui temos 5 elementos
<li>Cookies</li> <li> que estão contidos
<li>Torta de Banana</li> entre uma tag de abertura
<li id="importante">Brigadeiro</li> <ul> e uma tag de
</ul>
fechamento </ul>
NODELISTS
<ul> Elemento Pai/Mãe
<li>Cookies</li>
<li>Torta de Banana</li> Elemento Filho
<li id="importante">Brigadeiro</li>
</ul>
NODELISTS SELEÇÃO TRANSVERSAL
ATRAVÉS DO
ELEMENTO PAI/MÃE
UL
LI LI LI LI LI
SELEÇÃO
DIRETA
NODELISTS
ÍNDICE ELEMENTO
0 <li>Bolo de Chocolate</li>
1 <li>Cookies</li>
2 <li>Torta de Banana</li>
3 <li id="importante">Brigadeiro</li>
4 <li>Bolo de Cenoura</li>
ACESSANDO ELEMENTOS DO DOM
MÉTODO DESCRIÇÃO
Retorna um elemento específico
getElementByID()
através do "Id" associado a ele
Retorna o primeiro elemento encontrado

querySelector()
no documento que contenha o seletor CSS definido
Retorna um Array com todos os elementos encontrados

getElementByClassName()
no documento com uma "Class" específica.
Retorna um Array com todos os elementos

getElementsByTagName()
que possuem uma tag específica.
Retorna um Array com todos os elementos

querySelectorAll()
que possuem um seletor CSS específico.
CAPÍTULO 3
MANIPULAÇÃO DE DOM
Lista de Receitas <ul>
● Cookies <li>Cookies</li>
● Torta de Banana <li>Torta de Banana</li>
● Brigadeiro <li id="importante">Brigadeiro</li>
● Bolo de Cenoura
</ul>
INNERHTML
document.getElementByID(id).innerHTML = "novo HTML"

INNERHTML
document.getElementsByTagName('li')[0].innerHTML = '<a href="">Bolo de Chocolate</a>';
Lista de Receitas
● Cookies
● Torta de Banana
● Brigadeiro
● Bolo de Cenoura
TEXTCONTENT
document.getElementByID(id).textContent = "novo conteúdo"

TEXTCONTENT
document.getElementById('importante').textContent = 'Beijinho'
Lista de Receitas
● Cookies
● Torta de Banana
● Brigadeiro
● Bolo de Cenoura
INNERHTML VS TEXT CONTENT
possibilita Altera apenas

que você altere o o conteúdo
HTML do elemento do elemento
selecionado. selecionado.
CREATEELEMENT
PASSO 1
var novoElemento = document.createElement('li')
PASSO 2
novoElemento.textContent("Conteúdo")
PASSO 3
document.body.appendChild(novoElemento)
CREATEELEMENT
PASSO 1
PASSO 2
PASSO 3
CREATEELEMENT
PASSO 1
PASSO 2
PASSO 3
CREATEELEMENT
const novoItem = document.createElement('li');
novoItem.textContent = 'Brownie';
document.getElementsByTagName('ul')[0].appendChild(novoItem);
Lista de Receitas
● Cookies
● Torta de Banana
● Brigadeiro
● Bolo de Cenoura
SETATTRIBUTE
document.getElementByID(id).setAttribute(atributo, valor);
SETATTRIBUTE
document.querySelector('li').setAttribute("class", "bolo");
<body>
<ul>
... <li class="bolo">...</li == $0
<li>...</li>
<li>...</li>
<li id="importante">...</li>
<li>...</li>
</ul>
SETATTRIBUTE
Lista de Receitas
● Cookies
● Torta de Banana
● Brigadeiro
● Bolo de Cenoura
CAPÍTULO 4
EVENTOS
EVENTOS
EVENTO
EVENT LISTENER
element.addEventListener('nomeDoEvento', FuncaoParaExecutar);
EVENT LISTENER - EXEMPLO
//PASSO 1
function mostrarAlerta(){
alert("O botão foi clicado!")
};
//PASSO 1
};
//PASSO 2
const botao = document.querySelector('button')
//PASSO 1
};
//PASSO 2
const botao = document.querySelector('button')
//PASSO 3
botao.addEventListener('click', mostrarAlerta);
LISTA DE EVENTOS
EVENTO DESCRIÇÃO
'click' Quando acontece um click
'keydown' Quando o usuário aperta uma tecla no teclado
'keyup' Quando o usuário solta uma tecla no teclado
'focus' Quando um elemento recebe foco
'blur' Quando um elemento perde o foco
'submit' Quando o usuário envia um formulário
'load' Quando a página é carregada por completo
'resize' Quando a janela do navegador muda de tamanho
'scroll' Quando a página é rolada para cima ou para baixo
'mouseenter' Quando o cursor do mouse entra em um elemento
'mouseleave' Quando o cursor do mouse sai de um alemento
HTML
<div class="quadrado"></div>
CSS
.quadrado{
width: 200px;
height: 200px;
background-color: black;
margin: 100px;
}
HTML JS
<div class="quadrado"></div> document.querySelector('.quadrado').addEventListener('click'
, pintarDeVermelho)
function pintarDeVermelho(){
this.style.backgroundColor = "red";
CSS }
.quadrado{
width: 200px;
height: 200px;
margin: 100px;
}
HTML JS
<div class="quadrado"></div> document.querySelector('.quadrado').addEventListener('click'
, pintarDeVermelho)
CSS }
.quadrado{
width: 200px;
height: 200px;
margin: 50px;
}
HTML JS
<div class="quadrado"></div> const quadrados = document.querySelectorAll('.quadrado');
<div class="quadrado"></div> console.log(quadrados, "--> Quadrados");
<div class="quadrado"></div>
for (let i=0; i< quadrados.length; i++){

CSS }
quadrados[i].addEventListener('click', pintarDeVermelho)
.quadrado{
width: 200px;
height: 200px;
}
margin: 50px;
display: inline-block;
}
CAPÍTULO 5
JQUERY - SELEÇÃO
//JS Vanilla
document.getElementsByTagName('h2');
//jQuery
$('h2');
JQUERY - INSTALAÇÃO
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>Document</title>
</head>
JQUERY - SELEÇÃO
$('Elemento')
JQUERY - INSTALAÇÃO
//jQuery
const $h2 = $('h2');
A notação $ é usada antes da

variável a qual estamos atribuindo
um objeto jQuery apenas para nos
lembrar que aquela variável contém
um elemento jQuery. É uma
convenção comum!
JQUERY - MODIFICAÇÃO
HTML
<h2 id="titulo">Meu título</h2>
JS
const titulo = document.getElementById('titulo');
titulo.innerHTML = 'Lista de Tarefas';
JQUERY - MODIFICAÇÃO
HTML
<h2 id="titulo">Meu título</h2>
JQUERY
$('#titulo').html('Lista de Tarefas')
JQUERY - EVENT HANDLER
HTML
<button id="btn">Clique Aqui</button>
JQUERY
const $btn = $('#btn');
$btn.on('click');
JQUERY - EVENT LISTENER
JQUERY
const $btn = $('#btn');
$btn.on('click', () => {
console.log("Alguém clicou no botão!")
});

DOM e manipulação de elementos

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

DOM e manipulação de elementos

Enviado por

Direitos autorais:

Formatos disponíveis

CAPÍTULO 1

Retorna o primeiro elemento encontrado

Retorna um Array com todos os elementos encontrados

Retorna um Array com todos os elementos

Retorna um Array com todos os elementos

document.getElementByID(id).innerHTML = "novo HTML"

document.getElementsByTagName('li')[0].innerHTML = '<a href="">Bolo de Chocolate</a>';

document.getElementByID(id).textContent = "novo conteúdo"

possibilita Altera apenas

for (let i=0; i< quadrados.length; i++){

A notação $ é usada antes da

Você também pode gostar