Может ли элемент html иметь несколько идентификаторов?


311

Я понимаю, что идентификатор должен быть уникальным на странице HTML / XHTML.

Мой вопрос, для данного элемента, я могу назначить несколько идентификаторов для него?

<div id="nested_element_123 task_123"></div>

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


Я почти какое-то время программирую на html css и js. Мне часто нужно использовать несколько классов, но я действительно никогда не использую, и мне не нужно использовать несколько идентификаторов. Тем не менее, мне немного любопытно: могу ли я спросить, с какой ситуацией вы столкнулись в таком случае, когда вам нужно несколько удостоверений личности?
Вилли Вонка

В редком сценарии, когда у вас нет доступа к исходному HTML (например, при создании прокси), если вам нужно настроить таргетинг на элемент с несколькими идентификаторами, селектор css [id = "one two three" '] должен нацелиться на элемент.
JisuKim82

Это действительно зависит от спецификации, указанной (и, вероятно, реализованной) и контекста в ней. т.е. w3.org/TR/html5/dom.html#the-id-attribute и более старый, который указывает «да»? w3.org/TR/2011/WD-html5-20110525/elements.html#the-id-attribute
Марк Шультхайс,

1
@willywonka Я знаю, что это как 2+ года спустя, но я наткнулся на эту статью только сейчас, ища ответ на этот вопрос, и мне хотелось поделиться с вами сценарием, с которым я столкнулся, поскольку вы так и не получили ответа. Я делаю проект для freecodecamp для создания калькулятора JS. Они хотят, чтобы идентификатор для вывода был «отображать», чтобы они могли выполнять свои тесты против него, но я создаю научный калькулятор с двумя дисплеями: #input и #output, поэтому для отображения #input ТАКЖЕ нужен идентификатор «display» Значение в дополнение к значению «вход» я хочу дать его для согласованности.
Тара

1
Привет @TaraStahler , пожалуйста. Насколько я знаю, браузер будет отображать первый только в том случае, если вы используете запись <... id = "input" id = "display" ...>, а также идентификатор не должен содержать пробелов (или табуляции), поэтому запись <... id = "input display" ...> вообще не действительна. Просто поэкспериментировал с javascript с консолью Chrome, и он возвращает «Uncaught ReferenceError: display notfined» в обоих случаях. Только первый случай возвращает объект, если я получаю его с первым идентификатором, второй не достижим. Во втором случае ни один из идентификаторов не достижим. Может быть, вам нужно реорганизовать свой код?
Вилли Вонка

Ответы:


206

Нет. Из спецификации XHTML 1.0

В XML идентификаторы фрагментов имеют тип ID, и для каждого элемента может быть только один атрибут типа ID. Следовательно, в XHTML 1.0 атрибут id определен как идентификатор типа. Чтобы документы XHTML 1.0 были хорошо структурированными документами XML, документы XHTML 1.0 ДОЛЖНЫ использовать атрибут id при определении идентификаторов фрагментов для элементов, перечисленных выше. См. Рекомендации по совместимости HTML для получения информации об обеспечении обратной совместимости таких якорей при подаче документов XHTML в качестве медиа-типа text / html.


7
«Идентификаторы фрагмента имеют идентификатор типа, и на элемент может быть только один атрибут идентификатора типа». Здесь говорится, что один атрибут и атрибут отличаются от значений атрибута. В нем не говорится, что значения атрибутов не должны ни в каком контексте предполагать многозначность либо через пробел, либо через разделение символов. Хотя в спецификации говорится, что для обратной совместимости он не должен содержать пробел в значениях атрибутов Идентификаторы фрагмента (w3.org/TR/xhtml1/#guidelines). Поэтому, если вы хотите выразить многозначные идентификаторы, вы должны выразить это по-другому
Ричеве Бебедор

2
Зависит от спецификации, которую вы цитируете, я полагаю. «Эта спецификация не запрещает элементу с несколькими идентификаторами ...» w3.org/TR/2011/WD-html5-20110525/elements.html#the-id-attribute
Марк Шультхайс,

Смотрите здесь, где это предложение удалено. W3.org/TR/html5/dom.html#the-id-attribute
Марк Шультхайс,

Хорошо, я сделал этот ответ достиг отметки 200 upvote. Все хорошо. Я вижу себя.
Хофи

196

Вопреки тому, что все говорили, правильный ответ - ДА

Спецификация селекторов очень ясно об этом:

Если элемент имеет несколько атрибутов идентификатора, все они должны рассматриваться как идентификаторы для этого элемента для целей селектора идентификаторов. Такая ситуация может быть достигнута с использованием сочетаний xml: id, DOM3 Core, XML DTD и специфичных для пространства имен знание.


редактировать

Просто чтобы уточнить: Да, элемент XHTML может иметь несколько идентификаторов, например

<p id="foo" xml:id="bar">

но присвоение нескольких идентификаторов одному и тому же idатрибуту с использованием списка через пробел невозможно.


7
Отличный ответ - теперь это ставит кошку среди голубей.
TrojanName

3
К сожалению, здесь действует не спецификация CSS. Для HTML / XHTML вы должны взглянуть на эту спецификацию, и в этой спецификации определенно сказано, что каждый элемент может иметь не более одного идентификатора и этот идентификатор должен быть уникальным на странице: w3.org/TR/html401/struct/global. html # h-7.5.2 (для HTML 4)
tvanfosson

9
@tvanfosson: Удивительно, но спецификация HTML4 НЕ говорит, что каждый элемент может иметь не более одного идентификатора. Если вы посмотрите на спецификации HTML5 , вы даже обнаружите, что This specification doesn't preclude an element having multiple IDs, if other mechanisms (e.g. DOM Core methods) can set an element's ID in a way that doesn't conflict with the id attribute.(что соответствует спецификациям CSS)
user123444555621

1
у вас может быть только один атрибут id, а формат содержимого атрибута id исключает наличие пробелов. В контексте вопроса - давая идентификаторы HTML-элемента 2-го элемента - это невозможно сделать ни в HTML 4, ни в HTML 5. Вы предполагаете, что присвоения ему идентификатора, который работает с CSS, достаточно для что он пытается сделать, и может случиться так, что с xmlid будет работать, но я не понимаю, как вы можете это исключить, как написано. Показанный им пример не будет работать ни в HTML 4, ни в HTML 5, и нет способа заставить его работать, чтобы выполнить то, что показано.
tvanfosson

6
Я проголосовал за этот ответ, так как он отвечает на вопрос: « Вы можете назначить несколько идентификаторов элементу?» Однако я должен добавить, что это выходит за рамки простых спецификаций; как показано в принятом ответе, когда речь идет о самом HTML / XHTML, спецификация говорит, что вы можете назначить идентификатор только с помощью idатрибута. Для пояснения, xml:idатрибут (и фактически любой атрибут вне пространства имен по умолчанию) недопустим в XHTML. Однако, как вы цитируете из спецификации HTML5, это никоим образом не приводит xml:id="bar"к молчаливому сбою; он все равно добавит barидентификатор к этому элементу, что позволит ему соответствовать #bar.
BoltClock

28

Мое понимание всегда было:

  • Идентификаторы одноразовые и применяются только к одному элементу ...

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

    • Следовательно, они могут применяться к более чем одному элементу , и аналогично, но все же могут отличаться, может быть более одного класса (т.е. нескольких классов) на элемент .

18
Я не думаю, что это может быть ответом на вопрос. Вопрос в следующем: «Можно ли использовать несколько идентификаторов для одного элемента?»
Кевин

4
@kevin Этот ответ предполагает, что OP сталкивается с проблемой XY и определенно может помочь кому-то, кто пытается по какой-либо причине добиться поведения класса с помощью идентификаторов.
Махди

Вы ссылаетесь на «одноразовое использование», но это может вызвать путаницу. Вы можете и часто и правильно использовать несколько раз один элемент по его идентификатору. Я думаю, что вы обращаетесь к другой интерпретации: вы должны использовать один (и только один) идентификатор для элемента и ТОЛЬКО для этого элемента.
Mbotet

27

Нет. Хотя определение из w3c для HTML 4 явно не охватывает ваш вопрос, определение атрибута name и id говорит, что в идентификаторе нет пробелов:

Токены ID и NAME должны начинаться с буквы ([A-Za-z]) и могут сопровождаться любым количеством букв, цифр ([0-9]), дефисов ("-"), подчеркиваний ("_") , двоеточия (":") и точки (".").


20

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

<div id='enclosing_id_123'><span id='enclosed_id_123'></span></div>

а затем используйте навигацию, чтобы получить то, что вы действительно хотите.

Если вы просто хотите применить стили, лучше использовать имена классов.


Это сломало бы проверку все же.
Aupajo

3
Что незаконного в этом ответе? Может кто-нибудь объяснить голосование против?
tpower

19
Не я. :-) И я не уверен, что ты имеешь в виду о нарушении проверки? Идентификаторы div и span различаются (включая и заключенные), поэтому с дублирующимися идентификаторами проблем не возникает. Может быть, некоторые люди не очень внимательно читают.
tvanfosson

4
Ограбление банка незаконно, проблема программного обеспечения никогда не бывает незаконной. Это снова проблема старой виртуальной реальности и реальной реальности :-P
TrojanName

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

18

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

<div id="foo" class="bar baz bax">

совершенно законно.


4

Нет, вы не можете иметь несколько идентификаторов для одного тега, но я видел тег с nameатрибутом и idатрибутом, которые некоторые приложения обрабатывают одинаково.


1
в IE, до IE8, да. но они исправили эту ошибку в стандартном режиме сейчас. getElementById () используется для некорректного возврата нечувствительного к регистру соответствия элементов по имени и идентификатору.
Scunliffe

4

Нет, вы должны использовать вложенные DIV, если хотите идти по этому пути. Кроме того, даже если бы вы могли представить, какую путаницу это может вызвать при запуске document.getElementByID (). Какой идентификатор он собирается захватить, если их несколько?

По слегка связанной теме вы можете добавить несколько классов в DIV. Смотрите обсуждение Эрика Майерса на

http://meyerweb.com/eric/articles/webrev/199802a.html


1
Разве он не получит идентификатор, который вы укажете в скобках? getElementById();ничего не делает без строки, указывающей, что получить ?! getElementById('foo');получит элемент с идентификатором foo! Несколько идентификаторов не имеет значения здесь. Было бы все равно искать "фу".
Рин и Лен

3
Any ID assigned to a div element is unique.
However, you can assign multiple IDs "under", and not "to" a div element.
In that case, you have to represent those IDs as <span></span> IDs.

Say, you want two links in the same HTML page to point to the same div element in  the page.

The two different links
<p><a href="#exponentialEquationsCalculator">Exponential Equations</a></p>         

<p><a href="#logarithmicExpressionsCalculator"><Logarithmic Expressions</a></p>

Point to the same section of the page. 
<!-- Exponential / Logarithmic Equations Calculator -->
<div class="w3-container w3-card white w3-margin-bottom">      
   <span id="exponentialEquationsCalculator"></span>
   <span id="logarithmicEquationsCalculator"></span>
</div>

2

http://www.w3.org/TR/REC-html40/struct/global.html#h-7.5.2

Атрибут id назначает элемент уникальному идентификатору (который может быть проверен синтаксическим анализатором SGML).

и

Токены ID и NAME должны начинаться с буквы ([A-Za-z]) и могут сопровождаться любым количеством букв, цифр ([0-9]), дефисов ("-"), подчеркиваний ("_") , двоеточия (":") и точки (".").

Таким образом, «id» должен быть уникальным и не может содержать пробел.


1

С технической точки зрения я бы хотел сказать «да», поскольку в действительности то, что отображается, всегда зависит от браузера. Большинство браузеров стараются придерживаться спецификаций как можно лучше, и, насколько я знаю, в спецификациях CSS нет ничего против этого. Я только собираюсь поручиться за фактический HTML, CSS, Javascript код, который отправляется в браузер, прежде чем любой другой интерпретатор вступает в.

Однако я также говорю нет, так как каждый браузер, на котором я обычно тестирую, на самом деле не позволяет вам. Если вам нужно убедиться в этом, сохраните следующее в виде файла .html и откройте его в основных браузерах. Во всех браузерах, которые я тестировал на javascript, функция не будет соответствовать элементу. Тем не менее, удалите "hunkojunk" из тега id, и все работает нормально. Образец кода

<html>
<head>
</head>
<body>
    <p id="hunkojunk1 hunkojunk2"></p>

<script type="text/javascript">
    document.getElementById('hunkojunk2').innerHTML = "JUNK JUNK JUNK JUNK JUNK JUNK";
</script>
</body>
</html>

1

Нет.

Сказав это, ничто не помешает вам сделать это. Но вы получите противоречивое поведение с различными браузерами. Не делай этого. 1 идентификатор на элемент.

Если вы хотите несколько назначений для элемента, используйте классы (разделенные пробелом).


0

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


1
Мне бы также хотелось использовать 2 идентификатора для обратной совместимости. например, что-то, что раньше было статьей-8 в предыдущей версии, но теперь называется узлом-8, имеющим 2 идентификатора одного элемента, будет препятствовать кодированию обходного пути, чтобы сделать его обратно совместимым. Хотя оба идентификатора остаются уникальными идентификаторами.
FLY

0

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

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

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


1
Но, если вы прочитаете ответ tvanfosson, два идентификатора будут четко различаться: "enclosing_id_123"! = "Enclosed_id_123"
Бен,

0

классы специально созданы для этого, вот код, из которого вы можете понять

<html>
<head>
    <style type="text/css">
     .personal{
            height:100px;
            width: 100px;   

        }
    .fam{
            border: 2px solid #ccc;
        }   
    .x{
            background-color:#ccc;
        }   

    </style>
</head>
<body>

    <div class="personal fam x"></div>

</body> 
</html>


-1

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

проверьте https://www.w3schools.com/html/html_id.asp для получения более подробной информации.


-4

Я не думаю, что вы можете иметь два идентификатора, но это должно быть возможно. Использование одного и того же идентификатора дважды - это другой случай ... как два человека, использующие один и тот же паспорт. Однако у одного человека может быть несколько паспортов ... Я искал это, поскольку у меня есть ситуация, когда у одного сотрудника может быть несколько функций. Скажем, «sysadm» и «координатор команды», имеющие id = «sysadm teamcoordinator», позволили бы мне ссылаться на них с других страниц, так что employee.html # sysadm и employee.html # teamcoordinator приводили к одному и тому же месту ... Однажды кто-то иначе может взять на себя функцию координатора команды, в то время как sysadm остается sysadm ... тогда мне нужно только изменить идентификаторы на странице employee.html ... но, как я уже сказал - это не работает :(

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.