Мнение: в HTML, возможные повторяющиеся идентификаторы или нестандартные атрибуты?

Question

Кажется довольно распространенным желание сообщить вашему javascript, что конкретный dom-узел соответствует записи в базе данных. Итак, как ты это делаешь?

Один из наиболее распространенных способов - использовать класс для типа и идентификатор для идентификатора:

<div class="thing" id="5">
<script> myThing = select(".thing#5") </script>

Тем не менее, существует небольшая проблема со стандартами html - если у вас есть более одного типа записей на странице, вы можете в итоге дублировать идентификаторы. Но это не делает ничего плохого, не так ли?

Альтернативой является использование атрибутов данных:

<div data-thing-id="5">
<script> myThing = select("[data-thing-id=5]") </script>

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

Answer 1

Обратите внимание, что идентификатор не может начинаться с цифры, поэтому:

<div class="thing" id="5">

неверный HTML. См. Какие допустимые значения для атрибута id в HTML?

В вашем случае я бы использовал идентификаторы типа thing5 или thing.5.

Answer 2

<div class="thing" id="myapp-thing-5"/>

// Get thing on the page for a particular ID
var myThing = select("#myapp-thing-5");

// Get ID for the first thing on the page
var thing_id = /myapp-thing-(\d+)/.exec ($('.thing')[0].id)[1];

Answer 3

Вы отказываетесь от контроля над DOM

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

var whoKnows = document.getElementById('duplicateId');

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

Браузер попытается пропустить ошибки в вашей разметке, но все становится грязным и более сложным . Лучше всего, чтобы ваша разметка действовала. Вы можете описать тип элемента и его уникальный идентификатор базы данных в className. Вы даже можете использовать множественные имена классов , чтобы различать их. Есть много действительных возможностей :

<div class="friend04"/>
<div class="featuredFriend04" />

или

<div class="friend friend04" />
<div class="featuredFriend friend04" />

или

<div class="friend objectId04" />
<div class="groupMember objectId04" />

или

<div class="friend objectId04" />
<div class="friend objectId04" id="featured" />

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

Вы уже потратите достаточно времени на javascript , убедившись, что у вас есть правильные значения и типы . Размещение дубликатов на странице только усложнит вам задачу. Если вы можете найти способы написания стандартизированной разметки, у нее есть много практических преимуществ .

Answer 4

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

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

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

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

Answer 5

Учитывая тот факт, что вы можете иметь несколько классов на элемент, не могли бы вы создать уникальный идентификатор в качестве дополнительного класса для элемента? Таким образом, может быть несколько элементов с одинаковым «идентификатором» без коллизий атрибутов идентификатора HTML.

<div class="thing myapp-thing-5" />
<div class="thing myapp-thing-668" />
<div class="thing myapp-thing-5" />

Тогда было бы легко найти эти узлы и найти соответствующую им запись в БД с небольшими манипуляциями со строками.

Answer 6

Если вы устанавливаете нестандартные свойства, убедитесь, что вы установили их программно (так как все будет правильно), или попробуйте изменить dtd! -)

Но я бы использовал идентификатор со значащим словом, предшествующим идентификатору DB, а затем использовал бы .getElementById, так как вся необходимая информация под рукой ...

Answer 7

В HTML5 вы можете сделать это так:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            window.addEventListener("DOMContentLoaded", function() {
                var thing5 = document.evaluate('//*[@data-thing="5"]', 
                document, null, XPathResult.FIRST_ORDERED_NODE_TYPE ,null);
                alert(thing5.singleNodeValue.textContent);
            }, false);
        </script>
    </head>
    <body>
        <div data-thing="5">test</div>
    </body>
</html>

Answer 8

Отслеживание ваших данных через DOM мне кажется шатким; помните, что эти идентификаторы являются глобальными переменными, поэтому, если есть шанс, что чей-либо скрипт сможет найти свой путь на вашей странице, он уязвим. Для достижения наилучших результатов загрузите данные в объект внутри анонимной функции и запишите таблицу (или большой вложенный список DIV).

Answer 9

Мне не нравится решение Джона Милликина . На больших наборах данных это будет интенсивно работать.

Оптимизация в его коде могла бы заменить регулярное выражение вызовом substring(), поскольку первые несколько символов свойства id являются постоянными.

Я бы пошел с соответствием class и затем определенным id, хотя.

Answer 10

Нестандартные атрибуты хороши, если вы используете XHTML и не торопитесь расширять DTD, который вы используете, чтобы охватить новые атрибуты. Лично я бы просто использовал более уникальный идентификатор, как предлагали некоторые другие люди.