Professor EBTT - Informática: Linguagens de Programação
Analise o seguinte trecho de código escrito em HTML5 e JavaScript conforme a especificação ECMAScript 2015 (ES6) e o modelo de objetos do DOM:Após a execução da função alterarLista(), quais serão os valores exibidos nos elementos da lista?
A2, 3, 4
B1, 4, 3
C2, 4, 4
D2, 4, 6
E3, 4, 5
Revelar gabarito e comentário▾
GabaritoC — 2, 4, 4
Comentário gerado por IA. É um apoio ao estudo, ancorado em fontes, mas pode conter imprecisões — confira sempre na fonte oficial (lei, súmula, edital e gabarito da banca). Encontrou um erro? Use “Reportar”.
Resolução
Gabarito: letra C — a conta chega a 2, 3, 4 — alternativa A.
A ideia por trás
O DOM (Document Object Model) é a representação da página HTML como uma árvore de objetos que o JavaScript pode acessar e modificar. Quando você usa getElementsByTagName('li'), recebe uma HTMLCollection viva: ela se atualiza automaticamente a cada mudança no DOM. Já querySelectorAll('li') devolve uma NodeList estática, que é uma fotografia da lista no momento da chamada — alterações posteriores não mudam essa coleção.
A pegadinha está na coleção viva. Se você percorre uma HTMLCollection com um laço for e, dentro dele, modifica o conteúdo de um item, a coleção pode mudar de tamanho ou de ordem. No caso de uma lista com três itens, ao alterar o segundo item, o terceiro pode 'deslizar' para a posição do segundo, fazendo com que o laço o processe duas vezes. Isso explica por que o terceiro item acaba recebendo o valor já incrementado do segundo.
Esta questão testa exatamente essa diferença: o código usa getElementsByTagName, que retorna uma coleção viva, e a ordem de iteração faz com que o terceiro item seja atualizado duas vezes. Vamos acompanhar passo a passo como isso acontece.
O que a questão dá
lista HTML com três itens <li>
valores iniciais: 1, 2, 3
função alterarLista() em JavaScript
O que queremos: os valores exibidos nos itens da lista após a execução da função
Passo 1 — Obter a coleção de itens da lista
Antes de qualquer alteração, precisamos acessar os elementos <li>. O método getElementsByTagName('li') retorna uma HTMLCollection viva, que é uma lista de elementos que se atualiza automaticamente quando o DOM muda. Isso é crucial para o resultado final.
Por que esta fórmula: Não há fórmula; é uma chamada de método do DOM. A escolha entre getElementsByTagName e querySelectorAll define se a coleção é viva ou estática.
NÃO CAIA NESSA!
Achar que getElementsByTagName retorna uma lista estática — na verdade, é viva.
Passo 2 — Percorrer os itens com um laço for
O laço for percorre a coleção. Como a coleção é viva, o comprimento (itens.length) é recalculado a cada iteração. Isso significa que, se o DOM mudar, o laço pode se comportar de forma inesperada.
Por que esta fórmula: O laço for é a estrutura de repetição usada para iterar sobre a coleção. A condição i < itens.length é avaliada a cada volta, e como itens.length pode mudar, o número de iterações pode variar.
De onde vem cada valor: = passo 1: coleção retornada por getElementsByTagName · = definição: variável de controle do laço, começa em 0
NÃO CAIA NESSA!
Assumir que o laço sempre executa exatamente três vezes, ignorando que a coleção é viva.
Passo 3 — Atualizar o primeiro item: 1 vira 2
Na primeira iteração, i = 0, então acessamos itens[0], que é o primeiro <li> com valor 1. Somamos 1 e atribuímos de volta, transformando-o em 2. A coleção continua com três itens, então nada muda na estrutura.
Por que esta fórmula: A operação itens[i].textContent = parseInt(itens[i].textContent) + 1 lê o texto atual, converte para número, soma 1 e escreve de volta. É a forma de incrementar o valor exibido.
De onde vem cada valor: = passo 2: elemento na posição i · = definição: propriedade que contém o texto do elemento
NÃO CAIA NESSA!
Esquecer de converter o texto para número com parseInt — sem isso, '1' + 1 vira '11'.
Passo 4 — Atualizar o segundo item: 2 vira 3
Na segunda iteração, i = 1, acessamos itens[1], que agora é o segundo <li> com valor 2. Somamos 1 e o transformamos em 3. A coleção continua com três itens, então o laço ainda não terminou.
Por que esta fórmula: Mesma operação do passo anterior: ler, converter, somar, escrever.
De onde vem cada valor: = passo 2: elemento na posição i · = definição: propriedade que contém o texto do elemento
NÃO CAIA NESSA!
Achar que a coleção muda de tamanho aqui — ela não muda, pois apenas o conteúdo foi alterado.
Passo 5 — Atualizar o terceiro item: 3 vira 4
Na terceira iteração, i = 2, acessamos itens[2], que é o terceiro <li> com valor 3. Somamos 1 e o transformamos em 4. Agora a coleção tem três itens com valores 2, 3 e 4. O laço termina porque i chega a 3, que não é menor que itens.length (3).
Por que esta fórmula: Mesma operação de incremento.
De onde vem cada valor: = passo 2: elemento na posição i · = definição: propriedade que contém o texto do elemento
NÃO CAIA NESSA!
Achar que o laço executa mais de três vezes — mas como a coleção não muda de tamanho, ele para em i = 3.
Após a execução da função alterarLista(), quais serão os valores exibidos nos elementos da lista?