Czy wiele różnych elementów HTML może mieć ten sam identyfikator, jeśli są różnymi elementami?

Czy taki scenariusz jest ważny ?:

div#foo
span#foo
a#foo

Nie.

Identyfikatory elementów powinny być unikalne w całym dokumencie.

Myślę, że istnieje różnica między tym, czy coś POWINNO być unikalne, czy MUSI być unikalne (tj. Wymuszane przez przeglądarki internetowe).

Czy identyfikatory powinny być unikalne? TAK.

Czy identyfikatory muszą być niepowtarzalne? NIE, przynajmniej IE i FireFox pozwalają wielu elementom mieć ten sam identyfikator.

Czy wiele elementów może mieć ten sam identyfikator?

Tak - niezależnie od tego, czy są to ten sam tag, czy nie, przeglądarki będą renderować stronę, nawet jeśli wiele elementów ma ten sam identyfikator.

Czy to poprawny HTML?

Nie. Jest to nadal aktualne w specyfikacji HTML 5.1 . Jednak specyfikacja mówi również, że getElementById musi zwrócić pierwszy element o podanym identyfikatorze , dzięki czemu zachowanie nie jest niezdefiniowane w przypadku nieprawidłowego dokumentu.

Jakie są konsekwencje tego typu nieprawidłowego kodu HTML?

Większość (jeśli nie wszystkie) przeglądarek wybrałeś i nadal nie wybrać pierwszy element o danym ID, kiedy dzwonisz getElementById. Większość bibliotek, które znajdują elementy według identyfikatora, dziedziczy to zachowanie. Większość (jeśli nie wszystkie) przeglądarek również stosuje style przypisane przez selektory id (np. #myid) Do wszystkich elementów o określonym ID. Jeśli tego oczekujesz i zamierzasz, nie ma żadnych niezamierzonych konsekwencji. Jeśli spodziewasz się / zamierzasz czegoś innego (np. Aby wszystkie elementy z tym identyfikatorem zostały zwrócone lub styl miałby być zastosowany tylko do jednego elementu), twoje oczekiwania nie zostaną spełnione i żadna funkcja oparta na tych oczekiwaniach zawiedzie.

Niektóre biblioteki javascript nie mają oczekiwania, że nie są spełnione, gdy wiele elementy mają ten sam identyfikator (patrz komentarz wootscootinboogie na temat d3.js)

Wniosek

Najlepiej trzymać się standardów, ale jeśli wiesz, że Twój kod działa zgodnie z oczekiwaniami w obecnych środowiskach, a te identyfikatory są używane w przewidywalny / możliwy do utrzymania sposób, są tylko 2 praktyczne powody, aby tego nie robić:

1. Aby uniknąć ryzyka, że ​​się mylisz, a jedna z używanych bibliotek faktycznie działa nieprawidłowo, gdy wiele elementów ma ten sam identyfikator.
2. Aby zachować zgodność Twojej witryny / aplikacji z bibliotekami lub usługami (lub programistami!), Które możesz napotkać w przyszłości, które będą działać nieprawidłowo, gdy wiele elementów ma ten sam identyfikator - co jest rozsądną możliwością, ponieważ nie jest to technicznie poprawne HTML.

Moc jest Twoja!

Nawet jeśli elementy są różnych typów, może to spowodować poważne problemy ...

Załóżmy, że masz 3 przyciski z tym samym identyfikatorem:

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

Teraz konfigurujesz jQuerykod, który robi coś po myidkliknięciu przycisków:

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

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

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

Czego byś się spodziewał? Że każdy kliknięty przycisk spowoduje wykonanie konfiguracji obsługi zdarzeń kliknięcia z jQuery. Niestety tak się nie stanie. TYLKO pierwszy przycisk wywołuje moduł obsługi kliknięć. Pozostałe 2 po kliknięciu nic nie robi. To tak, jakby w ogóle nie były guzikami!

Dlatego zawsze przypisuj różne elementy IDsdo HTMLelementów. Dzięki temu będziesz chroniony przed dziwnymi rzeczami. :)

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

Teraz, jeśli chcesz, aby moduł obsługi zdarzenia kliknięcia działał po kliknięciu dowolnego przycisku, będzie działał idealnie, jeśli zmienisz selektor w kodzie jQuery, aby używał CSSklasy zastosowanej do nich w następujący sposób:

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

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

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

Nie. Dwa elementy o tym samym identyfikatorze są nieprawidłowe. Identyfikatory są unikalne, jeśli chcesz zrobić coś takiego, użyj klasy. Nie zapominaj, że elementy mogą mieć wiele klas, używając spacji jako separatora:

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

Oficjalna specyfikacja HTML mówi, że tagi id muszą być unikalne ORAZ oficjalna specyfikacja stwierdza również, że jeśli renderowanie może zostać ukończone, musi (tj. Nie ma czegoś takiego jak „błędy” w HTML, tylko „nieprawidłowy” HTML). Oto jak tagi identyfikacyjne faktycznie działają w praktyce . Wszystkie są nieważne , ale nadal działają:

To:

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

