Introdução ao DOM - Curso JavaScript #09

Показать описание

Você sabe o que significa a sigla DOM? Sabe para que serve o Document Object Model? Sabe como criar uma árvore DOM para o seu site? Sabe como usar o JavaScript para manipular o DOM? Sabe para que servem os elementos Parent e Child em um DOM? Sabe utilizar os métodos getElementByTagName, getElementById, getElementByName, getElementByClassName, querySelector de acesso ao DOM no JavaScript?

Pois, para responder a essas e muitas outras perguntas, assista essa aula do Curso de JavaScript para Iniciantes até o final. E não se esqueça sempre de praticar todas as atividades que fizermos durante o vídeo no seu próprio computador.

Aula do Curso de JavaScript e ECMAScript para Iniciantes, criado pelo professor Gustavo Guanabara para o canal CursoemVideo.

Curso em Vídeo

Patrocínio

#CursoemVideo #JavaScript #EcmaScript #MóduloC #Aula09

Рекомендации по теме

Комментарии

Pra quem baixou o live server no lugar do watch in chrome, que não está mais disponível, e não sabe como usar aqui vai uma ajudinha:
*Depois de instalar a extensão live server*

Vá na aba que tem aqueles papeizinhos e clique com o botão direito no arquivo que você quiser abrir com o live server e aperte em "open with live server".

Prontinho agora é só continuar programando!
Espero ter ajudado.

eduardavitti

Geralmente eu não comento muito o curso, mas hoje eu cheguei bem mais cansado que o comum, o dia inteiro trabalhando, cabeça explodindo, um milhão de coisas acontecendo... E eu queria falar com você, que tem milhares de outros compromissos, que chegou aqui cansado, queria dizer que você é FODA! Respira, toma um café e vamos nessa! Você vai vencer essa coisa ruim, seu dia pode ter sido péssimo, mas esse professor vai transformar o seu dia e vai fazer você se lembrar o real motivo do que te trouxe até aqui! Acabou de acontecer comigo e eu tenho certeza que vai acontecer com você também! Boa sorte com seus estudos!

lukamorais

/* Galera começando 2024 com esse curso */

nerdiria

Watch in Chrome parece não estar mais disponível, fui pelo Live Server também, segundo a dica do pessoal aí nos comentários. Valeu!!!

diegoavedissian

Para quem chegou em 2023, o WATCH IN CHROME não existe mais. Basta instalar o LIVE SERVER, depois selecionar o arquivo HTML e com o botão direito clicar na opção OPEN WITH LIVE SERVER. Pronto! Não se esqueça de salvar toda vez que modificar algo (eu uso o CTRL + F5).

Para todos ai nos comentários q deram a dica do LIVE SERVER, muito obrigado vcs são meus heróis.👍👍👍👍

franciscohelves

Dica pra não precisar usar a extensão: adicionem essa TAG dentro do HEAD

<meta http-equiv="refresh" content="1.0">

A página vai atualizar a cada 1 segundo.

pedrocrepaldi

NOVIDADES:

O que é DOM?

DOM (Document Object Model), Modelo de Objeto para Documento, é uma *INTERFACE padronizada utilizada para REPRESENTAR um DOCUMENTO HTML. Este modelo utiliza uma linguagem neutra que, por meio de uma árvore hierárquica de diretórios, permite você ACESSAR e INTERAGIR com QUALQUER ELEMENTO de seu DOCUMENTO de maneira DINÂMICA com o uso do JavaScript. Desta forma, o JS tem o poder de:
alterar, excluir e adicionar: elementos HTML, atributos HTML, eventos HTML, estilos CSS.
*Interface, do latim INTER(entre) + FACIES(faces), significa: ligação física ou lógica entre 2 sistemas ou partes que não poderiam ser conectados diretamente.
Ou seja, o DOM é o INTERMEDIADOR da COMUNICAÇÃO da linguagem JavaScript com as tecnologias HTML5 e CSS3.

Ilustração de uma árvore DOM:
window
/ | \
location document history
|
html
/ \
head body
/ | / | | \
meta title h1 p p div
|
strong

Parent (pai) - é quem está ACIMA na árvore HIERARQUICA.
Child (filho) - é quem está ABAIXO na árvore HIERARQUICA.
É como se fosse uma árvore genealógica. Exemplos:
HEAD e BODY são FILHOS de HTML;
HTML é PAI de HEAD e BODY;
HTML é FILHO de DOCUMENT.

