Dua elemen HTML dengan atribut id yang sama: Seberapa buruk itu sebenarnya?

Cukup browsing kode sumber google maps. Di header mereka, mereka memiliki 2 divs dengan id = "search" yang satu berisi yang lain, dan juga memiliki atribut jstrack = "1". Ada bentuk yang memisahkan mereka seperti ini:

<div id="search" jstrack="1">
    <form action="/maps" id="...rest isn't important">
        ...
        <div id="search">...

Karena ini adalah google, saya menganggap itu bukan kesalahan.

Jadi seberapa burukkah itu bisa melanggar aturan ini? Selama Anda berhati-hati dalam pemilihan css dan dom Anda, mengapa tidak menggunakan kembali kelas seperti id? Adakah yang melakukan ini dengan sengaja, dan jika demikian, mengapa?

Spesifikasi mengatakan UNIK

Spesifikasi HTML 4.01 mengatakan ID harus unik untuk seluruh dokumen.

Spesifikasi HTML 5 mengatakan hal yang sama tetapi dengan kata lain. Dikatakan bahwa ID harus unik di subtree rumah , yang pada dasarnya adalah dokumen jika kita membaca definisi itu .

Hindari duplikasi

Tetapi karena penyaji HTML sangat memaafkan dalam hal rendering HTML, mereka mengizinkan ID duplikat. Ini harus dihindari jika mungkin dan benar - benar dihindari ketika mengakses elemen secara terprogram oleh ID dalam JavaScript. Saya tidak yakin getElementByIdfungsi apa yang harus dikembalikan ketika beberapa elemen yang cocok ditemukan? Haruskah itu:

• kembalikan kesalahan?
• kembalikan elemen pencocokan pertama?
• kembalikan elemen pencocokan terakhir?
• mengembalikan serangkaian elemen yang cocok?
• tidak mengembalikan apa-apa?

Tetapi bahkan jika browser bekerja andal hari ini, tidak ada yang dapat menjamin perilaku ini di masa depan karena ini melanggar spesifikasi. Itu sebabnya saya sarankan Anda tidak pernah menggandakan ID dalam dokumen yang sama.

Anda bertanya "seberapa buruk". Jadi untuk menyempurnakan jawabannya (sepenuhnya akurat) @ RobertKoritnik ...

Kode itu salah. Salah tidak datang dalam nuansa abu-abu. Kode ini melanggar standar dan karenanya salah. Ini akan gagal memeriksa validasi, dan seharusnya.

Yang mengatakan, tidak ada browser saat ini di pasaran akan mengeluh tentang hal itu, atau punya masalah sama sekali. Peramban berhak untuk mengeluh tentang hal itu, tetapi tidak ada versi saat ini dari mereka yang melakukannya. Yang tidak berarti versi yang akan datang mungkin tidak memperlakukan kode ini dengan buruk.

Perilaku Anda yang mencoba menggunakan ID itu sebagai pemilih, baik dalam css atau javascript, tidak dapat diabaikan dan mungkin bervariasi dari browser ke browser. Saya kira suatu penelitian dapat dilakukan untuk melihat bagaimana masing-masing browser bereaksi terhadap hal itu. Saya pikir dalam kasus terbaik, itu akan memperlakukannya seperti "class =", dan pilih daftar mereka. (Namun, itu mungkin membingungkan perpustakaan JavaScript - jika saya adalah penulis jQuery, saya mungkin telah mengoptimalkan kode pemilih saya sehingga jika Anda datang kepada saya dengan pemilih yang dimulai dengan "#", saya mengharapkan satu objek, dan mendapatkan daftar mungkin membuat saya benar-benar bork.)

Mungkin juga memilih yang pertama, atau mungkin yang terakhir, atau tidak memilih salah satu dari mereka, atau crash browser sepenuhnya. Tidak ada cara untuk mengatakannya tanpa mencobanya.

"Seberapa buruk" bergantung sepenuhnya pada seberapa ketat browser tertentu mengimplementasikan spesifikasi HTML, dan apa yang dilakukannya ketika dihadapkan dengan pelanggaran terhadap spesifikasi itu.

