Skip to main content
adicionou 1 caractere ao conteúdo
Fonte Link
Victor Stafusa
  • 64,9mil
  • 9
  • 120
  • 189

Porque a finalidade do id é a de ser um identificador único para o elemento HTML onde ele é aplicado. Se ele não for único, isso vai contra a ideia para a qual ele foi concebido, e não faz sentido falar-se em exceções que possam permitir isso. Se você quiser usar um identificador que possa se aplicar a vários elementos diferentes simultaneamente, utilize o atributo class.

No entanto, isso não atrapalha no CSS (mas eu não confiaria nisso):

#teste {
    color: red;
}
<div id="teste">Teste 1</div>
<div id="teste">Teste 2</div>
<div id="outro">Teste 3</div>

Já no JavaScript, atrapalha:

// Ok
document.getElementById("outro").style="color:blue";

// Só pega o primeiro elemento "teste".
document.getElementById("teste").style="color:red";
<div id="teste">Teste 1</div>
<div id="teste">Teste 2</div>
<div id="outro">Teste 3</div>

O mesmo acontece com o jQuery:

// Ok
$("#outro").css("color", "blue");

// Só pega o primeiro elemento "teste".
$("#teste").css("color", "red");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="teste">Teste 1</div>
<div id="teste">Teste 2</div>
<div id="outro">Teste 3</div>

Se o id se repete, o correto seria usar o atributo class:

// Com jQuery.
$(".outro").css("color", "blue");

// Sem jQuery.
var em = document.getElementsByClassName("teste");
em[0].style="color:red";
em[1].style="color:red";
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="teste">Teste 1</div>
<div class="teste">Teste 2</div>
<div class="outro">Teste 3</div>
<div class="outro">Teste 4</div>

Logo, conclui-se que ids repetidos atrapalhaatrapalham a manipulação do DOM, mesmo com uma biblioteca como o jQuery. E talvez (só talvez) não atrapalhe a CSS.

Em outras linguagens de programação que são capazes de manipular o DOM, provavelmente vai dar errado também. Prova disso é que no Java, por exemplo, o tipo de retorno do método Document.getElementById(String) é Element ao invés de uma NodeList, ou seja um único elemento. Espere esse comportamento ou similar em todas as demais implementações de DOM em todas as demais linguagens de programação. Nenhuma delas vai saber lidar com ids duplicados.

Porque a finalidade do id é a de ser um identificador único para o elemento HTML onde ele é aplicado. Se ele não for único, isso vai contra a ideia para a qual ele foi concebido, e não faz sentido falar-se em exceções que possam permitir isso. Se você quiser usar um identificador que possa se aplicar a vários elementos diferentes simultaneamente, utilize o atributo class.

No entanto, isso não atrapalha no CSS (mas eu não confiaria nisso):

#teste {
    color: red;
}
<div id="teste">Teste 1</div>
<div id="teste">Teste 2</div>
<div id="outro">Teste 3</div>

Já no JavaScript, atrapalha:

// Ok
document.getElementById("outro").style="color:blue";

// Só pega o primeiro elemento "teste".
document.getElementById("teste").style="color:red";
<div id="teste">Teste 1</div>
<div id="teste">Teste 2</div>
<div id="outro">Teste 3</div>

O mesmo acontece com o jQuery:

// Ok
$("#outro").css("color", "blue");

// Só pega o primeiro elemento "teste".
$("#teste").css("color", "red");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="teste">Teste 1</div>
<div id="teste">Teste 2</div>
<div id="outro">Teste 3</div>

Se o id se repete, o correto seria usar o atributo class:

// Com jQuery.
$(".outro").css("color", "blue");

// Sem jQuery.
var em = document.getElementsByClassName("teste");
em[0].style="color:red";
em[1].style="color:red";
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="teste">Teste 1</div>
<div class="teste">Teste 2</div>
<div class="outro">Teste 3</div>
<div class="outro">Teste 4</div>

