Ainda não tem acesso? Estude com a gente! Matricule-se
Ainda não tem acesso? Estude com a gente! Matricule-se

Solucionado (ver solução)

Diferença entre id e classe

Vi que já perguntaram isso aqui e que a resposta foi que, enquanto que o id é feito para demarcar somente um elemento do código, a classe serviria para vários. No entanto, fazendo o id para vários elementos também deu certo. Não precisei criar um novo para cada um; pude utilizar o mesmo id em diversas partes do código exatamente como funcionaria a classe. Onde então está a real diferenciação entre ambos? Abraços.

2 respostas
solução

Pedro,

O id é um identificador. O recomendável é usar de forma única, para facilitar a localização de elementos na sua página.

Quando você precisar acessar um elemento (tag) via Javascript você pode utilizar a função (getElementById), ele vai buscar apenas pelo atributo id, e se espera que exista apenas um elemento.

Mas sua página vai renderizar mesmo com IDs duplicados. Isso é apenas uma questão de semântica.

No caso de class podemos usar a função (getElementsByClassName), onde pode ter um ou mais elementos.

Outro ponto importante do id ser único na página é que você pode usar um hash na URL que corresponde ao id do elemento na página.

Exemplo simples:

<html>
    <head>
        <title>sample ID</title>
    </head>
    <body>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <div id="meuIDUnico">Meu elemento com ID único</div>
    </body>
</html>

Se você salvar a página acima e chamar teste.html e abrir no browser e chamar teste.html#meuIDUnico você vai perceber que o browser vai focar (scroll) nesse elemento.

Você também pode "validar" seu código HTML com https://validator.w3.org/ (caso existam dois IDs com o mesmo nome) o validador vai apontar um "Erro" na sua marcação HTML.

Acho que entendi! Aliás não sabia dessa de usar um hash no URL, que interessante! Brigadão pela rápida resposta, Douglas! Abraços :)