1
resposta

[Dúvida] Diferença entre adicionar uma classe e uma lista à um objeto via JS

Oi! Tive uma dúvida enquanto dava uma revisada no código da aula e gostaria de tirar por aqui:

const containerItemDaLista = document.createElement("div");
containerItemDaLista.classList.add("lista-item-container");

Nesta parte do código, é criada uma div e, nessa div, é inserida a classe "lista-item-container". Contudo, na parte logo abaixo, a gente cria um input para poder criar uma checkbox:

    const inputCheckbox = document.createElement("input");
    inputCheckbox.type = "checkbox";
    inputCheckbox.id = "checkbox-" + contador++;

A minha dúvida é a seguinte: por que colocamos inputCheckbox.id nessa parte e não algo como inputCheckbox.id.add(), similar ao que foi feito na classe? É pela necessidade de inserir o contador logo depois?

1 resposta

Olá, Gabriel. Tudo bem?

Agradeço por compartilhar sua dúvida no fórum.

Aqui você está lidando com coisas diferentes, apesar de parecerem parecidas à primeira vista.
No caso da classList, estamos trabalhando com uma lista de valores, por isso faz sentido usar .add() para incluir uma nova classe sem apagar as anteriores.

Já o id é uma propriedade simples, que aceita apenas um valor único por elemento. Não existe “lista de ids”, então não há método .add(). Ao fazer inputCheckbox.id = ..., você está atribuindo diretamente o identificador do elemento.

O uso do contador entra justamente para garantir que cada checkbox tenha um id único, o que é essencial para acessibilidade, labels e manipulação futura no JavaScript.

Em resumo:
classList.add() → quando o atributo aceita múltiplos valores
element.id = → quando o atributo aceita apenas um valor único

Para se aprofundar:
https://developer.mozilla.org/pt-BR/docs/Web/API/Element/classList
https://developer.mozilla.org/pt-BR/docs/Web/API/Element/id

Espero que eu tenha conseguido te ajudar.

Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos! ✨