¿Pueden varios elementos HTML diferentes tener la misma ID si son elementos diferentes?

¿Es válido un escenario como este ?:

div#foo
span#foo
a#foo

No.

Las ID de elementos deben ser únicas en todo el documento.

Creo que hay una diferencia entre si algo DEBE ser único o DEBE ser único (es decir, obligado por los navegadores web).

¿Las identificaciones deben ser únicas? SI.

¿Las identificaciones deben ser únicas? NO, al menos IE y FireFox permiten que varios elementos tengan la misma ID.

¿Pueden varios elementos tener la misma ID?

Sí, ya sea que tengan la misma etiqueta o no, los navegadores mostrarán la página incluso si varios elementos tienen la misma ID.

¿Es HTML válido?

No. Esto sigue siendo cierto a partir de la especificación HTML 5.1 . Sin embargo, la especificación también dice que getElementById debe devolver el primer elemento con la ID dada , lo que hace que el comportamiento no esté indefinido en el caso de un documento no válido.

¿Cuáles son las consecuencias de este tipo de HTML no válido?

La mayoría (si no todos) de los navegadores han seleccionado y todavía no seleccionar el primer elemento con un ID dado, al llamar getElementById. La mayoría de las bibliotecas que encuentran elementos por ID heredan este comportamiento. La mayoría de los navegadores (si no todos) también aplican estilos asignados por los selectores de id (por ejemplo #myid) a todos los elementos con la ID especificada. Si esto es lo que espera e intenta, entonces no hay consecuencias no deseadas. Si espera / tiene la intención de algo más (por ejemplo, para que se devuelvan todos los elementos con esa ID, o para que el estilo se aplique a un solo elemento), sus expectativas no se cumplirán y cualquier característica que dependa de esas expectativas fallará.

Algunas bibliotecas de javascript no tienen expectativas que no se cumplen cuando hay varios elementos tienen el mismo ID (ver el comentario de wootscootinboogie sobre d3.js)

Conclusión

Es mejor cumplir con los estándares, pero si sabe que su código funciona como se espera en sus entornos actuales, y estas ID se usan de manera predecible / mantenible, entonces solo hay 2 razones prácticas para no hacerlo:

1. Para evitar la posibilidad de que esté equivocado, y una de las bibliotecas que usa realmente no funciona correctamente cuando varios elementos tienen la misma ID.
2. Para mantener la compatibilidad hacia adelante de su sitio web / aplicación con bibliotecas o servicios (¡o desarrolladores!) Puede encontrar en el futuro un mal funcionamiento cuando varios elementos tienen la misma ID, lo cual es una posibilidad razonable ya que esto no es, técnicamente, válido HTML

¡El poder es tuyo!

Incluso si los elementos son de diferentes tipos, puede causarle problemas serios ...

Supongamos que tiene 3 botones con la misma identificación:

<button id="myid" data-mydata="this is button 1">button 1</button>
<button id="myid" data-mydata="this is button 2">button 2</button>
<button id="myid" data-mydata="this is button 3">button 3</button>

Ahora configura un jQuerycódigo para hacer algo cuando myidse hace clic en los botones:

$(document).ready(function ()
{
    $("#myid").click(function ()
    {
        var buttonData = $(this).data("mydata");

        // Call interesting function...
        interestingFunction();

        $('form').trigger('submit');
    });
});

¿Qué esperarías? Que cada botón que se haga clic ejecute la configuración del controlador de eventos de clic con jQuery. Lamentablemente no va a suceder. SOLO el primer botón llama al controlador de clics. Los otros 2 cuando se hace clic no hacen nada. ¡Es como si no fueran botones en absoluto!

Así que siempre asignar diferentes IDsa HTMLlos elementos. Esto te mantendrá cubierto contra cosas extrañas. :)

<button id="button1" class="mybtn" data-mydata="this is button 1">button 1</button>
<button id="button2" class="mybtn" data-mydata="this is button 2">button 2</button>
<button id="button3" class="mybtn" data-mydata="this is button 3">button 3</button>

Ahora, si desea que el controlador de eventos click se ejecute cuando se hace clic en cualquiera de los botones, funcionará perfectamente si cambia el selector en el código jQuery para usar la CSSclase aplicada a ellos de esta manera:

$(document).ready(function ()
{
    $(".mybtn").click(function ()
    {
        var buttonData = $(this).data("mydata");

        // Call interesting function...
        interstingFunction();

        $('form').trigger('submit');
    });
});

No. dos elementos con la misma identificación no son válidos. Los ID son únicos, si desea hacer algo así, use una clase. No olvide que los elementos pueden tener múltiples clases al usar un espacio como delimitador:

<div class="myclass sexy"></div>

La especificación oficial para HTML establece que las etiquetas de identificación deben ser únicas Y la especificación oficial también establece que si el renderizado puede completarse, debe (es decir, no hay "errores" en HTML, solo HTML "inválido"). Entonces, lo siguiente es cómo funcionan realmente las etiquetas de identificación en la práctica . Todos son inválidos , pero aún funcionan:

Esta:

<div id="unique">One</div>
<div id="unique">Two</div>

Se procesa bien en todos los navegadores. Sin embargo, document.getElementById solo devuelve un objeto, no una matriz; solo podrá seleccionar el primer div a través de una etiqueta de identificación. Si tuviera que cambiar la identificación del primer div usando JavaScript, la segunda identificación sería accesible con document.getElementById (probado en Chrome, FireFox e IE11). Todavía puede seleccionar el div utilizando otros métodos de selección, y su propiedad id se devolverá correctamente.

