Как я могу прикрепить "метаданные" к DOM node?

Ответ 1

Если нет необходимости хранить атрибут в разметке, отличным решением является функция jQuery data: http://docs.jquery.com/Core/data.

Ответ 2

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

<div data-myattr1="myvalue1" data-myattr2="myvalue2">Content</div>

Самое приятное в этом решении заключается в том, что он уже работает во всех основных браузерах; все они будут разбирать неизвестные атрибуты и выставлять их в DOM для доступа к JavaScript. HTML5 добавляет несколько удобных механизмов для их доступа, которые еще не реализованы, но вы можете просто использовать стандартный getAttribute для доступа к ним на данный момент. И тот факт, что они разрешены в HTML5, означает, что ваш код будет проверяться, если вы готовы использовать проект стандарта, а не принятый (я не верю, что атрибуты data- являются особенно противоречивыми, однако, поэтому я был бы удивлен, если бы они были удалены со стандарта).

Преимущество, которое имеет в XHTML атрибуты с именами, является IE, не поддерживает XHTML, поэтому вам придется реализовать что-то, что претендует на использование атрибутов пространства имен, но на самом деле просто использует недопустимые атрибуты с : в их имени, что как IE будет анализировать их. Это лучше, чем использование class, потому что множество данных в атрибуте class слишком сильно перегружает его и требует дополнительного анализа, чтобы вытащить разные части данных. И это лучше, чем просто создать свой собственный (который будет работать в текущих браузерах), потому что он четко определил, что эти атрибуты с префиксом data- являются частным фрагментом данных для сценариев, поэтому ваш код будет проверяться в HTML5 и не будет никогда не противоречит будущим стандартам.

Еще одна малоизвестная методика добавления пользовательских данных в HTML, которая действительна даже в HTML 4, добавляет script элементы с атрибутами type чего-то другого, кроме text/javascript (или одного из двух других типов которые могут использоваться для указания JavaScript). Эти блоки script будут игнорироваться браузерами, которые не знают, что с ними, и вы можете получить к ним доступ через DOM и делать то, что вы хотите с ними. HTML5 явно обсуждает это использование, но в старых версиях он ничего не делает, и он работает во всех современных браузерах, насколько мне известно. Например, если вы хотите использовать CSV для определения таблицы данных:

<div>
  <script type="text/csv;header=present">
    id,myattr1,myattr2
    something,1,2
    another,2,4
  </script>
  Content
</div>

Это метод, используемый SVG Web, чтобы разрешить встраивание SVG в HTML, с эмуляцией через Flash, если браузер не поддерживает родной SVG. В настоящее время даже браузеры, поддерживающие SVG (Firefox, Safari, Chrome, Opera), не поддерживают его непосредственно встроенным в HTML, они поддерживают его непосредственно в строке в XHTML (поскольку элементы SVG находятся в другом пространстве имен). SVG Web позволяет размещать SVG inline в HTML, используя тэг script, а затем преобразует эти элементы в соответствующее пространство имен и добавляет их в DOM, поэтому их можно отобразить как XHTML. В браузерах, которые не поддерживают SVG, он также эмулирует функцию элементов с помощью Flash.

Ответ 3

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

var metadataRepository = function(){
    this.elements = [];

    this.set = function(id,key,value){ 
        this.elements[id][key] = value;
    }

    this.get = function(id,key){
        if (typeof(this.elements[id]) == "undefined"){
            return null;
        }
        if (key){
            return (this.elements[id][key] != "undefined") ? this.elements[id][key] : null;
        } else {
            return this.elements[id];   
        }
    }

}

var myMR = new metadataRepository();

myMR.set("myDiv1","attr1",232442);
myMR.set("myDiv2","attr1",{"id":23,"name":"testName"});

...

myMR.get("myDiv1","attr1");  //Returns only attr1
myMR.get("myDiv2");   //Returns all attributes

Ответ 4

Предполагая XHTML, просто введите новое пространство имен для ваших собственных метаданных. Таким образом, вы можете иметь свои атрибуты в своем собственном пространстве имен с произвольными именами, и они не будут конфликтовать с какой-либо проверкой.

В основном все, что вам нужно, это добавить

xmlns:myns="http://www.example.com/URI/to/myNamespaceDeclaration"

в корневой каталог node, а затем вы можете иметь такие узлы, как

<p myns:type="important">I'm a paragraph.</p>

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

Edit:

Также быстрое примечание, атрибут class в настоящее время много используется microformats для целей тегов метаданных. Вы можете взглянуть на ссылку выше, чтобы узнать, уже ли кто-то изобрел колесо, которое вы пытаетесь найти:)

Ответ 5

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

Если вы используете html5, вы можете использовать атрибуты data-foobarbaz.