Два елементи HTML з однаковим атрибутом id: Наскільки це насправді погано?

Просто переглядайте вихідний код Google Maps. У своєму заголовку вони мають 2 діви з id = "search", один містить інший, а також має атрибут jstrack = "1". Існує форма, що розділяє їх так:

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

Оскільки це Google, я припускаю, що це не помилка.

Тож як погано може бути насправді порушувати це правило? Поки ви обережні у виборі css і dom, чому б не використовувати повторно подібні класи? Хтось робить це спеціально, і якщо так, то чому?

Специфікація говорить УНІКАЛЬНО

Специфікація HTML 4.01 говорить, що ідентифікатор повинен бути унікальним для документа.

Специфікація HTML 5 говорить те саме, але іншими словами. У ньому йдеться про те, що ID повинен бути унікальним у своєму домашньому піддереві , що в основному є документом, якщо ми читаємо його визначення .

Уникайте дублювання

Але оскільки HTML-рендери дуже прощають, що стосується візуалізації HTML, вони дозволяють повторювати ідентифікатори. Цього слід уникати, якщо це взагалі можливо і суворо уникати, коли програмно звертається до елементів за ідентифікаторами в JavaScript. Я не впевнений, яку getElementByIdфункцію слід повернути, коли знайдено декілька відповідних елементів? Чи слід:

• повернути помилку?
• повернути перший відповідний елемент?
• повернути останній елемент, що відповідає?
• повернути набір відповідних елементів?
• повернути нічого?

Але навіть якщо браузери працюють надійно в наші дні, ніхто не може гарантувати подібну поведінку в майбутньому, оскільки це суперечить специфікації. Ось чому я рекомендую ніколи не копіювати посвідчення особи в одному документі.

Ви запитали "як погано". Тож, щоб чітко визначитись (цілком точна) відповідь Роберта Корітника ...

Цей код невірний. Неправильне не виходить у відтінках сірого. Цей код порушує стандарт і тому є неправильним. Це не вдасться перевірити перевірку, і це повинно.

Однак, жоден веб-переглядач, який зараз є на ринку, не скаржиться на це або не матиме жодних проблем. Веб-браузери мають право скаржитися на це, але жодна з нинішніх версій жодної з них наразі не робить. Що не означає, що майбутні версії можуть не поводитися з цим кодом погано.

Ваша поведінка, намагаючись використовувати цей ідентифікатор як селектор, або в css, або в JavaScript, не може використовуватись і, ймовірно, залежить від браузера до браузера. Я припускаю, що можна провести дослідження, щоб побачити, як кожен браузер реагує на це. Я думаю, що в кращому випадку, він би трактував це так само, як "class =", і вибирав їх список. (Це може заплутати бібліотеки JavaScript, - якби я був автором jQuery, я міг би оптимізувати свій селекторний код, так що якщо ви прийдете до мене з селектором, що починається з "#", я очікую на один об'єкт і отримаю список міг би мене повністю перевантажити.)

Він також може вибрати перший, або, можливо, останній, або вибрати жоден з них, або повне збої браузера. Немає способу сказати, не намагаючись.

"Наскільки погано", то повністю залежить від того, наскільки суворо конкретний браузер реалізує специфікацію HTML, і що він робить, коли стикається з порушенням цієї специфікації.

РЕДАКТИ: Я ДІЙСЬКИЙ ДІЙСЬКИЙ ДІЙСЬКИЙ СТАТИЙ Цього сьогодні. Я перетягую різні компоненти від форм пошуку для різних типів об'єктів, щоб створити велику велику утиліту звітності "все в одному" для цього сайту, я завантажую форми пошуку віддалених сторінок у приховані диви і розміщую їх у моїх генератор звітів, коли в якості джерела звіту вибрано відповідний тип сутності. Отже, є прихована версія форми та версія, що відображається в генераторі звітів. JavaScript, який постачався разом із усіма випадками, посилається на елементи за ідентифікатором, яких зараз на ДВІ на сторінці - прихований та відображений.

Що, здається, робить jQuery - це обирати мене ПЕРШИМ, який у всіх випадках - саме той, якого я НЕ хочу.

Я працюю над цим, записуючи селектори, щоб вказати регіон сторінки, в якій я хочу отримати своє поле (тобто: $ ('# containerDiv #specificElement')). Але є одне відповідь на ваше запитання - jQuery в Chrome, безумовно, поводиться особливим чином, стикаючись із цим специфікаційним порушенням.

Наскільки насправді це погано?

1. Це змушує мене плакати
2. Це недійсне
3. Багато бібліотек javascript не працюватимуть, як очікувалося
4. Це робить ваш код заплутаним

Досвід говорить, що getElementById у основних браузерах поверне перший збіглий елемент у документі. Але це може бути не завжди в майбутньому.

Коли jQuery отримують ідентифікатор, наприклад, #foo, він використовує getElementById і імітує цю поведінку. Якщо вам доведеться обійти це (це сумно), ви можете скористатися $ (" * #foo"), що переконає jQuery використовувати getElementsByTagName і повернути список усіх відповідних елементів.

Мені часто доводиться писати код для інших сайтів, і мені доводиться це робити. У справедливому світі мені не доведеться переробляти функції для запуску, перевіряючи, чи унікальний ідентифікатор. Ідентифікатори завжди повинні бути унікальними. Світ жорстокий, і тому я плачу.

Ви можете зробити багато чого, але це не означає, що вам слід.

Як програміст (взагалі кажучи), ми будуємо своє життя на тому, щоб бути точними та дотримуватися правил - ось правило, якого просто дотримуватися, що є досить важливим для того, що ми робимо - нам подобаються (залежать від) унікальні ідентифікатори в заданому обсязі ...

Порушити правило - це те, що ми можемо зробити, тому що браузер занадто пристосований - але насправді нам би все було краще, якби браузери суворо ставились до необхідності добре сформованого та дійсного HTML-коду, то невелика кількість болю, що це спричинило б, давно б було погашено!

Отже, чи справді це погано? Як програміст, як ви навіть можете запитати? Це злочин проти цивілізації (-:

Додаток:

Ви пишете, що браузери занадто пристосовані, ніби це погано

Я це роблю, тому що це - ми не говоримо про складні правила, ми говоримо по суті про те, щоб зробити речі добре сформованими та іншим чином застосувати правила, які можна перевірити механічно і які, у свою чергу, полегшують механічну обробку результату. Якби браузери були суворими, інструменти дуже швидко адаптували б це для того, щоб це підтримати - це було не так, як не вони, в тій мірі, в якій вони скористаються цим недоліком. Подумайте лише про це - електронна пошта була б набагато приємнішим середовищем, якби MS та Netscape не прикрутили її, дозволяючи необмежений HTML, коли набагато менш складний "мова розмітки електронної пошти" з явною підтримкою цитованого тексту дав би нам набагато кращий інструмент ... але цей корабель приплив, і ми можемо так само 'повинно бути ), але ми не можемо

У сценарії: getElementByIDповерне лише перший збіг. У CSS: #idвплине на ВСІ елементи з цим ідентифікатором. У візуалізації браузера не матиме жодного ефекту.

Така поведінка стандарту w3c. Неможлива, це визначена фактом.

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