0% acharam este documento útil (0 voto)

5 visualizações

JavaScript Web

Este documento descreve como o JavaScript interage com a DOM para manipular elementos HTML, como alterar estilos, manipular eventos e adicionar elementos. Ele também explica métodos como getElementById, getElementByClassName e querySelector para selecionar elementos, e como trabalhar com eventos no JavaScript.

Enviado por

chacara.vidaedescanso

Direitos autorais

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

0% acharam este documento útil (0 voto)

5 visualizações

JavaScript Web

Enviado por

chacara.vidaedescanso

Direitos autorais

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

Você está na página 1/ 6

Materiais de… / ...

/ JavaScript Web Criado com o

JavaScript Web

JavaScript e a DOM
JavaScript é uma linguagem de programação amplamente utilizada no desenvolvimento web. Ela
permite adicionar interatividade e dinamismo às páginas da web. A sigla DOM significa
"Document Object Model" (Modelo de Objetos do Documento) e refere-se à representação da
estrutura de um documento HTML em forma de árvore. O JavaScript interage com a DOM para
manipular os elementos da página, como alterar o conteúdo, estilos, adicionar ou remover
elementos, manipular eventos, entre outros.

• Manipulando estilos
É possível modificar os estilos dos elementos HTML usando JavaScript. Por exemplo, você pode
alterar a cor de fundo de um elemento:

JavaScript

const myElement = document.getElementById('myElement');

myElement.style.backgroundColor = 'red';

• Manipulando eventos
O JavaScript permite que você responda a eventos, como cliques de mouse ou envios de
formulários. Por exemplo, você pode adicionar um ouvinte de evento para um botão:

JavaScript

const myButton = document.getElementById('myButton');

myButton.addEventListener('click', function() { console.log('Botão clicado!');
}); /* com Arrow Function */ myButton.addEventListener('click', () => {
console.log('Botão clicado!'); });

• Adicionando e removendo elementos

O JavaScript permite adicionar e remover elementos da DOM. Por exemplo, você pode adicionar
um novo elemento <li> a uma lista:
JavaScript

const myList = document.getElementById('myList'); const newListItem =

document.createElement('li'); newListItem.textContent = 'Novo item';
myList.appendChild(newListItem);

Esses são apenas exemplos básicos de como o JavaScript interage com a DOM. A combinação
desses recursos permite criar páginas da web interativas e dinâmicas. Existem muitos outros
métodos e recursos disponíveis na API da DOM para manipular elementos HTML de maneiras
mais avançadas.

getElementById
A ferramenta do JavaScript getElementById permite acessar um elemento HTML específico em
uma página da web, com base no valor do atributo id desse elemento. Ela retorna uma referência
ao elemento encontrado, ou null se nenhum elemento corresponder ao id fornecido.
Exemplo:

JavaScript

<!DOCTYPE html> <html> <body> <h2>Exemplo de Uso do getElementById</h2> <p

id="demo">Este é um parágrafo de exemplo.</p> <button
onclick="alterarTexto()">Clique aqui para alterar o texto</button> <script>
function alterarTexto() { // Obtendo uma referência ao elemento com o id "demo"
let elemento = document.getElementById("demo"); // Alterando o conteúdo do
parágrafo elemento.innerHTML = "Texto alterado!"; } </script> </body> </html>

Nesse exemplo, temos um parágrafo com o id "demo" e um botão. Ao clicar no botão, a função
alterarTexto é executada. Dentro dessa função, usamos getElementById para obter uma
referência ao parágrafo com o id "demo". Em seguida, modificamos o conteúdo desse parágrafo,
atribuindo um novo texto à propriedade innerHTML do elemento. Como resultado, o texto do
parágrafo será alterado para "Texto alterado!" quando o botão for clicado.

getElementByClassName
A função getElementByClassName é uma função em JavaScript que permite selecionar
elementos HTML com base em suas classes. Ela retorna uma coleção de elementos que
possuem a classe especificada.
Exemplo:

JavaScript

HTML <div class="destaque">Elemento 1</div> <div class="destaque">Elemento

2</div> <div class="destaque">Elemento 3</div> <div class="outro">Elemento
4</div> JavaScript let elementos = document.getElementsByClassName("destaque");
for (let i = 0; i < elementos.length; i++) {
console.log(elementos[i].textContent); } // Elemento 1 // Elemento 2 //
Elemento 3

Nesse exemplo, temos um conjunto de elementos <div>. A classe "destaque" é atribuída a três
desses elementos. O código JavaScript usa a função getElementByClassName para selecionar
todos os elementos com a classe "destaque" e, em seguida, itera sobre a coleção retornada para
exibir o texto de cada elemento no console.

getElementByTagName
A função getElementByTagName é uma função em JavaScript que permite selecionar elementos
HTML com base em suas tags. Ela retorna uma coleção de elementos que possuem a tag
especificada.
Exemplo:

JavaScript

HTML <p>Parágrafo 1</p> <p>Parágrafo 2</p> <p>Parágrafo 3</p> JavaScript let