EDIT: SAYA HANYA kebetulan menemukan ini hari ini. Saya menarik berbagai komponen dari formulir pencarian pada berbagai jenis entitas untuk menghasilkan utilitas pelaporan lengkap all-in-one yang besar untuk situs ini, saya memuat formulir pencarian halaman jauh dalam div tersembunyi dan memasukkannya ke dalam pembuat laporan ketika tipe entitas yang sesuai dipilih sebagai sumber untuk laporan. Jadi ada versi tersembunyi formulir, dan versi yang ditampilkan di pembuat laporan. JavaScript yang datang dengan, dalam semua kasus, mengacu pada elemen dengan ID, yang sekarang ada DUA di halaman - yang tersembunyi, dan yang ditampilkan.

Apa yang tampaknya dilakukan jQuery adalah memilih saya yang PERTAMA, yang dalam semua kasus persis yang saya TIDAK inginkan.

Saya sedang mengerjakan ini dengan menulis penyeleksi untuk menentukan wilayah halaman yang saya inginkan untuk mendapatkan bidang saya (yaitu: $ ('# containerDiv #specificElement')). Tapi ada satu jawaban untuk pertanyaan Anda - jQuery on Chrome pasti berperilaku dengan cara tertentu ketika dihadapkan dengan pelanggaran spesifikasi ini.

Seberapa buruk itu sebenarnya?

1. Itu membuatku sedih
2. Itu tidak valid
3. Banyak pustaka javascript tidak akan berfungsi seperti yang diharapkan
4. Itu membuat kode Anda membingungkan

Pengalaman mengatakan bahwa getElementById di browser utama akan mengembalikan elemen yang cocok pertama dalam dokumen. Tapi ini mungkin tidak selalu terjadi di masa depan.

Ketika jQuery diberi id misalnya #foo, ia menggunakan getElementById dan meniru perilaku itu. Jika Anda harus mengatasi ini (itu menyedihkan), Anda dapat menggunakan $ (" * #foo") yang akan meyakinkan jQuery untuk menggunakan getElementsByTagName dan mengembalikan daftar semua elemen yang cocok.

Saya sering harus menulis kode untuk situs lain, dan saya harus mengatasinya. Dalam dunia yang adil, saya tidak perlu mendesain ulang fungsi untuk memulai dengan memeriksa apakah ID itu unik. ID harus selalu unik. Dunia ini kejam dan itulah sebabnya saya menangis.

Anda dapat melakukan banyak hal - tetapi itu tidak berarti Anda harus melakukannya.

Sebagai seorang programmer (secara umum) kita membangun hidup kita untuk menjadi tepat dan mengikuti aturan - ini adalah aturan yang mudah diikuti, yang cukup mendasar untuk apa yang kita lakukan - kita suka (tergantung pada) pengidentifikasi unik dalam lingkup yang diberikan ...

Melanggar aturan adalah sesuatu yang bisa kita lakukan karena browser terlalu akomodatif - tetapi sebenarnya kita semua akan lebih baik jika browser ketat tentang perlunya HTML yang terbentuk dengan baik dan valid, jumlah kecil rasa sakit yang akan ditimbulkannya sudah lama telah dilunasi!

Jadi, apakah ini benar-benar seburuk itu? Sebagai seorang programmer, bagaimana Anda bisa bertanya? Ini adalah kejahatan terhadap peradaban (-:

Tambahan:

Anda menulis bahwa browser terlalu akomodatif seolah itu hal yang buruk

Ya, karena - kita tidak berbicara tentang aturan yang rumit, kita berbicara secara substansial tentang membuat segala sesuatunya terbentuk dengan baik dan menerapkan aturan yang dapat diuji secara mekanis dan yang pada gilirannya membuatnya lebih mudah untuk hasilnya diproses secara mekanis. Jika browser ketat maka alat akan sangat cepat beradaptasi untuk mendukung itu - tidak demikian halnya, beberapa sejauh mereka mengeksploitasi yang gagal sebagai gantinya. Coba pikirkan ini - email akan menjadi media yang jauh lebih baik jika MS dan Netscape tidak mengacaukannya dengan mengizinkan HTML tidak dibatasi ketika "bahasa markup email" yang jauh lebih kompleks dengan dukungan eksplisit untuk teks yang dikutip akan memberi kita alat yang jauh lebih baik ... Tapi kapal itu berlayar dan kita juga bisa 'seharusnya ) tetapi kita tidak bisa

Di Scripting: getElementByIDhanya akan mengembalikan kecocokan pertama. Di CSS: #idakan memengaruhi SEMUA elemen dengan ID itu. Di Browser Render tidak akan berpengaruh apa pun.

Ini adalah perilaku standar w3c. Bukan yang mungkin, itu yang didefinisikan facto.

https://dom.spec.whatwg.org/#interface-nonelementparentnode