Aynı kimliğe sahip iki HTML öğesi: Gerçekten ne kadar kötü?

Sadece Google Maps kaynak koduna göz atıyorsunuz. Başlıklarında id = "search" biri diğerini içeren 2 divs ve ayrıca jstrack = "1" niteliği vardır. Onları bu şekilde ayıran bir form var:

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

Bu google olduğundan, bunun bir hata olmadığını farz ediyorum.

Peki bu kuralı ihlal etmek ne kadar kötü olabilir? Css ve dom seçiminizde dikkatli olduğunuz sürece neden kimliğin sınıflarını kullanmıyorsunuz? Bunu bilerek yapan var mı, öyleyse neden?

Şartname UNIQUE diyor

HTML 4.01 özelliği , kimliğin belge genelinde benzersiz olması gerektiğini söylüyor.

HTML 5 özelliği aynı şeyi ancak başka bir deyişle söylüyor. Kimliğinin, ev tanımında benzersiz olması gerektiğini , bunun tanımını okuduğumuzda temelde belge olduğunu söylüyor .

Çoğaltma kaçının

Ancak HTML oluşturucular, HTML oluşturmaya gelince çok bağışlayıcı olduklarından, yinelenen kimliklere izin verirler. Bu , JavaScript'teki ID'lerle programlı olarak programlara erişirken mümkün olduğu ve kesinlikle kaçınılması gerekenlerden kaçınılmalıdır . getElementByIdEşleşen birkaç eleman bulunduğunda hangi fonksiyonun dönmesi gerektiğinden emin değilim ? Olmalı:

• hata döndürmek
• ilk eşleşen öğeyi döndür
• son eşleşen öğeye dönülsün mü?
• eşleşen öğeler kümesi döndür?
• hiçbir şey döndürmemek?

Ancak bu günlerde tarayıcılar güvenilir bir şekilde çalışsalar da, gelecekte şartnameye aykırı olduğu için kimse bu davranışı garanti edemez. Bu nedenle , aynı belgede hiçbir zaman kimlikleri çoğaltmamanızı öneririm .

"Ne kadar kötü" diye sordun. Yani @ RobertKoritnik'in (tamamen doğru) cevabını biraz ...

Bu kod yanlış. Yanlış gri tonlarında gelmiyor. Bu kod standardı ihlal ediyor ve bu nedenle yanlış. Doğrulama kontrolünde başarısız olur ve yapmalıdır.

Bununla birlikte, şu anda piyasada bulunan hiçbir tarayıcı bu konuda hiçbir şikayette bulunmayacak veya sorun yaşamaması gerektiğini söyledi. Tarayıcılar bu konuda şikayette bulunma hakları dahilinde olacak, ancak şu anda hiçbirinin geçerli sürümünün hiçbiri bulunmuyor. Gelecekteki sürümleri bu kodu kötü işlemeyebilir anlamına gelmez.

Bu tanıtıcıyı css veya javascript'te bir seçici olarak kullanmaya çalışan davranışınız değiştirilemez ve muhtemelen tarayıcıdan tarayıcıya değişir. Sanırım her tarayıcının buna nasıl tepki gösterdiğini görmek için bir çalışma yapılabilir. En iyi durumda, "class =" gibi davranacağını ve onların listesini seçeceğini düşünüyorum. (Bununla birlikte, JavaScript kitaplıklarının kafasını karıştırabilir - eğer jQuery'nin yazarı olsaydım, "#" ile başlayan bir seçiciyle gelirseniz, tek bir nesne beklediğimden ve tek bir nesne beklediğimden, seçim kodumu optimize etmiş olabilirim. liste beni tamamen rahatsız edebilir.)

Ayrıca, ilki veya muhtemelen sonuncuyu seçebilir veya hiçbirini seçmeyebilir veya tarayıcıyı tamamen çökertebilir. Denemeden söylemenin yolu yok.

“Ne kadar kötü” o zaman tamamen belirli bir tarayıcının HTML spesifikasyonunu ne kadar sıkı uyguladığına ve bu şartnamenin ihlali ile karşı karşıya kaldığında ne yaptığına bağlıdır.

EDIT: SADECE bugün bu rastlamak oldu. Bu site için harika, hepsi bir arada bir raporlama programı oluşturmak için çeşitli varlıklardaki arama formlarından çeşitli bileşenlerden faydalanıyorum, uzak sayfaların arama formlarını gizli div'ler içine yüklüyorum ve bunları Raporun kaynağı olarak uygun varlık türü seçildiğinde rapor oluşturucu. Dolayısıyla, formun gizli bir sürümü ve rapor oluşturucuda görüntülenen bir sürüm var. Birlikte verilen JavaScript, her durumda, sayfada artık İKİ olan gizli kimliğe ve görüntülenen kimliğe göre öğeleri belirtir.