paragrafos = document.getElementsByTagName("p"); for (let i = 0; i <
paragrafos.length; i++) { console.log(paragrafos[i].textContent); } //
Parágrafo 1 // Parágrafo 2 // Parágrafo 3

Nesse exemplo, temos três elementos <p>. O código JavaScript usa a função
getElementByTagName para selecionar todos os elementos <p> e, em seguida, itera sobre a
coleção retornada para exibir o texto de cada parágrafo no console.
getElementsByName
A função getElementsByName em JavaScript permite selecionar elementos HTML com base em
seus atributos name. Diferentemente das funções getElementById e getElementByClassName, a
função getElementsByName retorna uma coleção de elementos correspondentes ao atributo
name especificado, em vez de um único elemento.

JavaScript

HTML <input type="text" name="nome" value="John Doe"> <input type="text"

name="nome" value="Jane Doe"> <input type="text" name="nome" value="Alice Doe">
JavaScript let elementos = document.getElementsByName("nome"); for (let i = 0;
i < elementos.length; i++) { console.log(elementos[i].value); } // John Doe //
Jane Doe // Alice Doe

Nesse exemplo, temos três elementos de entrada de texto (<input>) com o atributo name definido
como "nome". O código JavaScript usa a função getElementsByName para selecionar todos
esses elementos e, em seguida, itera sobre a coleção retornada para exibir o valor de cada um no
console.

querySelector
O método querySelector é uma função em JavaScript que permite selecionar elementos em um
documento HTML usando seletores CSS. Ele retorna o primeiro elemento que corresponde ao
seletor especificado ou null se nenhum elemento for encontrado.
Exemplo:

JavaScript

<!DOCTYPE html> <html> <head> <title>Exemplo de querySelector</title> </head>

<body> <div id="conteudo"> <h1>Título</h1> <p>Parágrafo de exemplo</p> </div>
</body> <script src="script.js"> // Selecionando o elemento <h1> dentro do
elemento com o id "conteudo" let titulo = document.querySelector("#conteudo
h1"); // Alterando o conteúdo do elemento titulo.textContent = "Novo Título";
</script> </html>
querySelectorAll
O método querySelectorAll é uma função JavaScript que permite selecionar vários elementos da
DOM (Document Object Model) com base em um seletor CSS. Ele retorna uma lista de nós que
correspondem ao seletor especificado.
Exemplo:

JavaScript

// Seleciona todos os elementos <p> do documento let paragrafos =

document.querySelectorAll("p"); // Itera sobre os elementos selecionados for
(let i = 0; i < paragrafos.length; i++) { // Altera o conteúdo de cada
parágrafo paragrafos[i].textContent = "Novo conteúdo do parágrafo"; }

Nesse exemplo, o código document.querySelectorAll("p") seleciona todos os elementos <p> no

documento HTML. Em seguida, podemos iterar sobre a lista de elementos retornada e fazer
alterações em cada um deles. No exemplo, estamos definindo o conteúdo de cada parágrafo para
"Novo conteúdo do parágrafo" usando a propriedade textContent.

Eventos no JavaScript
Os eventos no JavaScript são ações ou ocorrências que acontecem em um elemento HTML,
como um clique do mouse, pressionamento de tecla, carregamento da página, etc. O JavaScript
permite que você atribua funções a esses eventos para responder a eles de maneira adequada.
Existem dois métodos principais para trabalhar com eventos no JavaScript:

• addEventListener: É usado para anexar um manipulador de eventos a um elemento específico.

Ele permite que você especifique qual evento deseja ouvir e qual função será executada
quando esse evento ocorrer.
Exemplo:

JavaScript

// Obtém uma referência para o botão pelo ID let botao =

document.getElementById("meuBotao"); // Adiciona um ouvinte de evento para o
clique do botão botao.addEventListener("click", function() { console.log("O
botão foi clicado!"); });
Neste exemplo, estamos obtendo uma referência para um elemento de botão com o ID
"meuBotao" e adicionando um ouvinte de evento para o evento de clique. Quando o botão for
clicado, a função anônima passada como argumento será executada, imprimindo a mensagem "O
botão foi clicado!" no console.

• on[evento]: É um atributo especial que pode ser definido em um elemento HTML ou em um

objeto JavaScript para especificar uma função que será executada quando um determinado
evento ocorrer.
Exemplo:

JavaScript

// Obtém uma referência para o botão pelo ID let botao =

document.getElementById("meuBotao"); // Define uma função para o evento de
clique do botão botao.onclick = function() { console.log("O botão foi
clicado!"); };

Neste exemplo, estamos obtendo uma referência para um elemento de botão com o ID
"meuBotao" e definindo a função onClick para executar quando o botão for clicado. A função
imprimirá a mensagem "O botão foi clicado!" no console.
Ambos os métodos podem ser usados para adicionar manipuladores de eventos a vários tipos de
eventos, como cliques do mouse, teclas pressionadas, carregamento da página, entre outros. É
importante lembrar de remover os manipuladores de eventos quando não forem mais
necessários, usando os métodos removeEventListener ou atribuindo null ao atributo do evento.