Tenga en cuenta que este problema anterior abre una posible vulnerabilidad de seguridad en los sitios que representan imágenes SVG, ya que los SVG pueden contener elementos DOM y también etiquetas de identificación en ellos (permite redireccionamientos de script DOM a través de imágenes cargadas). Siempre que el SVG se coloque en el DOM antes del elemento que reemplaza, la imagen recibirá todos los eventos de JavaScript destinados al otro elemento.

Este problema actualmente no está en el radar de nadie hasta donde yo sé, pero es real.

Esta:

<div id="unique" id="unique-also">One</div>

También se ve bien en todos los navegadores. Sin embargo, solo se utiliza la primera identificación que defina de esta manera, si probó document.getElementById ('unique-also'); en el ejemplo anterior, se devolverá nulo (probado en Chrome, FireFox e IE11).

Esta:

<div id="unique unique-two">Two</div>

También se muestra bien en todos los navegadores, sin embargo, a diferencia de las etiquetas de clase que se pueden separar por un espacio, la etiqueta de identificación permite espacios, por lo que la identificación del elemento anterior es en realidad "exclusivo único-dos", y le pide al dominio "único". o "unique-two" de forma aislada devuelve nulo a menos que se defina lo contrario en otra parte del DOM (probado en Chrome, FireFox e IE11).

La respuesta de SLaks es correcta, pero como una nota de adición que las especificaciones x / html especifican que todos los identificadores deben ser únicos dentro de un documento html (único) . Aunque no es exactamente lo que solicitó el operador, podría haber instancias válidas en las que la misma identificación se adjunte a diferentes entidades en varias páginas.

Ejemplo:

(servido para navegadores modernos) artículo # main-content { diseñado de una manera }
(servido para heredar) div # main-content { diseñado de otra manera }

Sin embargo, probablemente sea un antipatrón. Solo me voy de aquí como punto de defensa del diablo.

Y por lo que vale, en Chrome 26.0.1410.65, Firefox 19.0.2 y Safari 6.0.3 al menos, si tiene varios elementos con la misma ID, los selectores jquery (al menos) devolverán el primer elemento con esa ID.

p.ej

<div id="one">first text for one</div>
<div id="one">second text for one</div>

y

alert($('#one').size());

Ver http://jsfiddle.net/RuysX/ para una prueba.

Bueno, usando el validador HTML en w3.org , específico de HTML5, los ID deben ser únicos

Considera lo siguiente...

<!DOCTYPE html> 
<html>
    <head>
        <meta charset="UTF-8">
        <title>MyTitle</title> 
    </head>
    <body>
        <div id="x">Barry</div>
        <div id="x">was</div>
        <div id="x">here</div>
    </body>
</html>

el validador responde con ...

Line 9, Column 14: Duplicate ID x.      <div id="x">was</div>
Warning Line 8, Column 14: The first occurrence of ID x was here.       <div id="x">Barry</div>
Error Line 10, Column 14: Duplicate ID x.       <div id="x">here</div>
Warning Line 8, Column 14: The first occurrence of ID x was here.       <div id="x">Barry</div>

... pero el OP expresó específicamente: ¿qué pasa con los diferentes tipos de elementos? Entonces considere el siguiente HTML ...

<!DOCTYPE html> 
<html>
    <head>
        <meta charset="UTF-8">
        <title>MyTitle</title> 
    </head>
    <body>
        <div id="x">barry
            <span id="x">was here</span>
        </div>
    </body>
</html>

... el resultado del validador es ...

Line 9, Column 16: Duplicate ID x.          <span id="x">was here</span>
Warning Line 8, Column 14: The first occurrence of ID x was here.       <div id="x">barry

Conclusión:

En cualquier caso (mismo tipo de elemento o tipo de elemento diferente), si la identificación se usa más de una vez, no se considera HTML5 válido.

Podemos usar el nombre de la clase en lugar de usar id. Los id de html deben ser únicos pero las clases no. al recuperar datos usando el nombre de la clase puede reducir el número de líneas de código en sus archivos js.

$(document).ready(function ()
{
    $(".class_name").click(function ()
    {
        //code
    });
});

Creo que no puedes hacerlo porque Id es único, tienes que usarlo para un elemento. Puedes usar la clase para el propósito

<div id="one">first text for one</div>
<div id="one">second text for one</div>

var ids = document.getElementById('one');

Los ID contienen solo el primer elemento div. Por lo tanto, incluso si hay varios elementos con la misma identificación, el objeto del documento solo devolverá la primera coincidencia.

No, las identificaciones tienen que ser únicas. Puedes usar clases para ese propósito

<div class="a" /><div class="a b" /><span class="a" />

div.a {font: ...;}
/* or just: */
.a {prop: value;}

¿Es posible tener más de un estudiante en una clase que tenga el mismo número de Roll / Id? En HTML el idatributo es así. Puedes usar la misma clase para ellos. p.ej:

<div class="a b c"></div>
<div class="a b c d"></div>

Y así.

Por lo general, es mejor no usar la misma ID varias veces en una página html. Aun así, es posible usar la misma ID muchas veces en una página. Sin embargo, cuando usa una ID como parte de URI / URL como se muestra a continuación:

https://en.wikipedia.org/wiki/FIFA_World_Cup#2015_FIFA_corruption_case

Y si el ID ('2015_FIFA_corruption_case') se usa solo para un elemento (span) en la página web:

<span class="mw-headline" id="2015_FIFA_corruption_case">2015 FIFA corruption case</span>

No habría problema Por el contrario, existe la misma ID en más de un lugar, el navegador estaría confundido.

Sí pueden.

No sé si todas estas respuestas están desactualizadas, pero solo abre youtube e inspecciona el html. Intente inspeccionar los videos sugeridos, verá que todos tienen la misma Id y estructura repetitiva de la siguiente manera:

<span id="video-title" class="style-scope ytd-compact-radio-renderer" title="Mix - LARA TACTICAL">