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

Является ли такой сценарий действительным?:

div#foo
span#foo
a#foo

ОТВЕТЫ

Ответ 1

Нет.

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

Ответ 2

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

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

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

Ответ 3

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

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

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

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

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

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

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

Заключение

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

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

Сила твоя!

Ответ 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. К сожалению, этого не произойдет. ТОЛЬКО кнопка 1st вызывает обработчик кликов. Другие 2 при нажатии ничего не делают. Это как если бы они вообще не были кнопками!

Поэтому всегда назначайте разные элементы IDs to 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');
    });
});

Ответ 5

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

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

Ответ 6

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

Это:

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

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

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

Эта проблема в настоящее время не находится ни на одном радаре, насколько я знаю, но это реально.

Это:

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

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

Это:

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

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

Ответ 7

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

Пример:

(используется для современных браузеров) article # main-content {styleed one way}
 (используется для устаревших) div # main-content {styleled another way}

Наверное, антипаттерн. Просто оставись здесь как защитник дьявола.

Ответ 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/ для теста.

Ответ 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>

... но OP конкретно заявлял - как насчет разных типов элементов. Поэтому рассмотрим следующий 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.

Ответ 10

Нет, идентификаторы должны быть уникальными. Вы можете использовать классы для этой цели

<div class="a" /><div class="a b" /><span class="a" />

div.a {font: ...;}
/* or just: */
.a {prop: value;}

Ответ 11

Возможно ли иметь более одного ученика в классе, имеющем тот же Roll/Id no? В атрибуте HTML id это так. Вы можете использовать для них один и тот же класс. например:

<div class="a b c"></div>
<div class="a b c d"></div>

И так далее.

Ответ 12

Я думаю, вы не можете этого сделать, потому что Id уникален, вам нужно использовать его для одного элемента. Вы можете использовать класс для целей

Ответ 13

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

var ids = document.getElementById('one');

Ответ 14

Обычно лучше не использовать один и тот же идентификатор несколько раз на 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>

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