Logo, conclui-se que ids repetidos atrapalha a manipulação do DOM, mesmo com uma biblioteca como o jQuery. E talvez (só talvez) não atrapalhe a CSS.

Em outras linguagens de programação que são capazes de manipular o DOM, provavelmente vai dar errado também. Prova disso é que no Java, por exemplo, o tipo de retorno do método Document.getElementById(String) é Element ao invés de uma NodeList, ou seja um único elemento. Espere esse comportamento ou similar em todas as demais implementações de DOM em todas as demais linguagens de programação. Nenhuma delas vai saber lidar com ids duplicados.

Porque a finalidade do id é a de ser um identificador único para o elemento HTML onde ele é aplicado. Se ele não for único, isso vai contra a ideia para a qual ele foi concebido, e não faz sentido falar-se em exceções que possam permitir isso. Se você quiser usar um identificador que possa se aplicar a vários elementos diferentes simultaneamente, utilize o atributo class.

No entanto, isso não atrapalha no CSS (mas eu não confiaria nisso):

#teste {
    color: red;
}
<div id="teste">Teste 1</div>
<div id="teste">Teste 2</div>
<div id="outro">Teste 3</div>

Já no JavaScript, atrapalha:

// Ok
document.getElementById("outro").style="color:blue";

// Só pega o primeiro elemento "teste".
document.getElementById("teste").style="color:red";
<div id="teste">Teste 1</div>
<div id="teste">Teste 2</div>
<div id="outro">Teste 3</div>

O mesmo acontece com o jQuery:

// Ok
$("#outro").css("color", "blue");

// Só pega o primeiro elemento "teste".
$("#teste").css("color", "red");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="teste">Teste 1</div>
<div id="teste">Teste 2</div>
<div id="outro">Teste 3</div>

Se o id se repete, o correto seria usar o atributo class:

// Com jQuery.
$(".outro").css("color", "blue");

// Sem jQuery.
var em = document.getElementsByClassName("teste");
em[0].style="color:red";
em[1].style="color:red";
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="teste">Teste 1</div>
<div class="teste">Teste 2</div>
<div class="outro">Teste 3</div>
<div class="outro">Teste 4</div>

Logo, conclui-se que ids repetidos atrapalham a manipulação do DOM, mesmo com uma biblioteca como o jQuery. E talvez (só talvez) não atrapalhe a CSS.

Em outras linguagens de programação que são capazes de manipular o DOM, provavelmente vai dar errado também. Prova disso é que no Java, por exemplo, o tipo de retorno do método Document.getElementById(String) é Element ao invés de uma NodeList, ou seja um único elemento. Espere esse comportamento ou similar em todas as demais implementações de DOM em todas as demais linguagens de programação. Nenhuma delas vai saber lidar com ids duplicados.

CSS - talvez.
Fonte Link
Victor Stafusa
  • 64,9mil
  • 9
  • 120
  • 189

Porque a finalidade do id é a de ser um identificador único para o elemento HTML onde ele é aplicado. Se ele não for único, isso vai contra a ideia para a qual ele foi concebido, e não faz sentido falar-se em exceções que possam permitir isso. Se você quiser usar um identificador que possa se aplicar a vários elementos diferentes simultaneamente, utilize o atributo class.

No entanto, isso não atrapalha no CSS (mas eu não confiaria nisso):

#teste {
    color: red;
}
<div id="teste">Teste 1</div>
<div id="teste">Teste 2</div>
<div id="outro">Teste 3</div>

Já no JavaScript, atrapalha:

// Ok
document.getElementById("outro").style="color:blue";

// Só pega o primeiro elemento "teste".
document.getElementById("teste").style="color:red";
<div id="teste">Teste 1</div>
<div id="teste">Teste 2</div>
<div id="outro">Teste 3</div>

O mesmo acontece com o jQuery:

// Ok
$("#outro").css("color", "blue");

// Só pega o primeiro elemento "teste".
$("#teste").css("color", "red");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="teste">Teste 1</div>
<div id="teste">Teste 2</div>
<div id="outro">Teste 3</div>

