Подтвердить что ты не робот

Наилучшая практика: атрибут class или data как идентификатор

В последнее время мне стало интересно, как лучше всего выполнить javascript-действия для нескольких элементов.

Как я вижу, есть две возможности:

  • Либо я добавляю класс css к моим элементам, который не обязательно соответствует любым существующим правилам css: <div class="validation-required"></div>
  • Или я использую атрибут data так: <div data-validation-required></div>

В моей IDE (Visual Studio 2012 с использованием R #), если я использую первый метод, я получаю предупреждение о том, что я не должен использовать css-классы, которые не определены. Что заставляет меня думать, что это может быть не самая лучшая идея. Тем не менее, это метод, который я чаще всего использовал, хотя это может быть просто реликвией за несколько дней до того, как мы сможем использовать атрибут data.

Итак, мой вопрос довольно прост, и каким образом я должен просто "пометить" элемент для дальнейшей обработки?

Спасибо за любые ответы

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

PPS: я сделал поиск по этому вопросу, но большинство вопросов касательно производительности, что не является моей основной задачей для одноразовых ситуаций.

4b9b3361

Ответ 1

Согласно W3C

data- *

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

class

Атрибут класса имеет несколько ролей в HTML: как селектор таблицы стилей (когда автор хочет присвоить информацию стилей набору элементов). Для обработки общего назначения агентами пользователя.

Если вы используете атрибут class, вы можете использовать собственный getElementsByClassName поиск и classList объект для переключения, добавления и удаления класса. Нет ничего подобного getElementsByAttributeValue, вам нужно итерации. См. комментарий Оливера Морана

С другой стороны, если вам нужно хранить несколько данных, вы можете использовать атрибут dataset.

Итак, если вы хотите выполнить поиск или повлиять на внешний вид элемента, я бы использовал class. Если вам нужно сохранить несколько данных, более подходящим будет data.

Ответ 2

Если вы просто хотите связать "значения" с элементами DOM для вычислительных целей, тогда data-attribute - это путь, так как,

все, что есть "data-", будет рассматриваться как область хранения для частных данные (частные в том смысле, что конечный пользователь не видит это - он не влияют на макет или презентацию)

Кроме того, jQuery предоставляет . data(), что облегчает жизнь, поэтому у вас нет проблем с использованием [data-*] селектор.

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

Джон Ресиг написал о data-attributes

Ответ 3

Лучший способ проверить это - найти набор тестов на jsperf.com

Вот тот, который вас интересует: http://jsperf.com/id-vs-class-vs-data-attribute

Наиболее эффективным селектором является использование классов.

Вероятно, это является следствием того, что классы больше используются для выбора, поэтому браузеры будут оптимизировать это больше?

JsPerf.com results for selection based on ID, Class or attribute

Ответ 4

Если вы решите использовать подход data-*, спецификации для использования пользовательских элементов данных - и пример использования - приведены здесь:

Спецификация W3 по встраиванию пользовательских невидимых данных с атрибутом данных

Вот короткая соответствующая выдержка:

3.2.3.8 Встраивание пользовательских невидимых данных с атрибутами data- * Пользовательский атрибут данных - это атрибут без пространства имен, имя которого начинается со строки "data-", имеет по крайней мере один символ после дефиса, совместим с XML и не содержит символов в диапазоне от U + 0041 до U + 005A. (ПИСЬМО ЛАТИНСКОГО КАПИТАЛА - ПИСЬМО ЛАТИНСКОГО КАПИТАЛА Z).

Все атрибуты элементов HTML в документах HTML автоматически получают строчные буквы ASCII, поэтому ограничение на заглавные буквы ASCII не влияет на такие документы.

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