Na Pagina

DOM

O DOM só esta presente dentro do navegador.

A arvore DOMcomeça da raiz o window

                                    window
                                            ↓
                location   document   history
                                            ↓
                                        HTML
                                                ↓
                                head         body
                                    ↓               ↓
                        meta   title      ↓
                                                    ↓
                                    h2  p       p   div
                                                    ↓
                                            strong

mapa DOM até essa parte da pagina.

Veremos por ordem de desenvolvimento passo a passo desta maravilhosa plataforma.

Primeiros Comandos

Janelas

Utilizamos o inicio window.

Seguido da funcionalidade desejada;

window.alert('descreve alerta')

window.confirm()

window.prompt()

O JavaScript é case sensitive.

Selecionar elementos DOM

Metedos de acesso	Comando
Marca	`getElementsByTagName()`
ID	`getElementById()`
Nome	`getElementsByName()`
Classe	`getElementsByClassName()`
Seletor	`querySelector('nometag # nomeid')`
Seletor todos	`querSelectorAll('.nomeClasses')`

Clique em mim

Definindo objetos

Para facilitar a manipulação de elementos podemos definir como variáveis


                    var tituloPrincipal = document.querySelector("h2")
        
    tituloPrincipal.textContent = "Document Object Model"

Boas praticas

A fim de manter a coerência do código e evitar falhas.
Utilize classes ou identificadores. Isso garante que mesmo com a mudança de tags o comportamento continue o mesmo.

Separar o script do arquivo html. Facilita a principalmente a manutenção do código. Para isso utilize a tag script:src

<script src=" caminho "></script>

Interações

Fundamentos explicados vamos a integração dos mesmos.
Como vimos acima uma simples reatribuição do .textContent de um arquivo pode modificar seu conteúdo, ainda, existem algumas outra palavras reservadas que permitem a semelhantes reatribuições como .innerText ou .innerHTML

Interagindo com estilo 😎

Após selecionar o elemento a ser manipulado declare o .style em seguida .mudança = "característica"


                                    var titulo = document.querySelector('#colori')
                    titulo.style.color = 'aqua'

Caso a mudança contenha 2 palavras utilize o padrão de sem espaço a parir da segunda palavra começa com maiúscula como .backgroundColor

Estilo em boas praticas

Ao invés de trocar o estilo diretamente, é prudente adicionar uma classe contendo o estilo necessário. Assim a manutenção será feita no CSS e não no JS.


                                            elemento.classList.add("nome classe")

Eventos

Para definir um evento escolha o gatilho que dispara a ação.

Mouse

Outros eventos podem ser conferidos através do Eventos

Codigo	Evento
`mouseenter`	Quando Mouse entra no objeto
`mousemove`	Quando Mouse move sobre o objeto
`mousedown`	Quando Mouse permanece clicado
`mouseup`	Quando Mouse solta o click
`click`	Quando Mouse clica no objeto rapidamente
`mouseout`	Quando Mouse sai do objeto

Função

<div id='nome_id'onclick = 'nome_ação'()>

O método pode ser chamado no html dentro da <tag>

Função

No Script defina a função em um bloco function nome_ação()


                    function alertando()
    {
        alert('clicou')
    }

interagir

Ainda é possível alocar um monitor para chamar o metodo dentro do script.
Utilizando nome_variavel.addEventListener('evento', nome_ação)

Faça um para cada ação.

Função Anónima

A função anonima é uma finção que só existe dentro da chamada do evento.


                                    var teste = document.getElementById('teste')
                    teste.addEventListener('click', funtion ()
                        {
                            alert.( "sou uma função anónima"" )
                        }
                     )

Para prevenir um comportamento padrão dentro de function(event) declare event em seguida event.preventDefault();

Usando dados de input.

Para uma caixa receber uma entrada de usuário utilize a tag <input>
Para capturar o valor do campo defina um objeto para o campo e utilize o elemento .value


                                    <input type="number" name="txt1" id="n1">
                    var txt1 = document.getElementById('n1')
                    txt1.value

O processo pode se tornar mais confortável e cognoscível caso seja definido um objeto para o <form> já que pode ser usado o name do input com o .value


                    var formulário = document.getElementsByTagName('form')
    formulário.txt1.value

Separe seus Scripts

Utilize a tag <script src=" local "> modularize a fim de trabalhar melhor o código.

Manipulando Elementos

Inserindo

Utilizaremos a document.createElement('tag')

O comando obj.setAttribute('id','valor') insere atributos ao objeto.

E para inserir o local.appendChild(obj)
Onde através do documet pode ser expressado todo caminho DOM onde será alocado o elemento criado.


                    var produtoTr = document.createElement("tr")
    var produtoTd = document.createElement("td")

    produtoTr.appendChild(produtoTd)
                    
    var tabela = document.querySelector('.corpoTabela')
    tabela.appendChild(produtoTr)

Com .appendChild() é possível encadear elementos para inserir componentes complexos como tabelas. Para uma melhor organização do codigo utilize objetos para construir os elementos já encadeados.