Могут ли несколько разных элементов HTML иметь одинаковый идентификатор, если они разные?

Question

Допустим ли такой сценарий?

div#foo
span#foo
a#foo

Answer 1

Нет.

Идентификаторы элементов должны быть уникальными во всем документе.

Answer 2

Я думаю, что есть разница между тем, что ДОЛЖНО быть уникальным или ДОЛЖНО быть уникальным (т. Е. Применено веб-браузерами).

Должны ли идентификаторы быть уникальными? YES.

Должны ли идентификаторы быть уникальными? НЕТ, по крайней мере, IE и FireFox позволяют нескольким элементам иметь одинаковый идентификатор.

Answer 3

Могут ли несколько элементов иметь одинаковый идентификатор?

Да - независимо от того, являются ли они одним тегом или нет, браузеры будут отображать страницу, даже если несколько элементов имеют одинаковый идентификатор.

Это действительный HTML?

Нет. Это все еще верно для HTML 5.1 spec . Однако в спецификации также сказано, что getElementById должен возвращать первый элемент с заданным идентификатором , что делает поведение не неопределенным в случае недопустимого документа.

Каковы последствия этого типа недопустимого HTML?

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

Некоторые библиотеки javascript do имеют ожидания, которые не оправдываются, если несколько элементов имеют одинаковый идентификатор (см. комментарий wootscootinboogie о d3.js)

Заключение

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

1. Чтобы избежать вероятности, что вы не правы, и одна из используемых вами библиотек дает сбой , когда несколько элементов имеют одинаковый идентификатор.
2. Для обеспечения прямой совместимости вашего веб-сайта / приложения с библиотеками или службами (или разработчиками!) Вы можете столкнуться в будущем с ошибкой, когда несколько элементов имеют одинаковый идентификатор.

Сила твоя!

Answer 4

Даже если элементы разных типов, это может вызвать серьезные проблемы ...

Предположим, у вас есть 3 кнопки с одинаковым идентификатором:

<button id="myid" data-mydata="this is button 1">button 1</button>
<button id="myid" data-mydata="this is button 2">button 2</button>
<button id="myid" data-mydata="this is button 3">button 3</button>

Теперь вы настроили некоторыеjQuery код для выполнения каких-либо действий при нажатии кнопок myid:

$(document).ready(function ()
{
    $("#myid").click(function ()
    {
        var buttonData = $(this).data("mydata");

        // Call interesting function...
        interestingFunction();

        $('form').trigger('submit');
    });
});

Чего бы вы ожидали?Чтобы каждая нажатая кнопка выполняла настройку обработчика события нажатия с помощью jQuery.К сожалению, этого не произойдет.ТОЛЬКО кнопка 1-ая вызывает обработчик щелчка.Другие 2 при нажатии ничего не делают.Это как если бы они не были кнопками вообще!

Так что всегда присваивайте разные IDs элементам HTML.Это защитит вас от странных вещей.:)

<button id="button1" class="mybtn" data-mydata="this is button 1">button 1</button>
<button id="button2" class="mybtn" data-mydata="this is button 2">button 2</button>
<button id="button3" class="mybtn" data-mydata="this is button 3">button 3</button>

Теперь, если вы хотите, чтобы обработчик события щелчка запускался при нажатии любой из кнопок, он будет работать отлично, если вы измените селектор в коде jQuery для использования класса CSS, примененного ким так:

$(document).ready(function ()
{
    $(".mybtn").click(function ()
    {
        var buttonData = $(this).data("mydata");

        // Call interesting function...
        interstingFunction();

        $('form').trigger('submit');
    });
});

Answer 5

Нет. два элемента с одинаковым идентификатором недопустимы. Идентификаторы уникальны, если вы хотите сделать что-то подобное, используйте класс. Не забывайте, что элементы могут иметь несколько классов, используя пробел в качестве разделителя:

<div class="myclass sexy"></div>

Answer 6

Официальная спецификация для HTML гласит, что теги id должны быть уникальными И Официальная спецификация также гласит, что если рендеринг может быть завершен, он должен (т.е. в HTML не существует такого понятия, как «ошибки»)., только "недействительный" HTML). Итак, вот как на самом деле работают теги id .Все они недействительны , но все еще работают:

This:

<div id="unique">One</div>
<div id="unique">Two</div>