JQuery’nin yaptığı gibi, beni ilk olanı seçmek, ki bu da her durumda tam olarak istemediğim bir şey.

Bu konuda çalışıyorum, alanımı almak istediğim sayfanın bölgesini belirtmek için seçiciler yazarak (yani: $ ('# containerDiv #specificElement')). Ancak sorunuza bir cevap var - Chrome'daki jQuery, bu şart ihlali ile karşı karşıya kaldığında kesinlikle özel bir davranış sergiliyor.

Bu gerçekten ne kadar kötü?

1. Beni ağlatıyor
2. Geçersiz
3. Birçok javascript kütüphanesi beklendiği gibi çalışmayacak
4. Kodunuzu kafa karıştırıcı hale getirir

Deneyim, büyük tarayıcılardaki getElementById öğesinin belgedeki ilk eşleşen öğeyi döndüreceğini söylüyor. Ancak bu gelecekte her zaman böyle olmayabilir.

JQuery'ye bir kimlik verildiğinde, örneğin #foo, getElementById öğesini kullanır ve bu davranışı taklit eder. Bunun üzerinde çalışmak zorundaysanız (üzücü), jQuery'i getElementsByTagName kullanmaya ve tüm eşleşen öğelerin bir listesini döndürmeye ikna edecek olan $ (" * #foo") kullanabilirsiniz.

Genellikle diğer siteler için kod yazmam gerekiyor ve bunun üzerinde çalışmam gerekiyor. Adil bir dünyada, kimliğin benzersiz olup olmadığını kontrol ederek başlamak için işlevleri yeniden tasarlamak zorunda kalmam. Kimlikler her zaman benzersiz olmalıdır. Dünya acımasız ve bu yüzden ağlıyorum.

Sen edebilirsiniz pek çok şeyler yapmak - ama bu yapmanız gerekir anlamına gelmez.

Bir programcı olarak (genel olarak konuşursak) hayatlarımızı kesin ve kurallara uymaya dayandırırız - işte izlenmesi kolay olan, yaptığımız iş için oldukça temel olan bir kuraldır - belirli bir kapsamdaki benzersiz tanımlayıcıları seviyoruz (bağımlıyız) ...

Kuralı çiğnemek, yapabileceğimiz bir şeydir, çünkü tarayıcı çok fazla uygundur - ancak eğer tarayıcılar iyi biçimlendirilmiş ve geçerli HTML’ye ihtiyaç duyma konusunda katı olsaydı, bizlerin neden olacağı acıdan çok daha uzun bir zaman alabilirdi. geri ödendi!

Yani, gerçekten bu kadar kötü mü? Bir programcı olarak nasıl sorabilirsiniz? Uygarlığa karşı bir suç (-:

Zeyilname:

Tarayıcıların kötü bir şey gibi ağırlandığını yazıyorsun

Yapıyorum, çünkü bu - karmaşık kurallardan bahsetmiyoruz, esas olarak iyi biçimlendirilmiş şeyleri yapmaktan ve başka şekilde mekanik olarak test edilebilecek ve sonuçların mekanik olarak işlenmesini kolaylaştıracak kuralları uygulamaktan bahsediyoruz. Eğer tarayıcılar katı olsaydı, araçlar çok hızlı bir şekilde bunu destekleyecek şekilde adapte olurlardı - öyle değil, bir dereceye kadar bu başarısızlıktan istifade ettiler. Sadece bunu düşünün - eğer MS ve Netscape tarafından alıntı metni için açıkça desteklenmiş çok daha az karmaşık bir "e-posta biçimlendirme dili" bize çok daha iyi bir araç verdiğinde, sınırsız HTML’e izin vererek bu sorunu çözmemiş olsaydı, e-posta çok daha iyi bir ortam olurdu. ... ama o gemi gitti ve benzer şekilde yapabiliriz.olmalıdır ) ama biz yapamayız

Komut Dosyasında: getElementByIDyalnızca ilk eşleşmeyi döndürür. CSS'de: #idbu kimliğe sahip TÜM öğeleri etkileyecektir. Tarayıcıda Render herhangi bir etkisi olmayacak.

Bu w3c standardının davranışıdır. Mümkün değil, tanımlanmış olanı.

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