Se o id se repete, o correto seria usar o atributo class:

// Com jQuery.
$(".outro").css("color", "blue");

// Sem jQuery.
var em = document.getElementsByClassName("teste");
em[0].style="color:red";
em[1].style="color:red";
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="teste">Teste 1</div>
<div class="teste">Teste 2</div>
<div class="outro">Teste 3</div>
<div class="outro">Teste 4</div>

Logo, conclui-se que ids repetidos atrapalha a manipulação do DOM, mesmo com uma biblioteca como o jQuery, mas. E talvez (só talvez) não atrapalhaatrapalhe a CSS.

Em outras linguagens de programação que são capazes de manipular o DOM, provavelmente vai dar errado também. Prova disso é que no Java, por exemplo, o tipo de retorno do método Document.getElementById(String) é Element ao invés de uma NodeList, ou seja um único elemento. Espere esse comportamento ou similar em todas as demais implementações de DOM em todas as demais linguagens de programação. Nenhuma delas vai saber lidar com ids duplicados.

Porque a finalidade do id é a de ser um identificador único para o elemento HTML onde ele é aplicado. Se ele não for único, isso vai contra a ideia para a qual ele foi concebido, e não faz sentido falar-se em exceções que possam permitir isso. Se você quiser usar um identificador que possa se aplicar a vários elementos diferentes simultaneamente, utilize o atributo class.

No entanto, isso não atrapalha no CSS:

#teste {
    color: red;
}
<div id="teste">Teste 1</div>
<div id="teste">Teste 2</div>
<div id="outro">Teste 3</div>

Já no JavaScript, atrapalha:

// Ok
document.getElementById("outro").style="color:blue";

// Só pega o primeiro elemento "teste".
document.getElementById("teste").style="color:red";
<div id="teste">Teste 1</div>
<div id="teste">Teste 2</div>
<div id="outro">Teste 3</div>

O mesmo acontece com o jQuery:

// Ok
$("#outro").css("color", "blue");

// Só pega o primeiro elemento "teste".
$("#teste").css("color", "red");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="teste">Teste 1</div>
<div id="teste">Teste 2</div>
<div id="outro">Teste 3</div>

Se o id se repete, o correto seria usar o atributo class:

// Com jQuery.
$(".outro").css("color", "blue");

// Sem jQuery.
var em = document.getElementsByClassName("teste");
em[0].style="color:red";
em[1].style="color:red";
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="teste">Teste 1</div>
<div class="teste">Teste 2</div>
<div class="outro">Teste 3</div>
<div class="outro">Teste 4</div>

Logo, conclui-se que ids repetidos atrapalha a manipulação do DOM, mesmo com uma biblioteca como o jQuery, mas não atrapalha a CSS.

Em outras linguagens de programação que são capazes de manipular o DOM, provavelmente vai dar errado também. Prova disso é que no Java, por exemplo, o tipo de retorno do método Document.getElementById(String) é Element ao invés de uma NodeList, ou seja um único elemento. Espere esse comportamento ou similar em todas as demais implementações de DOM em todas as demais linguagens de programação. Nenhuma delas vai saber lidar com ids duplicados.

Porque a finalidade do id é a de ser um identificador único para o elemento HTML onde ele é aplicado. Se ele não for único, isso vai contra a ideia para a qual ele foi concebido, e não faz sentido falar-se em exceções que possam permitir isso. Se você quiser usar um identificador que possa se aplicar a vários elementos diferentes simultaneamente, utilize o atributo class.

No entanto, isso não atrapalha no CSS (mas eu não confiaria nisso):

#teste {
    color: red;
}
<div id="teste">Teste 1</div>
<div id="teste">Teste 2</div>
<div id="outro">Teste 3</div>

Já no JavaScript, atrapalha:

// Ok
document.getElementById("outro").style="color:blue";

// Só pega o primeiro elemento "teste".
document.getElementById("teste").style="color:red";
<div id="teste">Teste 1</div>
<div id="teste">Teste 2</div>
<div id="outro">Teste 3</div>

