web-dev-qa-db-fra.com

Plusieurs éléments HTML différents peuvent-ils avoir le même ID s'ils sont différents?

Un tel scénario est-il valable ?:

div#foo
span#foo
a#foo
htmldom
110
omninonsense

Non.

Les ID d'élément doivent être uniques dans tout le document.

154
SLaks

Je pense qu'il y a une différence entre si quelque chose DEVRAIT être unique ou DOIT être unique (c'est-à-dire imposé par les navigateurs Web).

Les identifiants devraient-ils être uniques? OUI.

Les identifiants doivent-ils être uniques? NON, au moins IE et FireFox permettent à plusieurs éléments d'avoir le même ID.

74
Jin Kim

Même si les éléments sont de types différents, cela peut vous causer de sérieux problèmes ...

Supposons que vous ayez 3 boutons avec le même identifiant:

<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>

Maintenant, vous configurez un code jQuery pour faire quelque chose lorsque vous cliquez sur les boutons myid:

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

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

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

Qu'attendrais-tu? Le fait que chaque bouton cliqué exécute la configuration du gestionnaire d’événements click avec jQuery. Malheureusement, cela n'arrivera pas. SEULEMENT le bouton1erappelle le gestionnaire de clics. Les 2 autres quand on clique dessus ne font rien. C'est comme s'ils n'étaient pas du tout des boutons!

Donc, assignez toujours différents éléments IDs à HTML. Cela vous couvrira contre des choses étranges. :)

<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>

Maintenant, si vous voulez que le gestionnaire d'événements click s'exécute lorsque vous cliquez sur l'un des boutons, il fonctionnera parfaitement si vous modifiez le sélecteur dans le code jQuery pour utiliser la classe CSS qui leur est appliquée comme ceci:

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

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

        $('form').trigger('submit');
    });
});
22
Leniel Maccaferri

Non, deux éléments avec le même identifiant ne sont pas valides. Les identifiants sont uniques, si vous souhaitez faire quelque chose comme ça, utilisez une classe. N'oubliez pas que les éléments peuvent avoir plusieurs classes en utilisant un espace comme séparateur:

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

La spécification officielle pour HTML stipule que les balises id doivent être uniquesETla spécification officielle indique également que si le rendu peut être terminé, il doit (c’est-à-dire qu’il n’existe pas de "erreurs" en HTML, mais seulement " invalide "HTML). Ainsi, voici comment les tags id fonctionnent réellement dans la pratique . Ils sont tous invalides , mais fonctionnent toujours:

Ce:

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

Rend bien dans tous les navigateurs. Cependant, document.getElementById ne renvoie qu'un objet, pas un tableau; vous ne pourrez jamais sélectionner le premier div via une balise id. Si vous deviez modifier l'id de la première div à l'aide de JavaScript, le deuxième ID serait alors accessible avec document.getElementById (testé sur Chrome, FireFox et IE11). Vous pouvez toujours sélectionner la div en utilisant d'autres méthodes de sélection, et sa propriété id sera retournée correctement.

Veuillez noter ce problème ci-dessus ouvre une vulnérabilité potentielle en matière de sécurité sur les sites générant des images SVG, car ceux-ci sont autorisés à contenir des éléments DOM, ainsi que des balises id (autorise les redirections de script par le biais d'images téléchargées). Tant que le fichier SVG est positionné dans le DOM avant l'élément remplacé, l'image recevra tous les événements JavaScript destinés à l'autre élément.

Pour autant que je sache, cette question n’est actuellement sur les radars de quiconque, mais c’est réel.

Ce:

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

Rend également bien dans tous les navigateurs. Cependant, seul le premier id que vous définissez de cette façon est utilisé si vous avez essayé document.getElementById ('unique-also'); dans l'exemple ci-dessus, vous seriez renvoyé null (testé sur Chrome, FireFox et IE11).

Ce:

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

Rend également bien dans tous les navigateurs, cependant, contrairement aux balises de classe qui peuvent être séparées par un espace, la balise id permet des espaces, de sorte que l'id de l'élément ci-dessus est en fait "unique unique-deux", et demande au dom pour "unique" ou "unique-deux", pris isolément, renvoie null sauf indication contraire dans le DOM (testé sur Chrome, FireFox et IE11).

11
Nick Steele

La réponse de SLaks est correcte, mais notez en addendum que les spécifications x/html spécifient que tous les identifiants doivent être uniques dans un (unique) document html . Bien que ce ne soit pas exactement ce que l'opération a demandé, il peut exister des instances valables où le même identifiant est associé à différentes entités sur plusieurs pages.

Exemple:

(desservi par les navigateurs modernes) article # main-content { avec un style } 
(servi à l'héritage) div # main-content { d'une autre manière }

Probablement un antipattern si. Partant juste d’ici comme un avocat du diable.

4
RobW

Et pour ce que cela vaut, sur Chrome 26.0.1410.65, Firefox 19.0.2 et Safari 6.0.3 au moins, si vous avez plusieurs éléments avec le même ID, les sélecteurs jQuery renverront (au moins) le premier élément avec cet ID.

par exemple.

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

et

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

Voir http://jsfiddle.net/RuysX/ pour un test.

3
denishaskin

En utilisant le validateur HTML sur w3.org , spécifique à HTML5, les ID doivent être uniques.

Considérer ce qui suit...

<!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>

le validateur répond avec ...

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>

... mais le PO précisait qu'il s'agissait de différents types d'éléments. Alors considérez le code HTML suivant ...

<!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>

... le résultat du validateur est ...

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

Conclusion:

Dans les deux cas (même type d'élément ou type d'élément différent), si l'ID est utilisé plusieurs fois, il n'est pas considéré comme valide en HTML5.

3
barrypicker

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

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

les identifiants ne contiennent que le premier élément div. Ainsi, même s'il existe plusieurs éléments ayant le même identifiant, l'objet document ne renverra que la première correspondance.

0
ganesh phirke

En règle générale, il est préférable de ne pas utiliser le même identifiant plusieurs fois dans une page html . Néanmoins, il est toujours possible d'utiliser le même identifiant plusieurs fois dans une page . Cependant, lorsque vous utilisez un ID dans le cadre de l'URI/URL comme ci-dessous:

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

Et si l'ID ('2015_FIFA_corruption_case') est utilisé pour un seul élément (span) de la page Web:

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

Il n'y aurait pas de problème. Au contraire, le même identifiant existe à plusieurs endroits, le navigateur serait confus.

0
Park JongBum

Non, les identifiants doivent être uniques. Vous pouvez utiliser des classes à cette fin

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

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

Est-il possible d'avoir plus d'un étudiant dans une classe ayant le même numéro de rôle/numéro d'identification? Dans HTMLid l'attribut est comme tel. Vous pouvez utiliser la même classe pour eux. par exemple:

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

Etc.

0
thecodeparadox

Je pense que vous ne pouvez pas le faire parce que Id est unique, vous devez l'utiliser pour un élément. Vous pouvez utiliser la classe à cette fin

0
janaravi