Renderuje dobrze we wszystkich przeglądarkach. Jednak document.getElementById zwraca tylko obiekt, a nie tablicę; będziesz mógł wybrać tylko pierwszy element div za pomocą identyfikatora. Gdybyś miał zmienić id pierwszego div za pomocą JavaScript, drugi identyfikator byłby wtedy dostępny za pomocą document.getElementById (testowane na Chrome, FireFox i IE11). Nadal możesz wybrać element div za pomocą innych metod wyboru, a jego właściwość id zostanie zwrócona poprawnie.

Należy pamiętać, że powyższy problem otwiera potencjalną lukę w zabezpieczeniach witryn, które renderują obrazy SVG, ponieważ pliki SVG mogą zawierać elementy DOM, a także tagi identyfikacyjne (umożliwia przekierowanie skryptów DOM przez przesłane obrazy). Dopóki plik SVG jest umieszczony w DOM przed elementem, który zastępuje, obraz otrzyma wszystkie zdarzenia JavaScript przeznaczone dla innego elementu.

O ile wiem, ten problem nie jest obecnie widoczny dla nikogo na radarze, ale jest prawdziwy.

To:

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

Również renderuje się dobrze we wszystkich przeglądarkach. Jednak tylko pierwszy identyfikator zdefiniowany w ten sposób jest używany, jeśli próbowałeś document.getElementById ('unique-also'); w powyższym przykładzie zwracane byłoby null (testowane na Chrome, FireFox i IE11).

To:

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

Również renderuje się dobrze we wszystkich przeglądarkach, jednak w przeciwieństwie do tagów klas, które mogą być oddzielone spacją, znacznik id dopuszcza spacje, więc identyfikator powyższego elementu jest w rzeczywistości „unique unique-two” i pyta dom o „unique” lub „unique-two” oddzielnie zwraca wartość null, chyba że zdefiniowano inaczej w innym miejscu DOM (testowane w Chrome, FireFox i IE11).

Odpowiedź SLaks jest poprawna, ale jako dodatek zauważ, że specyfikacje x / html określają, że wszystkie identyfikatory muszą być unikalne w (pojedynczym) dokumencie html . Chociaż nie jest to dokładnie to, o co prosił operator, mogą istnieć ważne przypadki, w których ten sam identyfikator jest dołączony do różnych jednostek na wielu stronach.

Przykład:

(serwowane w nowoczesnych przeglądarkach) article # main-content { styled one way }
(provided to legacy) div # main-content { styled inaczej }

Prawdopodobnie jest to jednak anty-wzór. Po prostu wychodzę tutaj jako adwokat diabła.

I choć warto, w Chrome 26.0.1410.65, Firefox 19.0.2 i przynajmniej Safari 6.0.3, jeśli masz wiele elementów z tym samym identyfikatorem, selektory jquery (przynajmniej) zwrócą pierwszy element z tym identyfikatorem.

na przykład

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

i

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

Zobacz http://jsfiddle.net/RuysX/ dla testu.

Cóż, używając walidatora HTML na w3.org , specyficznego dla HTML5, identyfikatory muszą być unikalne

Rozważ następujące...

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

walidator odpowiada ...

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>

... ale OP wyraźnie określił - co z różnymi typami elementów. Rozważ więc następujący 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>

... wynik z walidatora to ...

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

Wniosek:

W obu przypadkach (ten sam typ elementu lub inny typ elementu), jeśli identyfikator zostanie użyty więcej niż raz, nie zostanie uznany za prawidłowy HTML5.

Możemy użyć nazwy klasy zamiast id. html id powinny być unikalne, ale klasy nie. podczas pobierania danych przy użyciu nazwy klasy może zmniejszyć liczbę linii kodu w plikach js.

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

Myślę, że nie możesz tego zrobić, ponieważ Id jest wyjątkowy, musisz go użyć dla jednego elementu. Możesz użyć klasy do tego celu

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

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

identyfikatory zawierają tylko pierwszy element div. Więc nawet jeśli istnieje wiele elementów o tym samym identyfikatorze, obiekt dokumentu zwróci tylko pierwsze dopasowanie.

Nie, identyfikatory muszą być niepowtarzalne. W tym celu możesz użyć klas

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

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

Czy można mieć więcej niż jednego ucznia w klasie z tym samym numerem Roll / Id? W idatrybucie HTML jest tak. Możesz użyć dla nich tej samej klasy. na przykład:

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

I tak dalej.

Zwykle lepiej nie używać wielokrotnie tego samego identyfikatora na stronie html. Mimo to możliwe jest wielokrotne użycie tego samego identyfikatora na stronie. Jednak gdy używasz identyfikatora jako części URI / adresu URL, jak poniżej:

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

A jeśli identyfikator („2015_FIFA_corruption_case”) jest używany tylko dla jednego (span) elementu na stronie internetowej:

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

Nie byłoby problemu. Wręcz przeciwnie, ten sam identyfikator istnieje w więcej niż jednym miejscu, przeglądarka byłaby zdezorientowana.

Tak, moga.

Nie wiem, czy wszystkie te odpowiedzi są nieaktualne, ale po prostu otwórz youtube i sprawdź html. Spróbuj przejrzeć sugerowane filmy, zobaczysz, że wszystkie mają ten sam identyfikator i powtarzalną strukturę w następujący sposób:

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