O mesmo acontece com o jQuery:

// Ok
$("#outro").css("color", "blue");

// Só pega o primeiro elemento "teste".
$("#teste").css("color", "red");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="teste">Teste 1</div>
<div id="teste">Teste 2</div>
<div id="outro">Teste 3</div>

Se o id se repete, o correto seria usar o atributo class:

// Com jQuery.
$(".outro").css("color", "blue");

// Sem jQuery.
var em = document.getElementsByClassName("teste");
em[0].style="color:red";
em[1].style="color:red";
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="teste">Teste 1</div>
<div class="teste">Teste 2</div>
<div class="outro">Teste 3</div>
<div class="outro">Teste 4</div>

Logo, conclui-se que ids repetidos atrapalha a manipulação do DOM, mesmo com uma biblioteca como o jQuery. E talvez (só talvez) não atrapalhe a CSS.

Em outras linguagens de programação que são capazes de manipular o DOM, provavelmente vai dar errado também. Prova disso é que no Java, por exemplo, o tipo de retorno do método Document.getElementById(String) é Element ao invés de uma NodeList, ou seja um único elemento. Espere esse comportamento ou similar em todas as demais implementações de DOM em todas as demais linguagens de programação. Nenhuma delas vai saber lidar com ids duplicados.

adicionou 65 caracteres ao conteúdo
Fonte Link
Victor Stafusa
  • 64,9mil
  • 9
  • 120
  • 189

Porque a finalidade do id é a de ser um identificador único para o elemento HTML onde ele é aplicado. Se ele não for único, isso vai contra a ideia para a qual ele foi concebido, e não faz sentido falar-se em exceções que possam permitir isso. Se você quiser usar um identificador que possa se aplicar a vários elementos diferentes simultaneamente, utilize o atributo class.

No entanto, isso não atrapalha no CSS:

#teste {
    color: red;
}
<div id="teste">Teste 1</div>
<div id="teste">Teste 2</div>
<div id="outro">Teste 3</div>

Já no JavaScript, atrapalha:

// Ok
document.getElementById("outro").style="color:blue";

// Só pega o primeiro elemento "teste".
document.getElementById("teste").style="color:red";
<div id="teste">Teste 1</div>
<div id="teste">Teste 2</div>
<div id="outro">Teste 3</div>

O mesmo acontece com o jQuery:

// Ok
$("#outro").css("color", "blue");

// Só pega o primeiro elemento "teste".
$("#teste").css("color", "red");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="teste">Teste 1</div>
<div id="teste">Teste 2</div>
<div id="outro">Teste 3</div>

Se o id se repete, o correto seria usar o atributo class:

// Com jQuery.
$(".outro").css("color", "blue");

// Sem jQuery.
var em = document.getElementsByClassName("teste");
em[0].style="color:red";
em[1].style="color:red";
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="teste">Teste 1</div>
<div class="teste">Teste 2</div>
<div class="outro">Teste 3</div>
<div class="outro">Teste 4</div>

Logo, conclui-se que ids repetidos atrapalha a manipulação do DOM, mesmo com uma biblioteca como o jQuery, mas não atrapalha a CSS.

Em outras linguagens de programação que são capazes de manipular o DOM, provavelmente vai dar errado também. Prova disso é que no Java, por exemplo, o tipo de retorno do método Document.getElementById(String) é Element ao invés de uma NodeList, ou seja um único elemento. Espere esse comportamento ou similar em todas as demais implementações de DOM em todas as demais linguagens de programação. Nenhuma delas vai saber lidar com ids duplicados.

Porque a finalidade do id é a de ser um identificador único para o elemento HTML onde ele é aplicado. Se ele não for único, isso vai contra a ideia para a qual ele foi concebido. Se você quiser usar um identificador que possa se aplicar a vários elementos diferentes simultaneamente, utilize o atributo class.

No entanto, isso não atrapalha no CSS:

#teste {
    color: red;
}
<div id="teste">Teste 1</div>
<div id="teste">Teste 2</div>
<div id="outro">Teste 3</div>

