如何将"元数据"附加到DOM节点？

Question

有时我想将某种元数据附加到HTML节点,我想知道,这是最好的方法.

我可以想象以下内容:

• 非标准属性:( <div myattr1="myvalue1" myattr2="myvalue2" >中断验证)
• 重用现有属性<div class="myattr1-myvalue2-myattr2-myvalue2">(需要解析和某种程度的转义)

两种解决方案都非常难看!

有没有办法更优雅地做到这一点？我已经在使用jQuery,所以任何好的Javascript解决方案,如果有的话,也是值得赞赏的.

Answer 1

HTML5引入了自定义数据属性的概念,任何人都可以创建这些属性,以便将自定义隐藏数据附加到元素以用于脚本编写.只需使用data-前缀(例如data-myattr1或)创建属性data-myattr2,然后将其填入数据中.

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

这个解决方案的好处是它已经适用于所有主流浏览器; 它们都将解析未知属性,并在DOM中公开它们以供JavaScript访问.HTML5为访问它们添加了一些便利机制,但尚未实现,但您现在可以使用该标准getAttribute来访问它们.事实上,他们被允许在HTML5中意味着你的代码将验证,只要你愿意使用草案标准而不是被接受的标准(我不相信这些data-属性特别有争议,所以我如果将它们从标准中删除,会感到惊讶.

它在XHTML中优于命名空间属性的优点是IE不支持XHTML,因此您必须实现假装使用命名空间属性但实际上只使用:其名称中带有a的无效属性,这就是IE将如何解析它们.它比使用更好class,因为将大量数据放入class属性会使它过载很多,并且需要进行额外的解析来提取不同的数据.而且它不仅仅是编造你自己的(它可以在当前浏览器中工作),因为它的定义很明确,这些属性前缀data-是用于编写脚本的私有数据,所以你的代码将在HTML5中验证并且不会与未来的标准.

另一个用于向HTML添加自定义数据的鲜为人知的技术(即使在HTML 4中也是有效的)是添加script具有type除text/javascript(或可用​​于指定JavaScript的其他几种类型之一)之外的属性的元素.这些脚本块将被不知道如何使用它们的浏览器忽略,您可以通过DOM访问它们并使用它们执行您想要的操作.HTML5 明确讨论了这种用法,但没有任何东西可以使它在旧版本中无效,据我所知,它适用于所有现代浏览器.例如,如果您想使用CSV来定义数据表:

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

这是SVG Web使用的技术,允许在HTML中嵌入SVG,如果浏览器不支持本机SVG,则通过Flash进行模拟.目前,即使支持SVG(Firefox,Safari,Chrome,Opera)的浏览器也不支持直接内联在HTML中,它们只支持在XHTML中直接内联(因为SVG元素位于不同的命名空间中).SVG Web允许您使用脚本标记将SVG内联到HTML中,然后将这些元素转换为适当的命名空间并将它们添加到DOM中,以便将它们呈现为XHTML.在不支持SVG的浏览器中,它还使用Flash模拟元素的功能.

Answer 2

如果没有必要将该属性存储在标记中,一个很好的解决方案是jQuery的data功能:http://docs.jquery.com/Core/data.

Answer 3

一种可能与您的要求不完全匹配的可能解决方案是使用类作为"元数据存储库",使用方法根据元素的id获取/设置数据.

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