É importante ressaltar que: um DOCUMENTO HTML e sua REPRESENTAÇÃO DOM são a MESMA COISA. A única diferença é que estes estão REPRESENTADOS de FORMAS DIFERENTES. Ex:
("uma garrafa") e ("a bottle") são a MESMA COISA, só que representadas em línguas diferentes. É a mesma ideia.
Caso você altere o DOCUMENTO HTML você também alterará o seu DOM e vice-versa.

Como ACESSAR/SELECIONAR ELEMENTOS através do DOM:
Lista de 5 MÉTODOS de acesso:
by Tag - getElementsByTagName("")
by ID - getElementByID("")
by Name - getElementsByName("")
by Class - getElementsByClassName("")
by Selector - querySelector (""); querySelectorAll ("");

O método getElementsByTagName() SELECIONA ELEMENTOS via TAG.
O método getElementById() SELECIONA UM ELEMENTO via ID.
O método getElementsByName() SELECIONA ELEMENTOS via NOME.
O método getElementsByClassName("") SELECIONA ELEMENTOS via CLASSE.
O método querySelector() SELECIONA UM ELEMENTO via SELETOR CSS.
O método queySelectorAll() SELECIONA ELEMENTOS via SELETOR CSS.

*Atente-se que alguns dos seletores estão no SINGULAR e outros no PLURAL (Element e Element*S*)
Caso utilize um seletor que está no PLURAL, para ESPECIFICAR qual TAG, NAME ou CLASS você deseja ACESSAR, você têm que usar, após os parênteses (), os colchetes [] e, dentro destes, você indicará qual a POSIÇÃO do elemento que você deseja ACESSAR.
Ex da aula:

Neste exemplo selecionou-se, dentro dos parênteses, todas as tags <p>. E, dentro dos colchetes, selecionou-se a tag <p> que se encontra na 1° POSIÇÃO, ou seja, a 2° tag <p>.
*Lembrando que a contagem começa em 0. Portanto:
a posição 0 é a 1° tag <p>
a posição 1 é a 2° tag <p>
a posição 2 é a 3° tag <p> ...

Diferença entre .innerText e .innerHTML :

A propriedade .innerText serve para DEFINIR ou RETORNAR o CONTEÚDO de TEXTO de um ELEMENTO.

A propriedade .innerHTML serve para DEFINIR ou RETORNAR o CONTEÚDO HTML (texto+formatação) de um ELEMENTO.

ILUSTRAÇÃO (crie um outro documento, monte a estrutura básica HTML5 (!+enter) e insira este código dentro do body):

<body>
<h1>Diferença entre innerText e InnerHTML:</h1>
<p class="teste_1"></p>
<p id="teste_2"></p>
<script>
var variavel_1 =
variavel_1.innerText = "Teste do <strong>innerText</strong>"

var variavel_2 =
variavel_2.innerHTML = "Teste do <strong>innerHTML</strong>"
</script>
</body>

ALGUMAS DEFINIÇÕES:

*Um OBJETO no JS é um CONTAINER de PROPRIEDADES e MÉTODOS.

*Uma FUNÇÃO no JS é um subprograma que pode receber PARÂMETROS e RETORNAR um resultado. São AÇÕES executadas assim que são CHAMADAS ou em decorrência de algum EVENTO. É um bloco de códigos projetado para executar uma tarefa ou calcular um valor.

*Um MÉTODO no JS é uma FUNÇÃO que está armazenada na forma de um CONJUNTO DE PROPRIEDADES dentro de um OBJETO. Ou seja, MÉTODOS são AÇÕES que podem ser performadas em OBJETOS.

*Um EVENTO no JS é uma CONDIÇÃO que, quando verdadeira, fará a CHAMADA de uma FUNÇÃO.

*O Seletor de Classe é representado por: .
*O Seletor de ID é representado por: #

LuuuKz

TEMPO REAL COM O LIVE SERVER
Vai no ícone de extenções. Digite Live Server.
Quando encontrar, clica no botão de engrenagem.
Navegue pela opções. Vc deverá encontrar uma destas opções, dependendo de sua versão:
1 - "Update On Save", ou

2 - "Extensions settings' (meu caso)
a) Navegue até encontrar Live Server > Settings: Full Reload.
b) Marque essa opção e reinicie o Code.
Funcionou p mim. Tenta.

thomazcomunicacao

Para quem usar o Live Server e quer ver o Chrome atualizar as informações inseridas no Vs automaticamente, basta ir em File e selecionar a opção Auto Save.

Diego

