Bisakah beberapa elemen HTML yang berbeda memiliki ID yang sama jika mereka elemen yang berbeda?

Apakah skenario seperti ini valid ?:

div#foo
span#foo
a#foo

Tidak.

ID elemen harus unik di seluruh dokumen.

Saya pikir ada perbedaan antara apakah sesuatu HARUS unik atau HARUS unik (yaitu diberlakukan oleh browser web).

Haruskah ID unik? IYA.

Haruskah ID unik? TIDAK, setidaknya IE dan FireFox memungkinkan beberapa elemen memiliki ID yang sama.

Bisakah beberapa elemen memiliki ID yang sama?

Ya - apakah itu tag yang sama atau tidak, browser akan merender halaman meskipun beberapa elemen memiliki ID yang sama.

Apakah itu HTML yang Benar?

Tidak. Ini masih berlaku pada spesifikasi HTML 5.1 . Namun, spesifikasi juga mengatakan getElementById harus mengembalikan elemen pertama dengan ID yang diberikan , membuat perilaku tidak terdefinisi dalam kasus dokumen yang tidak valid.

Apa konsekuensi dari jenis HTML yang tidak valid ini?

Sebagian besar (jika tidak semua) browser telah dipilih dan masih jangan pilih elemen pertama dengan ID yang diberikan, saat memanggil getElementById. Sebagian besar perpustakaan yang menemukan elemen dengan ID mewarisi perilaku ini. Sebagian besar (jika tidak semua) browser juga menerapkan gaya yang ditetapkan oleh pemilih-id (mis. #myid) Untuk semua elemen dengan ID yang ditentukan. Jika ini yang Anda harapkan dan niatkan, maka tidak ada konsekuensi yang tidak diinginkan. Jika Anda mengharapkan / bermaksud sesuatu yang lain (misalnya untuk semua elemen dengan ID yang akan dikembalikan, atau agar gaya hanya berlaku untuk satu elemen) maka harapan Anda tidak akan terpenuhi dan fitur apa pun yang mengandalkan harapan itu akan gagal.

Beberapa perpustakaan javascript memang memiliki harapan yang tidak terpenuhi ketika beberapa elemen memiliki ID yang sama (lihat komentar wootscootinboogie tentang d3.js)

Kesimpulan

Yang terbaik adalah tetap berpegang pada standar, tetapi jika Anda tahu kode Anda berfungsi seperti yang diharapkan di lingkungan Anda saat ini, dan ID ini digunakan dengan cara yang dapat diprediksi / dipelihara, maka hanya ada 2 alasan praktis untuk tidak melakukan ini:

1. Untuk menghindari kemungkinan Anda salah, dan salah satu perpustakaan yang Anda gunakan sebenarnya tidak berfungsi ketika beberapa elemen memiliki ID yang sama.
2. Untuk menjaga kompatibilitas-depan situs web / aplikasi Anda dengan perpustakaan atau layanan (atau pengembang!) Yang mungkin Anda temui di masa depan, yang tidak berfungsi ketika beberapa elemen memiliki ID yang sama - yang merupakan kemungkinan yang masuk akal karena ini, secara teknis, tidak valid HTML.

Kekuatan itu milikmu!

Bahkan jika elemen-elemen dari tipe yang berbeda itu dapat menyebabkan Anda beberapa masalah serius ...

Misalkan Anda memiliki 3 tombol dengan id yang sama:

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

Sekarang Anda menyiapkan beberapa jQuerykode untuk melakukan sesuatu ketika myidtombol diklik:

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

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

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

Apa yang kamu harapkan? Setiap tombol yang diklik akan menjalankan pengaturan event handler klik dengan jQuery. Sayangnya itu tidak akan terjadi. HANYA tombol pertama memanggil penangan klik. 2 lainnya ketika diklik tidak melakukan apa-apa. Seolah-olah itu bukan tombol sama sekali!

Jadi selalu tetapkan berbeda IDsuntuk HTMLelemen. Ini akan membuat Anda tertutup terhadap hal-hal aneh. :)

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

Sekarang jika Anda ingin event handler klik dijalankan ketika salah satu tombol diklik, itu akan berfungsi dengan baik jika Anda mengubah pemilih dalam kode jQuery untuk menggunakan CSSkelas yang diterapkan pada mereka seperti ini:

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

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

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

Dua elemen dengan id yang sama tidak valid. ID unik, jika Anda ingin melakukan hal seperti itu, gunakan kelas. Jangan lupa bahwa elemen dapat memiliki beberapa kelas dengan menggunakan spasi sebagai delimeter:

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

Spek resmi untuk HTML menyatakan bahwa tag id harus unik DAN spek resmi juga menyatakan bahwa jika render dapat diselesaikan, itu harus (yaitu tidak ada yang namanya "kesalahan" dalam HTML, hanya HTML "tidak valid"). Jadi, berikut ini adalah bagaimana sebenarnya tag id berfungsi dalam praktik . Semuanya tidak valid , tetapi masih berfungsi:

Ini:

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

