Rumah > hujung hadapan web > tutorial css > Apa yang Berlaku Apabila Anda Menggunakan ID Pendua dalam HTML?

Apa yang Berlaku Apabila Anda Menggunakan ID Pendua dalam HTML?

Linda Hamilton
Lepaskan: 2024-12-15 18:40:15
asal
259 orang telah melayarinya

What Happens When You Use Duplicate IDs in HTML?

Berbilang Elemen dengan ID Yang Sama: Perjalanan Menuju Tidak Sah

Walaupun panduan jelas daripada W3C bahawa tiada dua elemen dalam halaman harus berkongsi ID yang sama, fenomena yang membingungkan timbul apabila berbilang elemen mempunyai ID yang sama. Mari kita siasat implikasi anomali ini.

Gelagat Penyemak Imbas

Penyemak imbas sering menggunakan pendekatan "gagal secara senyap", mentafsir HTML yang tidak sah untuk mematuhi jangkaan mereka. Oleh itu, walaupun ia tidak sah, contoh HTML dengan dua elemen yang mempunyai ID yang sama berfungsi dalam semua penyemak imbas.

Potensi Kesan Sampingan

Walau bagaimanapun, dengan menyimpang daripada spesifikasi, anda membuka pintu untuk akibat yang tidak dijangka. Sebagai contoh, menggunakan kaedah getElementById() hanya akan mendapatkan semula elemen pertama dengan ID yang ditentukan.

Alternatif Lebih Selamat

Daripada menggunakan berbilang elemen dengan ID yang sama, gunakan nama kelas untuk penggayaan kumpulan unsur. Amalan ini mematuhi reka bentuk pemilih CSS yang dimaksudkan.

Menyiasat Elemen dengan ID Yang Sama

Jika anda benar-benar mesti memilih berbilang elemen dengan ID yang sama, anda boleh menggunakan pemilih atribut:

document.querySelectorAll('p[id="red"]');
Salin selepas log masuk

Perhatikan bahawa pendekatan ini mungkin tidak berfungsi dalam versi pelayar lama seperti IE7 dan di bawah.

Kesimpulan

Walaupun penyemak imbas mungkin memuatkan HTML yang tidak sah, adalah dinasihatkan supaya tidak bergantung pada tingkah laku sedemikian. Untuk ketekalan, kebolehselenggaraan dan untuk mengelakkan potensi isu, gunakan nama kelas untuk menggayakan elemen yang serupa.

Atas ialah kandungan terperinci Apa yang Berlaku Apabila Anda Menggunakan ID Pendua dalam HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan