Alterando conteúdo: textContent, innerHTML e classList
Leia e atualize o conteúdo de texto dos elementos, insira HTML e alterne, adicione ou remova classes CSS de forma programática.
Alterando conteúdo: textContent, innerHTML e classList é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.
Lendo e escrevendo textContent
element.textContent obtém ou define o conteúdo de texto simples de um elemento, incluindo todos os descendentes. É seguro: nunca interpreta HTML, portanto defini-lo com uma entrada do usuário não cria vulnerabilidades de XSS.
const heading = document.querySelector('h1');
console.log(heading.textContent); // read
heading.textContent = 'New Title'; // write — replaces all children
// Safe with user input:
element.textContent = userInput; // no XSS riskinnerHTML — use com cautela
element.innerHTML obtém ou define a marcação HTML dentro de um elemento. É conveniente, mas perigoso com entradas do usuário: interpreta HTML e pode executar scripts (XSS). Nunca defina innerHTML usando dados de usuário não sanitizados.
card.innerHTML = '<strong>Loading...</strong>'; // safe: hardcoded string
// DANGER — never do this:
element.innerHTML = userInput; // XSS vulnerability
// Safe alternative:
const div = document.createElement('div');
div.textContent = userInput; // won't parse as HTMLinnerText em comparação com textContent
innerText retorna somente o texto visível (respeita CSS display:none) e provoca um recálculo de layout. textContent retorna todo o texto, inclusive o oculto, e é mais rápido. Prefira textContent, a menos que você precise especificamente do comportamento de texto visível.
classList — adicionando e removendo classes
element.classList fornece métodos para modificar classes CSS sem alterar toda a cadeia className. add(), remove(), toggle(), contains(), replace().
const btn = document.querySelector('.btn');
btn.classList.add('active'); // add a class
btn.classList.remove('disabled'); // remove a class
btn.classList.toggle('open'); // add if absent, remove if present
console.log(btn.classList.contains('active')); // truetoggle com parâmetro de força
classList.toggle('class', condition) adiciona a classe quando a condição for verdadeira e a remove quando for falsa. É uma forma limpa de sincronizar uma classe com um estado booleano.
const isDark = true;
document.body.classList.toggle('dark-mode', isDark);
// No more: if/else with add/removeLendo e definindo atributos
element.getAttribute('attr') lê qualquer atributo. element.setAttribute('attr', value) define um atributo. element.removeAttribute('attr') remove um atributo. element.hasAttribute('attr') verifica se ele existe.
const img = document.querySelector('img');
console.log(img.getAttribute('alt'));
img.setAttribute('alt', 'New description');
img.removeAttribute('loading');Atributos data-*
Atributos personalizados data-* armazenam dados adicionais nos elementos sem afetar o DOM. Acesse-os por meio de element.dataset em camelCase.
<div id="card" data-user-id="42" data-role="admin"></div>
const card = document.querySelector('#card');
console.log(card.dataset.userId); // '42'
console.log(card.dataset.role); // 'admin'
card.dataset.status = 'active'; // sets data-statusPropriedade de estilo
element.style.propertyName define estilos em linha. Use camelCase para propriedades com hífen. Prefira alternar classes CSS em vez de definir estilos em linha — as classes mantêm os estilos nos arquivos CSS, onde eles devem estar.
element.style.backgroundColor = '#e2e8f0'; // camelCase
element.style.marginTop = '16px';
element.style.display = 'none';
// Reset inline style:
element.style.removeProperty('background-color');Lendo estilos calculados
getComputedStyle(element) retorna os estilos realmente aplicados após a cascata, e não apenas os estilos em linha. Use-o para ler estilos definidos por classes CSS ou pelo padrão do navegador.
const el = document.querySelector('.card');
const styles = getComputedStyle(el);
console.log(styles.fontSize); // '16px'
console.log(styles.display); // 'flex'Modificando as tags de título e meta
O título do documento (a aba do navegador) pode ser alterado a qualquer momento com document.title = 'New Title'. Em SPAs, isso proporciona uma melhor experiência ao usuário durante a navegação entre visualizações.
// Update tab title on route change:
document.title = `${pageName} | MyApp`;scrollIntoView()
element.scrollIntoView({ behavior: 'smooth' }) rola suavemente até que o elemento fique visível. É perfeito para a navegação por seções e para destacar erros de validação em formulários.
document.querySelector('#pricing').scrollIntoView({ behavior: 'smooth', block: 'start' });Verificação rápida
Qual propriedade deve ser usada para exibir com segurança texto fornecido pelo usuário no DOM sem risco de XSS?
Recapitulação: modificando o DOM
textContent define texto simples com segurança. innerHTML define HTML, mas é perigoso com entradas do usuário. classList.add/remove/toggle gerencia classes CSS de forma limpa. setAttribute/dataset gerencia atributos HTML. Prefira alternar classes em vez de usar estilos em linha. getComputedStyle lê os estilos finais aplicados.
Perguntas Frequentes
A aula “Alterando conteúdo: textContent, innerHTML e classList” é grátis?
Sim — o texto completo de “Alterando conteúdo: textContent, innerHTML e classList” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.
O que vou aprender em “Alterando conteúdo: textContent, innerHTML e classList”?
Leia e atualize o conteúdo de texto dos elementos, insira HTML e alterne, adicione ou remova classes CSS de forma programática. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Frontend Academy?
Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.
Quanto tempo leva a aula “Alterando conteúdo: textContent, innerHTML e classList”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Frontend Academy?
Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- querySelector e querySelectorAll
- addEventListener e objeto de evento
- Alterando conteúdo: textContent, innerHTML e classList
- Criando e anexando elementos