Já no JavaScript, atrapalha:

// Ok
document.getElementById("outro").style="color:blue";

// Só pega o primeiro elemento "teste".
document.getElementById("teste").style="color:red";
<div id="teste">Teste 1</div>
<div id="teste">Teste 2</div>
<div id="outro">Teste 3</div>

O mesmo acontece com o jQuery:

// Ok
$("#outro").css("color", "blue");

// Só pega o primeiro elemento "teste".
$("#teste").css("color", "red");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="teste">Teste 1</div>
<div id="teste">Teste 2</div>
<div id="outro">Teste 3</div>

Se o id se repete, o correto seria usar o atributo class:

// Com jQuery.
$(".outro").css("color", "blue");

// Sem jQuery.
var em = document.getElementsByClassName("teste");
em[0].style="color:red";
em[1].style="color:red";
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="teste">Teste 1</div>
<div class="teste">Teste 2</div>
<div class="outro">Teste 3</div>
<div class="outro">Teste 4</div>

Logo, conclui-se que ids repetidos atrapalha a manipulação do DOM, mesmo com uma biblioteca como o jQuery, mas não atrapalha a CSS.

Em outras linguagens de programação que são capazes de manipular o DOM, provavelmente vai dar errado também. Prova disso é que no Java, por exemplo, o tipo de retorno do método Document.getElementById(String) é Element ao invés de uma NodeList, ou seja um único elemento. Espere esse comportamento ou similar em todas as demais implementações de DOM em todas as demais linguagens de programação. Nenhuma delas vai saber lidar com ids duplicados.

Porque a finalidade do id é a de ser um identificador único para o elemento HTML onde ele é aplicado. Se ele não for único, isso vai contra a ideia para a qual ele foi concebido, e não faz sentido falar-se em exceções que possam permitir isso. Se você quiser usar um identificador que possa se aplicar a vários elementos diferentes simultaneamente, utilize o atributo class.

No entanto, isso não atrapalha no CSS:

#teste {
    color: red;
}
<div id="teste">Teste 1</div>
<div id="teste">Teste 2</div>
<div id="outro">Teste 3</div>

Já no JavaScript, atrapalha:

// Ok
document.getElementById("outro").style="color:blue";

// Só pega o primeiro elemento "teste".
document.getElementById("teste").style="color:red";
<div id="teste">Teste 1</div>
<div id="teste">Teste 2</div>
<div id="outro">Teste 3</div>

O mesmo acontece com o jQuery:

// Ok
$("#outro").css("color", "blue");

// Só pega o primeiro elemento "teste".
$("#teste").css("color", "red");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="teste">Teste 1</div>
<div id="teste">Teste 2</div>
<div id="outro">Teste 3</div>

Se o id se repete, o correto seria usar o atributo class:

// Com jQuery.
$(".outro").css("color", "blue");

// Sem jQuery.
var em = document.getElementsByClassName("teste");
em[0].style="color:red";
em[1].style="color:red";
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="teste">Teste 1</div>
<div class="teste">Teste 2</div>
<div class="outro">Teste 3</div>
<div class="outro">Teste 4</div>

Logo, conclui-se que ids repetidos atrapalha a manipulação do DOM, mesmo com uma biblioteca como o jQuery, mas não atrapalha a CSS.

Em outras linguagens de programação que são capazes de manipular o DOM, provavelmente vai dar errado também. Prova disso é que no Java, por exemplo, o tipo de retorno do método Document.getElementById(String) é Element ao invés de uma NodeList, ou seja um único elemento. Espere esse comportamento ou similar em todas as demais implementações de DOM em todas as demais linguagens de programação. Nenhuma delas vai saber lidar com ids duplicados.

Complementação para fechar a resposta em relação com o que há na pergunta.
Fonte Link
Victor Stafusa
  • 64,9mil
  • 9
  • 120
  • 189
Carregando
Fonte Link
Victor Stafusa
  • 64,9mil
  • 9
  • 120
  • 189
Carregando