.png)
Entendendo o DOM
Aula 02 - O que é DOM e DOM vs BOM
O DOM é o Document Object Model, é o padrão
de como se acessa e modifica elementos HTML em uma
página. Estrutura os elementos em uma árvore e cria
uma hierarquia hereditária entre os elementos HTML.
O BOM é o Browser Object Model, ele tem a mesma característica de árvore do DOM porém seu objeto pai é o Window do browser e seus filhos são propriedades como o próprio document, o history, location, screen e navigator.
O BOM é o Browser Object Model, ele tem a mesma característica de árvore do DOM porém seu objeto pai é o Window do browser e seus filhos são propriedades como o próprio document, o history, location, screen e navigator.
Selecionando elementos
Aula 03 - Métodos
Estrutura de uma página HTML, tipos de seletores
(tag, id e class). Métodos de seleção de elementos:
getElementById() retorna o próprio
elemento, getElementsByTagName() retorna um
array de elementos (HTML Collection) e
getElementsByClassName retorna um array de
elementos (HTML Collection).
Outros métodos são querrySelector() retorna o elemento e querrySelectorAll() retorna um array de elementos (Node List).
No DOM temos algun métodos para crriar ou remover elementos:
Outros métodos são querrySelector() retorna o elemento e querrySelectorAll() retorna um array de elementos (Node List).
No DOM temos algun métodos para crriar ou remover elementos:
| Método | Desrição |
| document.createElement(element) | Cria um novo elemento HTML |
| document.removeChild(element) | Remove um elemento |
| document.appendChild(element) | Adiciona um elemento filho |
| document.replaceChild(new, old) | Substitui um elemento |
Trabalhando com estilos
Aula 04 - Trabalhando com estilos
Podemos manipular estilos CSS nos elementos
manipulando classes com os métoddos
classList.add() adiciona uma classe,
classList.remove() remove uma classe e
classList.toggle() alterna uma classe com
um evento.
Podemos manuipular estilos diretamente com o método .style.estiloCSS = valor, lembrando que nesse caso os atributos CSS compostos devem ser escritos em camel case
Podemos manuipular estilos diretamente com o método .style.estiloCSS = valor, lembrando que nesse caso os atributos CSS compostos devem ser escritos em camel case
Eventos
Aula 05 - Tipos e Acionando eventos
Eventos de interação com a página. Aguns eventos
são:
mouseover, mouseout, click, dbclick, change, load. Para monitorar eventos utilizamos o método addEventListener(evento, cb).
Para utilizarmos eventos diretamente no HTML utilizamos propriedades que são como os eventos mas precedidos por on (onclick, onmouseover, etc).
mouseover, mouseout, click, dbclick, change, load. Para monitorar eventos utilizamos o método addEventListener(evento, cb).
Para utilizarmos eventos diretamente no HTML utilizamos propriedades que são como os eventos mas precedidos por on (onclick, onmouseover, etc).