index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>Teste</p>    
</body>
<script src="./index.js"> </script>
<script>
    const nome = prompt('Digite o nome: ');
    alert('Olá '+ nome );
    const status = confirm('Deseja deletar? '); //é booleano.
    if (status){
        alert('true');
    } else {
        alert('false');
    }
//elementos com HTML, exemplos

var element = document.getElementById('myElement'); //POR ID

var elements = document.getElementsByClassName('myClass'); //POR CLASSE 

var elements = document.getElementsByTagName('div'); // POR NOME DA TAG

//POR QUERY SELECTORS:

var element = document.querySelector('.myClass'); // Seleciona o primeiro elemento com a classe 'myClass'
var elements = document.querySelectorAll('.myClass'); // Seleciona todos os elementos com a classe 'myClass'

//Modificação de Conteúdo - o DOM permite modificação de conteudo.
// quando selecionar um conteudo pode modificar o elemento dele. 

element.textContent = 'Novo texto'; //ALTERAR TEXTOS

element.innerHTML = '<p>Novo conteúdo HTML</p>';//Alterar HTML

element.setAttribute('src', 'nova-imagem.jpg'); //Alterar Atributos

//Alterar Estilos
element.style.color = 'red';
element.style.fontSize = '20px';

// o DOM tambem permite a criação e inserção de elementos
// nesse caso o DOM permite.

//Criar um Novo Elemento
var newElement = document.createElement('div');
newElement.textContent = 'Novo elemento';

//Inserir um Elemento no DOM
var parent = document.getElementById('parentElement');
parent.appendChild(newElement); // Insere como último filho

// Insere antes de um elemento específico
var referenceElement = document.getElementById('referenceElement');
parent.insertBefore(newElement, referenceElement);

//Remoção de Elementos

//Remover um Elemento
var elementToRemove = document.getElementById('elementToRemove');
elementToRemove.remove();

//Remover um Filho
var parent = document.getElementById('parentElement');
var child = document.getElementById('childElement');
parent.removeChild(child);

//Eventos

//Adicionar um Evento
element.addEventListener('click', function() {
    alert('Elemento clicado!');
});

//Remover um Evento
var handleClick = function() {
    alert('Elemento clicado!');
};

element.addEventListener('click', handleClick);
element.removeEventListener('click', handleClick);

//O DOM tambem oferece manipulação de "API's de Armazenametno e serviçõs em segundo plano" no contexto de desenvolvimento web (gerencia de dados e operações).
//A manipulação do DOM lida diretamente com a estrutura do documento HTML e as representaçãoes em arvores no navegador

//Exemplos de uso de localStorage - Service Worker

//Armazenamento Local
// Armazenar um valor
localStorage.setItem('username', 'JohnDoe');

// Recuperar um valor
var username = localStorage.getItem('username');

// Remover um valor
localStorage.removeItem('username');


//Service Worker (registro e instalação)
// Registrar um Service Worker
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
    console.log('Service Worker registrado com sucesso:', registration);
  }).catch(function(error) {
    console.log('Falha ao registrar o Service Worker:', error);
  });
}

// No arquivo service-worker.js
self.addEventListener('install', function(event) {
  console.log('Service Worker instalado');
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request).then(function(response) {
      return response || fetch(event.request);
    })
  );
});


</script>
</html>