Atenção!
``` ```css .oculto { display: none; } ``` ```javascript const aviso = document.getElementById("aviso"); aviso.classList.remove("oculto"); // Mostra o aviso! aviso.classList.add("alerta"); aviso.classList.toggle("destaque"); // Ativa ou desativa ``` *** ### 💥 Exemplos com comportamento inesperado #### ❌ Esquecer de esperar a página carregar ```javascript document.getElementById("titulo").textContent = "Olá!"; // ERRO: Cannot read properties of null ``` ✔️ Solução: ```javascript window.onload = function() { document.getElementById("titulo").textContent = "Olá!"; }; ``` *** #### ❌ Tentar mudar valor de um `div` ```javascript const bloco = document.querySelector("#caixa"); bloco.value = "oi"; // Não funciona! ``` ✔️ Solução: ```javascript bloco.textContent = "oi"; ``` *** ### ✅ Boas práticas * Use `textContent` para textos simples. * Só use `innerHTML` se precisar adicionar **HTML** (e tiver certeza que é seguro). * Prefira `.classList` ao invés de `.className`. * Use estilos via CSS e apenas altere classes via JS quando possível. * Comente seu código! Isso ajuda você e outras pessoas. *** ### 🚫 Más práticas * Mudar estilos diretamente com `.style` para tudo → **deixa o código confuso** * Usar `innerHTML` com entrada do usuário → **riscos de segurança** * Misturar muita lógica dentro do HTML (como `onclick` direto na tag) *** ### 🧠 **Observação importante!** Diferenças que confundem muita gente 👇 #### 📝 `textContent` vs `innerText` | Propriedade | O que faz | Diferença principal | | ------------- | ------------------------------------------------------ | ------------------------------------------------- | | `textContent` | Mostra todo o texto, **incluindo o escondido com CSS** | Mais rápido, confiável para JS | | `innerText` | Mostra **só o texto visível na tela** | Depende do estilo da página (ex: `display: none`) | ```javascript element.textContent = "Texto"; element.innerText = "Texto visível"; ``` > 💡 Use `textContent` para garantir que você sempre leia/escreva o texto bruto, sem interferência do estilo. *** #### 🔤 `innerHTML` vs `innerText` vs `textContent` * `innerHTML` → **inclui e interpreta HTML** (ex: `Olá`) * `innerText` → só o texto visível * `textContent` → todo o texto interno, mesmo se não for visível ```javascript element.innerHTML = "Negrito"; // interpreta HTML element.innerText = "Negrito"; // mostra o texto como está ``` > ⚠️ **Evite usar `innerHTML` com conteúdo vindo do usuário!** Pode abrir portas para ataques. *** #### 🏷️ `classList` vs `className` | Propriedade | O que faz | Vantagens | | ----------- | -------------------------------------------- | --------------------------------------------- | | `classList` | Permite adicionar, remover, alternar classes | ✅ Seguro, moderno, mais flexível | | `className` | Substitui todas as classes de uma vez | ⚠️ Pode apagar classes existentes sem querer! | ```javascript element.classList.add("ativo"); element.classList.remove("erro"); element.classList.toggle("visivel"); element.className = "nova-classe"; // substitui tudo! ``` > ✅ Prefira `classList` para manipular estilos com segurança. *** Essas diferenças são pequenas, mas **fazem uma grande diferença** quando seu código cresce! 🧩\ Sempre que puder, **teste no console do navegador** para ver o comportamento real. *** ### 🧪 Experimento: botão que muda cor de fundo ```html ``` ```javascript function trocarFundo() { document.body.style.backgroundColor = "#"+Math.floor(Math.random()*16777215).toString(16); } ``` 🎉 Cada clique muda o fundo da página para uma cor aleatória! *** ### 🧠 Dicas extras para iniciantes * O DOM muda o conteúdo **ao vivo**, então é ótimo para interatividade! * Sempre cheque se o elemento existe antes de mexer nele. * Explore as ferramentas do navegador — use o **console** para testar ideias! *** ### 🔁 Recapitulando | O que fazer | Como fazer | | -------------- | --------------------------------------- | | Mudar texto | `element.textContent = "..."` | | Inserir HTML | `element.innerHTML = "..."` | | Ler input | `input.value` | | Mudar input | `input.value = "novo"` | | Mudar estilo | `element.style.propriedade = "valor"` | | Alterar classe | `element.classList.add/remove/toggle()` | --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://favelaware.gitbook.io/favelaware/8-javascript-para-web/8.7-personalizando-o-dom-na-pratica.md?ask=