Render baik di semua browser. Namun, document.getElementById hanya mengembalikan objek, bukan array; Anda hanya akan dapat memilih div pertama melalui tag id. Jika Anda mengubah id div pertama menggunakan JavaScript, ID kedua akan dapat diakses dengan document.getElementById (diuji pada Chrome, FireFox & IE11). Anda masih dapat memilih div menggunakan metode pemilihan lain, dan properti id-nya akan dikembalikan dengan benar.

Harap perhatikan bahwa masalah di atas membuka kerentanan keamanan potensial di situs yang membuat gambar SVG, karena SVG diizinkan mengandung elemen DOM, dan juga tag id pada mereka (memungkinkan skrip pengalihan DOM melalui gambar yang diunggah). Selama SVG diposisikan di DOM sebelum elemen itu diganti, gambar akan menerima semua peristiwa JavaScript yang dimaksudkan untuk elemen lainnya.

Masalah ini saat ini tidak di radar siapa pun sejauh yang saya tahu, namun ini nyata.

Ini:

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

Juga menjadikan baik di semua browser. Namun, hanya id pertama yang Anda tentukan dengan cara ini yang digunakan, jika Anda mencoba document.getElementById ('unik-juga'); dalam contoh di atas, Anda akan dikembalikan nol (diuji pada Chrome, FireFox & IE11).

Ini:

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

Namun, juga menjadikan baik di semua browser, tidak seperti tag kelas yang dapat dipisahkan oleh spasi, tag id memungkinkan spasi, sehingga id elemen di atas sebenarnya "unik unik-dua", dan meminta dom untuk "unik" atau "unik-dua" dalam isolasi menghasilkan nol kecuali ditentukan lain di DOM (diuji pada Chrome, FireFox & IE11).

Jawaban SLaks benar, tetapi sebagai catatan tambahan bahwa spesifikasi x / html menentukan bahwa semua id harus unik dalam dokumen html (tunggal) . Meskipun tidak persis apa yang diminta op, mungkin ada contoh yang valid di mana id yang sama dilampirkan ke entitas yang berbeda di beberapa halaman.

Contoh:

(disajikan ke peramban modern) artikel # konten utama { gaya satu arah }
(disajikan ke lawas) div # konten utama { gaya lain }

Mungkin antipattern. Hanya pergi dari sini sebagai titik advokat iblis.

Dan untuk apa nilainya, setidaknya pada Chrome 26.0.1410.65, Firefox 19.0.2, dan Safari 6.0.3, jika Anda memiliki beberapa elemen dengan ID yang sama, penyeleksi jquery (setidaknya) akan mengembalikan elemen pertama dengan ID tersebut.

misalnya

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

dan

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

Lihat http://jsfiddle.net/RuysX/ untuk tes.

Nah, menggunakan validator HTML di w3.org , khusus untuk HTML5, ID harus unik

Pertimbangkan yang berikut ...

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

validator merespons dengan ...

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>

... tetapi OP secara khusus menyatakan - bagaimana dengan tipe elemen yang berbeda. Jadi pertimbangkan HTML berikut ...

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

... hasil dari validator adalah ...

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

Kesimpulan:

Dalam kedua kasus (tipe elemen yang sama, atau tipe elemen yang berbeda), jika id digunakan lebih dari sekali, itu tidak dianggap HTML5 yang valid.

Kita bisa menggunakan nama kelas daripada menggunakan id. id html harus unik tetapi kelas tidak. ketika mengambil data menggunakan nama kelas dapat mengurangi jumlah baris kode dalam file js Anda.

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

Saya pikir Anda tidak dapat melakukannya karena saya unik Anda harus menggunakannya untuk satu elemen. Anda dapat menggunakan kelas untuk tujuan tersebut

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

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

id hanya mengandung elemen div pertama. Jadi walaupun ada beberapa elemen dengan id yang sama, objek dokumen hanya akan mengembalikan kecocokan pertama.

Tidak, ID harus unik. Anda dapat menggunakan kelas untuk tujuan itu

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

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

Apakah mungkin untuk memiliki lebih dari satu siswa di kelas yang memiliki Roll / Id no yang sama? Dalam idatribut HTML seperti itu. Anda dapat menggunakan kelas yang sama untuk mereka. misalnya:

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

Dan seterusnya.

Biasanya, lebih baik tidak menggunakan ID yang sama beberapa kali di halaman html. Meski begitu, dimungkinkan untuk menggunakan ID yang sama berkali-kali dalam satu halaman. Namun ketika Anda menggunakan ID sebagai bagian dari URI / URL seperti di bawah ini:

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

Dan jika ID ('2015_FIFA_corruption_case') digunakan hanya untuk satu (rentang) elemen di halaman web:

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

Tidak akan ada masalah. Sebaliknya, ID yang sama ada di lebih dari satu tempat, browser akan menjadi bingung.

Ya mereka bisa.

Saya tidak tahu apakah semua jawaban ini sudah ketinggalan zaman, tetapi buka saja youtube dan periksa html. Cobalah untuk memeriksa video yang disarankan, Anda akan melihat bahwa mereka semua memiliki Id yang sama dan struktur berulang seperti berikut:

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