Хорошо отрисовывается во всех браузерах.Однако document.getElementById возвращает только объект, а не массив;Вы только сможете выбрать первый div с помощью тега id.Если вы измените идентификатор первого элемента div с помощью JavaScript, второй идентификатор будет доступен с document.getElementById (протестировано в Chrome, FireFox и IE11).Вы все еще можете выбрать div, используя другие методы выбора, и его свойство id будет возвращено правильно.

Обратите внимание Эта проблема выше открывает потенциальную уязвимость безопасности на сайтах, которые отображают изображения SVG, так какSVG могут содержать элементы DOM, а также теги id на них (позволяет перенаправлять DOM скрипта через загруженные изображения).Пока SVG находится в DOM до того, как заменяет элемент, изображение будет получать все события JavaScript, предназначенные для другого элемента.

На данный момент, насколько я знаю, этой проблемы пока нет ни у кого на радаре.это реально.

Это:

<div id="unique" id="unique-also">One</div>

Также хорошо отображается во всех браузерах.Однако, только идентификатор first , который вы определили таким образом, используется, если вы пытались document.getElementById ('unique-также');в приведенном выше примере вам будет возвращено null (проверено на Chrome, FireFox и IE11).

This:

<div id="unique unique-two">Two</div>

Также хорошо отображается во всех браузерах,однако, в отличие от тегов классов, которые могут быть разделены пробелом, тег id допускает пробелы, поэтому идентификатором вышеупомянутого элемента на самом деле является «unique unique-two», и в dom запрашивается «unique» или «unique-two» визоляция возвращает ноль , если не указано иное в DOM (протестировано на Chrome, FireFox и IE11).

Answer 7

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

Пример:

(для современных браузеров) article # main-content { стилизовано в одну сторону }
(передано в наследство) div # main-content { стилизовано по-другому }

Возможно, антипаттерн.Просто уйти отсюда как точка защиты дьявола.

Answer 8

И что бы это ни стоило, по крайней мере в Chrome 26.0.1410.65, Firefox 19.0.2 и Safari 6.0.3, если у вас несколько элементов с одинаковым идентификатором, селекторы jquery (как минимум) вернут первый элемент этот идентификатор.

, например

<div id="one">first text for one</div>
<div id="one">second text for one</div>

и

alert($('#one').size());

См. http://jsfiddle.net/RuysX/ для теста.

Answer 9

Что ж, при использовании валидатора HTML на w3.org , специфичного для HTML5, идентификаторы должны быть уникальными

Рассмотрим следующее ...

<!DOCTYPE html> 
<html>
    <head>
        <meta charset="UTF-8">
        <title>MyTitle</title> 
    </head>
    <body>
        <div id="x">Barry</div>
        <div id="x">was</div>
        <div id="x">here</div>
    </body>
</html>

Валидатор отвечает ...

Line 9, Column 14: Duplicate ID x.      <div id="x">was</div>
Warning Line 8, Column 14: The first occurrence of ID x was here.       <div id="x">Barry</div>
Error Line 10, Column 14: Duplicate ID x.       <div id="x">here</div>
Warning Line 8, Column 14: The first occurrence of ID x was here.       <div id="x">Barry</div>

... но ОП специально указала - как насчет разных типов элементов. Итак, рассмотрим следующий HTML ...

<!DOCTYPE html> 
<html>
    <head>
        <meta charset="UTF-8">
        <title>MyTitle</title> 
    </head>
    <body>
        <div id="x">barry
            <span id="x">was here</span>
        </div>
    </body>
</html>

... результат от валидатора: ...

Line 9, Column 16: Duplicate ID x.          <span id="x">was here</span>
Warning Line 8, Column 14: The first occurrence of ID x was here.       <div id="x">barry

Вывод:

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

Answer 10

Обычно лучше не использовать один и тот же идентификатор несколько раз на html-странице. Тем не менее, на странице можно использовать один и тот же идентификатор много раз. Однако, когда вы используете идентификатор как часть URI / URL, как показано ниже:

https://en.wikipedia.org/wiki/FIFA_World_Cup#2015_FIFA_corruption_case

И если идентификатор ('2015_FIFA_corruption_case') используется только для одного (span) элемента на веб-странице:

<span class="mw-headline" id="2015_FIFA_corruption_case">2015 FIFA corruption case</span>

Не было бы проблем. Напротив, один и тот же идентификатор существует в нескольких местах, браузер будет сбит с толку.