Kann ein HTML-Element mehrere IDs haben?


310

Ich verstehe, dass eine ID innerhalb einer HTML / XHTML-Seite eindeutig sein muss.

Meine Frage ist, ob ich einem bestimmten Element mehrere IDs zuweisen kann.

<div id="nested_element_123 task_123"></div>

Mir ist klar, dass ich eine einfache Lösung habe, wenn ich einfach eine Klasse benutze. Ich bin nur neugierig darauf, IDs auf diese Weise zu verwenden.


Ich programmiere fast eine Weile in HTML CSS und JS. Ich muss häufig mehrere Klassen verwenden, aber ich verwende wirklich nie und ich muss auch nicht mehrere IDs verwenden. Trotzdem bin ich etwas neugierig: Darf ich fragen, in welcher Situation Sie bei einer solchen Gelegenheit waren, mehrere Ausweise zu benötigen?
Willy Wonka

In dem seltenen Szenario, in dem man keinen Zugriff auf das Quell-HTML hat (z. B. beim Erstellen von Proxys), sollte der CSS-Selektor [id = "eins zwei drei" '] auf das Element abzielen, wenn Sie auf ein Element mit mehreren IDs abzielen müssen.
JisuKim82

Dies hängt wirklich von der angegebenen (und wahrscheinlich implementierten) Spezifikation und dem darin enthaltenen Kontext ab. dh w3.org/TR/html5/dom.html#the-id-attribute und das ältere, das "Ja" anzeigt? w3.org/TR/2011/WD-html5-20110525/elements.html#the-id-attribute
Mark Schultheiss

1
@willywonka Ich weiß, dass dies ungefähr 2+ Jahre später ist, aber ich bin gerade auf diesen Artikel gestoßen, um nach einer Antwort darauf zu suchen, und wollte das Szenario mit Ihnen teilen, auf das ich gestoßen bin, da Sie nie eine Antwort erhalten haben. Ich mache ein Projekt für freecodecamp, um einen JS-Rechner zu erstellen. Sie möchten, dass die ID für die Ausgabe "Anzeige" ist, damit sie ihre Tests dagegen ausführen können, aber ich erstelle einen wissenschaftlichen Taschenrechner mit zwei Anzeigen: #input und #output, sodass die # Eingabeanzeige AUCH die ID "Anzeige" benötigt Wert zusätzlich zum Wert von "Eingabe" möchte ich es aus Gründen der Konsistenz geben.
Tara Stahler

1
Hallo @TaraStahler , herzlich willkommen. Soweit ich weiß, rendert der Browser den ersten nur, wenn Sie die Notation <... id = "input" id = "display" ...> verwenden und auch eine ID keine Leerzeichen (noch Tabulatoren) enthalten darf Die Notation <... id = "Eingabeanzeige" ...> ist überhaupt nicht gültig. Ich habe gerade mit der Chrome-Konsole mit Javascript experimentiert und es wird in beiden Fällen "Uncaught ReferenceError: Anzeige ist nicht definiert" zurückgegeben. Nur der erste Fall gibt das Objekt zurück, wenn ich es mit der ersten ID erhalte, der zweite ist nicht erreichbar. Im zweiten Fall ist keine der IDs erreichbar. Möglicherweise müssen Sie Ihren Code umgestalten?
Willy Wonka

Antworten:


205

Aus der XHTML 1.0-Spezifikation

In XML sind Fragmentkennungen vom Typ ID, und es kann nur ein einziges Attribut vom Typ ID pro Element geben. Daher wird in XHTML 1.0 das Attribut id als Typ ID definiert. Um sicherzustellen, dass XHTML 1.0-Dokumente gut strukturierte XML-Dokumente sind, MÜSSEN XHTML 1.0-Dokumente das id-Attribut verwenden, wenn Fragmentkennungen für die oben aufgeführten Elemente definiert werden. Informationen zum Sicherstellen, dass solche Anker abwärtskompatibel sind, wenn XHTML-Dokumente als Medientyp text / html bereitgestellt werden, finden Sie in den HTML-Kompatibilitätsrichtlinien.


7
"Fragment-IDs sind vom Typ ID, und es kann nur ein einziges Attribut vom Typ ID pro Element geben." Hier heißt es, dass sich einzelne Attribute und Attribute von den Attributwerten unterscheiden. Es sagt nichts darüber aus, dass Attributwerte in keinem Kontext mehrwertig sein sollten, weder durch Leerzeichen noch durch Zeichentrennung. In der Spezifikation heißt es jedoch, dass es aus Gründen der Abwärtskompatibilität keine Leerzeichen in Attributwerten enthalten darf. Fragment-IDs (w3.org/TR/xhtml1/#guidelines) Wenn Sie also mehrwertige IDs ausdrücken möchten, müssen Sie diese anders ausdrücken
Richeve Bebedor

2
Kommt auf die Spezifikation an, die Sie zitieren, nehme ich an. "Diese Spezifikation schließt ein Element mit mehreren IDs nicht aus ..." w3.org/TR/2011/WD-html5-20110525/elements.html#the-id-attribute
Mark Schultheiss

Sehen Sie hier, wo dieser Satz entfernt wird w3.org/TR/html5/dom.html#the-id-attribute
Mark Schultheiss

Okay, ich habe diese Antwort auf die 200-Punkte-Marke gebracht. Es ist in Ordnung. Ich sehe mich selbst.
KhoPhi

196

Im Gegensatz zu allen anderen lautet die richtige Antwort JA

Die Selectors-Spezifikation ist diesbezüglich sehr klar:

Wenn ein Element mehrere ID-Attribute hat, müssen alle für die Zwecke des ID-Selektors als IDs für dieses Element behandelt werden. Eine solche Situation kann mithilfe von Mischungen aus XML erreicht werden: ID, DOM3 Core, XML-DTDs und Namespace-spezifisch Wissen.


Bearbeiten

Zur Verdeutlichung: Ja, ein XHTML-Element kann mehrere IDs haben, z

<p id="foo" xml:id="bar">

Das Zuweisen mehrerer IDs zu demselben idAttribut mithilfe einer durch Leerzeichen getrennten Liste ist jedoch nicht möglich.


7
Tolle Antwort - jetzt ist die Katze unter den Tauben.
TrojanName

3
Leider ist hier nicht die CSS-Spezifikation wirksam. Für HTML / XHTML müssen Sie sich diese Spezifikation ansehen, und die dortige Spezifikation besagt definitiv, dass jedes Element höchstens eine ID haben kann und dass diese ID auf der Seite eindeutig sein muss: w3.org/TR/html401/struct/global. html # h-7.5.2 (für HTML 4)
tvanfosson

9
@tvanfosson: Überraschenderweise sagt die HTML4-Spezifikation NICHT, dass jedes Element höchstens eine ID haben kann. Wenn Sie sich die HTML5-Spezifikationen ansehen , werden Sie sogar feststellen, dass This specification doesn't preclude an element having multiple IDs, if other mechanisms (e.g. DOM Core methods) can set an element's ID in a way that doesn't conflict with the id attribute.(was den CSS-Spezifikationen entspricht)
user123444555621

1
Sie können nur ein ID-Attribut haben, und das Format des Inhalts des ID-Attributs schließt Leerzeichen aus. Im Zusammenhang mit der Frage - Angeben von HTML-IDs für Element 2 - ist dies weder in HTML 4 noch in HTML 5 möglich. Sie gehen davon aus, dass die Angabe einer ID, die mit CSS funktioniert, ausreicht Was er versucht zu tun, und es könnte sein, dass eine XML-ID funktionieren würde, aber ich sehe nicht, wie Sie das aus der Frage herausholen, wie geschrieben. Das Beispiel, das er zeigt, funktioniert weder in HTML 4 noch in HTML 5, und es gibt keine Möglichkeit, es zum Laufen zu bringen, um das zu erreichen, was gezeigt wird.
Tvanfosson

6
Ich upvoted diese Antwort als es beantwortet die Frage: „ können Sie zuweisen mehrere IDs auf ein Element?“ Ich sollte jedoch hinzufügen, dass dies über bloße Spezifikationen hinausgeht; Wie in der akzeptierten Antwort gezeigt, besagt die Spezifikation, dass Sie in Bezug auf HTML / XHTML selbst nur eine ID mit dem idAttribut zuweisen dürfen . Zur Verdeutlichung ist das xml:idAttribut (und tatsächlich jedes Attribut außerhalb des Standardnamespace) in XHTML nicht gültig. Wie Sie jedoch aus der HTML5-Spezifikation zitieren, führt dies in keiner Weise xml:id="bar"zu einem stillschweigenden Fehlschlag. Es wird weiterhin die barID zu diesem Element hinzugefügt , sodass es übereinstimmt #bar.
BoltClock

28

Mein Verständnis war schon immer:

  • IDs sind zum einmaligen Gebrauch bestimmt und werden nur auf ein Element angewendet ...

    • Jedes Element wird (nur) einem einzelnen Element als eindeutige Kennung zugeordnet .
  • Klassen können mehrmals verwendet werden ...

    • Sie können daher auf mehr als ein Element angewendet werden , und ähnlich und doch unterschiedlich kann es mehr als eine Klasse (dh mehrere Klassen) pro Element geben .

18
Ich denke nicht, dass dies eine Antwort auf die Frage ist. Die Frage ist: "Können mehrere IDs für ein einzelnes Element verwendet werden?"
Kevin

4
@kevin Diese Antwort geht davon aus, dass OP mit einem XY-Problem konfrontiert ist und definitiv jemandem helfen kann, der versucht, das Klassenverhalten über IDs zu erreichen - aus welchem ​​Grund auch immer.
Mahdi

Sie beziehen sich auf "einmalige Verwendung", aber das kann Verwirrung stiften. Sie können und ist eine häufige und korrekte Sache, die ein Element anhand seiner ID mehrmals verwendet. Ich denke, Sie sprechen eine andere Interpretation an: Sie sollten eine (und nur eine) ID für ein Element und NUR für dieses Element verwenden.
Mbotet

27

Nein. Während die Definition von w3c für HTML 4 Ihre Frage nicht explizit abzudecken scheint, enthält die Definition des Attributs name und id keine Leerzeichen im Bezeichner:

ID- und NAME-Token müssen mit einem Buchstaben ([A-Za-z]) beginnen und können von einer beliebigen Anzahl von Buchstaben, Ziffern ([0-9]), Bindestrichen ("-") und Unterstrichen ("_") gefolgt werden. , Doppelpunkte (":") und Punkte (".").


20

Nein. Jedes DOM-Element hat, wenn es eine ID hat, eine einzelne, eindeutige ID. Sie könnten es mit so etwas wie:

<div id='enclosing_id_123'><span id='enclosed_id_123'></span></div>

und verwenden Sie dann die Navigation, um das zu erhalten, was Sie wirklich wollen.

Wenn Sie nur Stile anwenden möchten, sind Klassennamen besser.


Das würde jedoch die Validierung unterbrechen.
Aupajo

3
Was ist an dieser Antwort illegal? Kann jemand die Abwahl erklären?
tpower

19
Nicht ich. :-) Und ich bin mir nicht sicher, was du damit meinst, die Validierung zu brechen? Die IDs von div und span unterscheiden sich (einschließen oder eingeschlossen), sodass bei doppelten IDs kein Problem auftritt. Vielleicht lesen einige Leute nicht sehr genau.
Tvanfosson

4
Eine Bank auszurauben ist illegal, ein Softwareproblem ist niemals illegal. Es ist wieder das alte Problem zwischen virtueller Realität und tatsächlicher Realität :-P
TrojanName

@BrianFenton Debuggen eines anderen Codes hat mir klar gemacht, dass es illegal sein sollte. Ich sage 5 Jahre Gefängnis, weil ich die Spezifikationen nicht ohne guten Grund befolgt habe.
Probleme von

18

Sie können nur eine ID pro Element haben, aber Sie können tatsächlich mehr als eine Klasse haben. Haben Sie jedoch nicht mehrere Klassenattribute, sondern fügen Sie mehrere Klassenwerte in ein Attribut ein.

<div id="foo" class="bar baz bax">

ist vollkommen legal.


4

Nein, Sie können nicht mehrere IDs für ein einzelnes Tag haben, aber ich habe ein Tag mit einem nameAttribut und einem idAttribut gesehen, die von einigen Anwendungen gleich behandelt werden.


1
im IE vor IE8 ja. Aber sie haben diesen Fehler jetzt im Standardmodus behoben. getElementById () wird verwendet, um Elemente, deren Groß- und Kleinschreibung für Name und ID nicht übereinstimmt, falsch zurückzugeben.
Scunliffe

4

Nein, Sie sollten verschachtelte DIVs verwenden, wenn Sie diesen Pfad beschreiten möchten. Stellen Sie sich außerdem die Verwirrung vor, die beim Ausführen von document.getElementByID () entstehen würde. Welche ID wird es holen, wenn es mehrere gibt?

Zu einem leicht verwandten Thema können Sie einem DIV mehrere Klassen hinzufügen . Siehe Eric Myers Diskussion unter,

http://meyerweb.com/eric/articles/webrev/199802a.html


1
Würde es nicht die ID erhalten, die Sie in Klammern angegeben haben? getElementById();macht nichts ohne eine Zeichenfolge, die angibt, was zu bekommen ist?! getElementById('foo');bekomme das Element mit foo als ID! Mehrere IDs wären hier nicht wichtig. Es würde immer noch nach "foo" suchen.
Rin und Len

3
Any ID assigned to a div element is unique.
However, you can assign multiple IDs "under", and not "to" a div element.
In that case, you have to represent those IDs as <span></span> IDs.

Say, you want two links in the same HTML page to point to the same div element in  the page.

The two different links
<p><a href="#exponentialEquationsCalculator">Exponential Equations</a></p>         

<p><a href="#logarithmicExpressionsCalculator"><Logarithmic Expressions</a></p>

Point to the same section of the page. 
<!-- Exponential / Logarithmic Equations Calculator -->
<div class="w3-container w3-card white w3-margin-bottom">      
   <span id="exponentialEquationsCalculator"></span>
   <span id="logarithmicEquationsCalculator"></span>
</div>

2

http://www.w3.org/TR/REC-html40/struct/global.html#h-7.5.2

Das id-Attribut weist einem Element eine eindeutige Kennung zu (die von einem SGML-Parser überprüft werden kann).

und

ID- und NAME-Token müssen mit einem Buchstaben ([A-Za-z]) beginnen und können von einer beliebigen Anzahl von Buchstaben, Ziffern ([0-9]), Bindestrichen ("-") und Unterstrichen ("_") gefolgt werden. , Doppelpunkte (":") und Punkte (".").

"ID" muss also eindeutig sein und darf kein Leerzeichen enthalten.


1

Ich möchte technisch ja sagen, da das, was wirklich gerendert wird, technisch immer browserabhängig ist. Die meisten Browser versuchen, die Spezifikationen so gut wie möglich einzuhalten, und soweit ich weiß, enthält die CSS-Spezifikation nichts dagegen. Ich werde nur für den tatsächlichen HTML-, CSS- und Javascript-Code bürgen, der an den Browser gesendet wird, bevor ein anderer Interpreter eingreift.

Ich sage jedoch auch nein, da jeder Browser, auf dem ich normalerweise teste, Sie nicht zulässt. Wenn Sie sich selbst davon überzeugen müssen, speichern Sie Folgendes als HTML-Datei und öffnen Sie es in den wichtigsten Browsern. In allen Browsern, die ich mit der Javascript-Funktion getestet habe, stimmt sie nicht mit einem Element überein. Entfernen Sie jedoch entweder "hunkojunk" aus dem ID-Tag und alles funktioniert einwandfrei. Beispielcode

<html>
<head>
</head>
<body>
    <p id="hunkojunk1 hunkojunk2"></p>

<script type="text/javascript">
    document.getElementById('hunkojunk2').innerHTML = "JUNK JUNK JUNK JUNK JUNK JUNK";
</script>
</body>
</html>

1

Nein.

Trotzdem hindert Sie nichts daran, es zu tun. Bei den verschiedenen Browsern tritt jedoch ein inkonsistentes Verhalten auf. Tu es nicht. 1 ID pro Element.

Wenn Sie einem Element mehrere Zuweisungen wünschen, verwenden Sie Klassen (durch ein Leerzeichen getrennt).


0

Das ist interessant, aber soweit ich weiß, ist die Antwort ein festes Nein. Ich verstehe nicht, warum Sie eine verschachtelte ID benötigen, da Sie diese normalerweise mit einem anderen Element kreuzen, das dieselbe verschachtelte ID hat. Wenn Sie es nicht tun, gibt es keinen Grund, wenn Sie es tun, gibt es immer noch sehr wenig Sinn.


1
Ich hätte aus Gründen der Abwärtskompatibilität auch gerne 2 IDs verwendet. Zum Beispiel war etwas, das in einer früheren Version Artikel-8 war, jetzt aber als Knoten-8 bezeichnet wird und 2 IDs eines Elements enthält, würde das Codieren einer Problemumgehung verhindern, um es abwärtskompatibel zu machen. Während beide IDs als eindeutige Kennung (en) bleiben würden.
FLIEG

0

Ich weiß, dass dies ein Jahr alt ist, aber ich war selbst neugierig darauf und ich bin sicher, dass andere hier ihren Weg finden werden. Die einfache Antwort ist nein, wie andere vor mir gesagt haben. Ein Element kann nicht mehr als eine ID haben und eine ID kann nicht mehr als einmal auf einer Seite verwendet werden. Probieren Sie es aus und Sie werden sehen, wie gut es ist nicht funktioniert.

Als Antwort auf die Antwort von tvanfosson bezüglich der Verwendung derselben ID in zwei verschiedenen Elementen. Soweit mir bekannt ist, kann eine ID nur einmal auf einer Seite verwendet werden, unabhängig davon, ob sie an ein anderes Tag angehängt ist.

Per Definition sollte ein Element, das eine ID benötigt, eindeutig sein. Wenn Sie jedoch zwei IDs benötigen, ist es nicht wirklich eindeutig und benötigt stattdessen eine Klasse.


1
Wenn Sie jedoch die Antwort von tvanfosson lesen, unterscheiden sich die beiden IDs deutlich von "encosing_id_123"! = "Enclosed_id_123"
Ben

0

Klassen sind speziell dafür gemacht, hier ist der Code, aus dem Sie verstehen können

<html>
<head>
    <style type="text/css">
     .personal{
            height:100px;
            width: 100px;   

        }
    .fam{
            border: 2px solid #ccc;
        }   
    .x{
            background-color:#ccc;
        }   

    </style>
</head>
<body>

    <div class="personal fam x"></div>

</body> 
</html>



-4

Ich glaube nicht, dass du zwei Ausweise haben kannst, aber es sollte möglich sein. Die zweimalige Verwendung derselben ID ist ein anderer Fall ... wie bei zwei Personen, die denselben Pass verwenden. Eine Person könnte jedoch mehrere Pässe haben ... Ich habe danach gesucht, da ich eine Situation habe, in der ein einzelner Mitarbeiter mehrere Funktionen haben kann. Wenn Sie "sysadm" und "Teamkoordinator" mit der ID = "sysadm teamcoordinator" sagen, kann ich sie von anderen Seiten aus referenzieren, sodass employee.html # sysadm und employee.html # teamcoordinator zum selben Ort führen ... Eines Tages jemand Andernfalls könnte die Funktion des Teamkoordinators übernommen werden, während der Systemadministrator der Systemadministrator bleibt. Dann muss ich nur die IDs auf der Seite employee.html ändern. Aber wie gesagt, es funktioniert nicht :(

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.