Каковы побочные эффекты использования нескольких экземпляров одного имени в HTML?

Question

Любопытно узнать, какие именно проблемы я вызову, если я включу несколько элементов на моей веб-странице с тем же идентификатором?

, например:

<div id='someID'>Some Content</div> 
<div id='someID'>Some Other Content</div> 

Answer 1

При попытке ссылки на эти элементы из JavaScript он не сможет решить, к какому элементу вы обращаетесь. В зависимости от конкретного интерпретатора JavaScript, который вы используете, вы можете либо получить ошибки, либо неопределенное поведение - оба случая нежелательны.

Спецификация HTML указывает, что идентификатор должен быть уникальным, поэтому ваш HTML будет считаться недействительным и может привести к откату браузеров в рендеринг режима quirks или даже полностью отказаться от рендеринга вашей страницы (хотя это маловероятно, и все текущие браузеры будут делать что-то - технически, если вы не будете следовать спецификации, браузер не обязан ничего делать, кроме как отклонить вашу страницу).

Вы должны рассмотреть вопрос об использовании имен классов вместо этого, если вы хотите что-то, чтобы определить несколько элементов с помощью:

<div class="someClass">Some Content</div> 
<div class="someClass">Some Other Content</div> 

---

Blair указал в комментариях ниже, что, если вам нужно искать элементы по классам от JavaScript, вы можете ускорить поиск, перейдя от ближайшего элемента с идентификатором, а также скажите, какой тип узла искать.Это может держать скорость доступа быстро в большинстве случаев, но не нарушает никаких правил на дублирующих идентификаторами:

HTML: 
<div id="myNearestID"> 
    <div class="someClass">Some Content</div> 
    <div class="someClass">Some Other Content</div> 
</div> 

JavaScript+JQuery: 
$('#myNearestID div.someClass') 

Answer 2

Затем, который один контроль вы хотите обратиться, когда вы делаете что-то подобное в Javascript: -

document.getElementById("someID") 

Answer 3

Я не уверен, как браузеры отображают правила CSS типа #someID (они, вероятно, применит правило ко всем таким элементам), но у вас наверняка возникнут проблемы с JavaScript и getElementById.

Answer 4

IE будет иметь серьезные проблемы с любым javascript, используя ID, это основной побочный эффект.

В целом, идентификаторы уникальны, согласно спецификации ... браузер производитель волен сделать это предположение в коде, и любых ошибок (Javascript, CSS и т.д.), которые возникают в результате недопустимого HTML с участием их .. .Вы, это ваша проблема :)

Браузер не обязан это исправлять, и я не думаю, что они тоже должны.

Answer 5

Я читал в другом месте, что IE создает глобальную переменную для каждого элемента с идентификатором.

Я ошибаюсь, говоря, что это тоже проблема?

Answer 6

Я не думаю, что браузеры будут жаловаться, но и другие проблемы, которые вы бы наблюдать являются:

• страница может не подтвердить из-за dulicate ID декларации
• The JavaScript, который может работать на странице может перестать работать правильно, если они находят элементы по идентификатору так как в это время, он получит неправильный элемент
• Правила использования CSS ed в #ID будет повторяться ко всем элементам, которые имеют одинаковый идентификатор

Я думаю, что для этого достаточно проблем, чтобы не использовать один и тот же идентификатор для всех элементов.

HTH.

Answer 7

Еще пару пунктов, которые еще не были указаны.

Идентификаторы фрагментов: Как браузер обработает ссылку на http://www.example.com#someID?

Внутренние ссылки: Если какой-либо идентификатор был на двух входных элементах, а у вас был < ярлык for = "someID" > ... если пользователь нажал на метку, браузеру пришлось бы решить, какой вход должен получать фокус. (В HTML5 это определяется как первый вход, что не обязательно то, что вы хотите). Аналогично, для поддержки ARIA некоторые атрибуты, такие как aria-labelledby и aria, описаны, опираясь на то, чтобы указывать на одно место.

Answer 8

Браузер сойдет с ума, когда мы ссылаемся на него через JavaScript или где-то еще в файле с кодом.