No contexto do JavaScript, analise um trecho do HTML de uma página web. <div id="xpto" > <p>Texto de teste 1</p> <p id="234">Texto de teste 2</p> </div> A linha de código que altera o tamanho da fonte do segundo parágrafo acima é:
- A)document.getElementById("234").style.fontSize="48px";
Correta, pois getElementById("234") localiza o segundo parágrafo pelo id e style.fontSize altera seu tamanho de fonte.
- B)document.getElementById("xpto.234").style.fontSize="48px";
Errada, porque "xpto.234" não é o id de nenhum elemento e o seletor foi montado de forma inválida para getElementById.
- C)document.getElementById(p).style.fontSize="48px";
Errada, porque p não é uma expressão JavaScript válida para identificar um elemento.
- D)document.getElementsById("div.p").style.fontSize="48px";
Errada, porque não existe o método getElementsById e "div.p" não corresponde ao uso correto para buscar esse elemento.
- E)xpto.getElementById("234").style.fontSize="48px";
Errada, porque xpto é um id de div, não um objeto JavaScript com método getElementById; esse encadeamento não funciona assim.
Gabarito: A
No JavaScript, para alterar o estilo de um elemento HTML, voce primeiro precisa localizar esse elemento no DOM e depois acessar a propriedade de estilo. Quando o elemento tem um atributo id, o jeito mais direto é usar document.getElementById("id_do_elemento"). Isso devolve exatamente o nó desejado, sem drama e sem procurar a página inteira como se estivesse caçando agulha no palheiro. Depois, basta ajustar a propriedade CSS desejada, como style.fontSize. No trecho dado, o segundo parágrafo tem id="234". Então o comando correto deve buscar esse elemento específico e mudar seu tamanho de fonte para 48px. Em JavaScript, propriedades CSS em camelCase usam fontSize, e não font-size. Esse detalhe costuma aparecer bastante em prova, porque a banca gosta de misturar sintaxe do DOM com sintaxe CSS. A alternativa A está correta porque document.getElementById("234") encontra o segundo p e .style.fontSize="48px" altera sua fonte. As demais erram por usar identificadores inválidos, nomes de métodos inexistentes ou por tentar acessar o elemento de forma incompatível com a API do DOM. Em resumo: achou o id certo, chamou o método certo, mexeu na propriedade certa. É isso. Como doutrina básica de programação web, o DOM é a ponte entre o HTML da página e o código JavaScript. É por essa ponte que voce seleciona elementos e altera atributos, conteúdo e estilo em tempo de execução.