Questão de Programação — JavaScript — FUNDATEC 2024

JavaScript: manipulação do DOM e classes CSS

Gabarito: letra A. A alternativa correta usa document.getElementById("meuDiv") para selecionar o elemento pelo ID, innerHTML para alterar o conteúdo e classList.add("destaque") para adicionar a classe CSS — exatamente a sintaxe padrão da API de manipulação do DOM. As demais alternativas erram em pelo menos um destes três pontos: método de seleção, propriedade de conteúdo ou forma de adicionar a classe.

A manipulação do DOM (Document Object Model) é a forma como o JavaScript interage com a estrutura HTML da página. O DOM representa o documento como uma árvore de objetos, onde cada elemento HTML é um nó que pode ser acessado e modificado. Para alterar um elemento, o fluxo é sempre o mesmo: primeiro seleciona-se o elemento, depois modifica-se seu conteúdo ou atributos. A seleção pode ser feita por ID (getElementById), por classe (getElementsByClassName), por seletor CSS (querySelector) ou por outras formas. A alteração de conteúdo pode usar innerHTML (que interpreta HTML) ou textContent/innerText (que tratam apenas texto). Para adicionar uma classe, o método moderno e recomendado é classList.add(), que adiciona a classe sem remover as existentes.

A pegadinha central desta questão está na sintaxe exata de cada método e propriedade. A banca mistura métodos que não existem (getDivById), propriedades incorretas (text, class), seletores com sintaxe errada (usar .meuDiv com getElementById, que espera o ID sem o ponto) e formas incorretas de adicionar classe (className("destaque") em vez de className = "destaque" ou classList.add("destaque")). O candidato que domina a API do DOM reconhece de imediato que apenas a alternativa A combina corretamente os três passos.

Alternativa A — ✅ Correta ⟵ GABARITO

A alternativa usa document.getElementById("meuDiv") para selecionar o elemento pelo ID (sem o ponto, correto), innerHTML = "CRFRS" para alterar o conteúdo (interpreta o texto como HTML, mas como é texto simples, funciona perfeitamente) e classList.add("destaque") para adicionar a classe CSS. Essa é a sintaxe canônica da API do DOM: selecionar por ID, alterar conteúdo com innerHTML e adicionar classe com classList.add.

Alternativa B — ❌ Incorreta

Erra no método de seleção: getDivById não existe no DOM — o correto é getElementById. Além disso, usa text (que não é uma propriedade padrão para conteúdo; o correto seria textContent ou innerHTML) e class = "destaque" (que não é uma propriedade válida; o correto seria className ou classList.add).

Alternativa C — ❌ Incorreta

Erra no seletor: getElementById(".meuDiv") usa o ponto, mas getElementById espera o ID sem o ponto — o ponto é usado em seletores CSS como querySelector. O restante está correto (innerHTML e setAttribute("class", "destaque")), mas o erro na seleção invalida a alternativa.

Alternativa D — ❌ Incorreta

Usa querySelector(".meuDiv"), que é um seletor CSS válido para selecionar por classe, mas o elemento tem um ID (meuDiv), não uma classe. Para selecionar por ID com querySelector, seria necessário #meuDiv. O restante (textContent e classList.add) está correto, mas a seleção está errada.

Alternativa E — ❌ Incorreta

Usa querySelector("div.meuDiv"), que seleciona um elemento div com a classe meuDiv — mas o elemento tem um ID, não uma classe. O correto seria #meuDiv. Além disso, className("destaque") está incorreto: className é uma propriedade que recebe uma string (ex.: className = "destaque"), não um método que recebe argumentos. O correto seria classList.add("destaque").

Gabarito: letra A