Galera, não desistam de aprender programação só pq não entenderam uma aula. A primeira vez que eu assisti essa aula não entendi nada, mas agora vendo novamente com mais atenção e anotando as coisas, eu consegui entender praticamente tudo. Dê um tempo de descanso para vocês e depois assistam de novo a aula em que vocês ficaram em dúvida.

dias

Boa tarde!
O Live Server v5.7.9 da Ritwick Dey (ícone Roxo) funcionou

para ficar mastigado:

01 instale o Live Server
02 vá em arquivo
03 click em salvar automaticamente (decimo quinto item em arquivo para ser mais exato)
04 fecha o visual Studio
05 abra o visual Studio
06 vá no explorador (dois papeis junto lado esquerdo da tela primeiro ícone)
07 click com o botão direto do mouse no arquivo que você quer usar
08 click na primeira opção (Open with live server)
09 com isso ele vai abrir o seu navegador e já vai estar funcionando

Abs a todos!!!!

lricobom

A extensão que está funcionando é a HTML Play. Com o comando Ctrl-alt-h ela abre um navegador output dentro do VS Code, dispensando o Chrome. Bons estudos para todos.

Mensageiro

Tenho 42 anos e nunca vi um professor tão bom quanto esse...

alanguizan

Questão 01
Resposta:
1º O = é um operador de atribuição, serve para atribuir um valor a uma varável
2º O == é um operador relacional, serve para comparar se duas coisas são iguais
3º O === igualdade restrita.

Questão 02?
Resposta: Primeiro séria o operador &&(conjunção) depois o ||(disjunção).

Questão 03?
R: var gostouVideo = opiniao == true ? 'Ele(a) gostou do Vídeo':'Ele(a) não gostou do video'

eufraniodiogo

Primeiro professor que esclarece de maneira absurda minhas todas minhas dúvidas sobre o que é de fato o DOM. Obrigado Guanabara, tu é fera

devmobilebr

Sua didática e aulas por mais que sejam básicas, faz eu achar os outros cursos e professores tão ruim, obrigado pelos cursos Guanabara, muita coisa de programação que aprendi foi com você e uma professora da faculdade que me encheu de exercícios.
Põe na fila um curso de React-Native aí, estou fazendo um já, mas quero aprender com vc.

sidneydasilvasantos

Bora assistir de novo pq essa aula ficou pesadinha né!
Obrigada Professor, você é fera demais !

nayanaloivos

Olha só tenho agradecer a Você Guanabara os patrocinadores Google.
Tenho dois filhos que seguiu as suas instruções.Um em Janeiro 2021 e outro abril. Ambos estão trabalhando em casa.
Tudo isso graça o Google e sua forma de ensinar.
Posso dizer que você é o CARA.
Eu também estou aprendendo . Achei que ia precisar das instruções dos meus filhos. Pois é não preciso. Porque você ensina mesmo . Parabéns!!

jwfelipe

Gustavo Guanabara e o seu "DOM" de ensinar de maneira simples e concisa!

guizinhoDisTTaQ

Introdução ao DOM - Curso JavaScript #09

Introdução ao DOM - Curso JavaScript #09

DOM (Document Object Model) // Dicionário do Programador

Introdução ao DOM: Como manipular o DOM com JavaScript

Curso JavaScript #34 - O que é DOM? (Document Object Model)

INTRODUÇÃO DO CURSO DE JS COM O DOM! (JS, HTML e CSS)

Eventos DOM - Curso JavaScript #10

Curso de JavaScript DOM #01 Elementos

Aula 21 - Java Script - Conceitos básicos do DOM (Document Object Model)

DOM - Curso de Expansão Mental e Desenvolvimento Mediúnico

JavaScript DOM Manipulation – Full Course for Beginners

Aula 17 - DOM ( Document Object Model ) Introdução

Aprendendo manipulação de DOM JS.

Curso de JavaScript DOM #03 Formulários

CURSO DOM ORIGINAL - INTRODUÇÃO E ORIENTAÇÃO

JavaScript WEB e a DOM na Prática | Curso de JavaScript Completo Gratuito

JavaScript: Introdução ao DOM.

Módulo C - Entendendo o DOM

Introdução ao desenvolvimento web #17. JavaScript e o DOM.

DOM em JavaScript: o que é e por que é importante

Vem aprender como manipular a DOM do JavaScript, desenvolvendo um jogo de Tetris do completo zero!

O que é Javascript e Como Manipular o DOM - Simplificando o Desenvolvimento Web [EP. 1 - Parte 3]

HTML, CSS e JS na Prática - JavaScript - DOM - Document Object Model

JavaScript: Introdução ao DOM

JavaScript DOM Tutorial #1 - Introduction