D.O.M | Notion

Estrutura HTML5

<!DOCTYPE html>
<html lang="pt-br">
   <head>
       <meta charset="utf-8"/>
       <title>title</title>
   </head>
   <body>
			 <h1 id="titulo"> Salve quebrada!</h1>
   </body>
</html>

selecionar elementos de uma página

document.getElementById('titulo') retorna <h1 id="titulo">

document.getElementByTagName('li') retorna um array com os elementos li

document.getElementByClassName('Texto') retorna um array com tudo que tem a classe Texto

document.querySelectorAll('.primeira-classe .segunda-classe') retorna tudo que tiver as duas classes

document.querySelectorAll('li .opcao')

retorna todos os li que tem a class opcao

Adicionar e deletar elementos

Classes - Element.classList

Como o próprio nome já prevê, classList é uma lista de classes e contém alguns métodos muito interessante...

Untitled

Métodos do classList

Untitled

Mudando a estilização com JS

Untitled

Eventos

Os eventos são qualquer tipo de ação que o usuário faz ao interagir em uma pág.

Eventos do mouse:

mouseover - Quando coloca o mouse em cima do elemento
mouseout - Quando você tira o mouse do elemento
click - Quando clica no elemento
dbclick - Double click no elemento

Eventos de atualização

change - Quando o valor de um elemento é alterado
load -Executa a função quando todos os recursos terminarem de carregar

Como ativar os eventos

Quando usada diretamente no JS, cria um evento que vai ser acionado no momento em que o usuário realizar determinada ação.

Untitled

Quando usada diretamente no html, usa-se onclick='nomeDaFuncao' que especifica a função a ser chamada diretamente no elemento HTML.