codelab@ime.usp.br
Grupo de extensão universitária que como objetivo estimular a inovação tecnológica na USP
WebDev
Manipulando a DOM com JavaScript
Aula 4
USPCodeLab
Facebook:
Este trabalho do USPCodeLab está licenciado com uma Licença Creative Commons - Atribuição 4.0 Internacional
O USPCodeLab é um grupo de extensão que tem como objetivo estimular a inovação tecnológica na USP
Relembrando o DOM
<html>
<head>
<title>My title</title>
</head>
<body>
<a href="">My link</a>
<h1>Header</h1>
</body>
</html>html
head
body
title
a
h1
href
Header
My link
Acesso/modificação do HTML no JS
const linkTag = /* ... */;
const h1Tag = /* ... */;Selecionando elementos na DOM
document.querySelector()
- Seleciona um elemento da DOM passando um seletor
- ID, Classe, Tag ....
- Seleciona a primeira ocorrência do seletor
Selecionando elementos na DOM
<html>
<head>
<title>My title</title>
</head>
<body>
<a href="">My link</a>
<h1 id="head" class="headers">Header</h1>
<h2 class="headers"> Header2 </h2>
</body>
</html>const mainHeader = document.querySelector("#head")
const allHeaders = document.querySelector(".headers")
const myLinks = document.querySelector("a'")
Selecionando elementos na DOM
document.querySelectorAll()
- Retorna todos elementos com o seletor
<html>
<head>
<title>My title</title>
</head>
<body>
<a href="">My link</a>
<h1 id="head" class="headers">Header</h1>
<h2 class="headers"> Header2 </h2>
</body>
</html>const allHeaders = document.querySelectorAll(".headers")
allHeaders[0]
allHeaders[1]
Modificando elementos na DOM
innerHTML
- Propriedade de elementos HTML
- Descreve o conteúdo de uma tag
- Podemos mudá-la no script e isso será refletido no HTML
<html>
<head>
<title>My title</title>
</head>
<body>
<a href="">My link</a>
<h1>Header</h1>
</body>
</html>const linkTag = document.querySelector('a')
<a href="">My link</a>console.log(linkContent) //My link
Modificando elementos na DOM
const linkContent = linkTag.innerHTML
classList
Modificando elementos na DOM
Usado para alterar as classes dos elementos
classList.add()
classList.remove()
classList.toggle()
Interagindo com o usuário
button
<button onclick="onButtonClick()">
Click me
</button>function onButtonClick() {
console.log("Clicked");
}Interagindo com o usuário
input
<input />console.log(document.querySelector("input").value)Tarefa
Adicione um botão de modo noturno (ou modo claro) na sua página
<script src="myscripts.js"></script>Para linkar o javascript e seu html, lembre de adicionar essa tag ao seu head
Passe a página para o github
WebDev
Obrigado pela presença :)
WebDev 2023 - Aula 4 - Manipulando a DOM com o Javascript
By codelab@ime.usp.br
