blocks|key|782617|text|避免使用自定义属性的最简单方法是使用现有属性。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|782618|使用有意义的相关类名。|782619|例如，执行如下操作：type='book'和type='cd'，以表示书籍和cds。类可以更好地表示什么是什么。|offset|length|style|CODE|782620|例如class='book'|782621|我过去使用过自定义属性，但老实说，如果您以语义上有意义的方式使用现有属性，就真的没有必要使用它们。|782622|为了给出一个更具体的例子，让我们假设你有一个网站提供不同类型商店的链接。您可以使用以下内容：|782623|<a+href='wherever.html'+id='bookstore12'+class='book+store'>Molly's+books</a>
<a+href='whereverelse.html'+id='cdstore3'+class='cd+store'>James'+Music</a>|code-block|syntax|javascript|782624|css样式可以使用以下类：|782625|.store+{+}
.cd.store+{+}
.book.store+{+}|782626|在上面的例子中，我们看到两者都是指向商店的链接(相对于站点上的其他无关链接)，其中一个是cd存储，另一个是书店。|782627|entityMap^0|0|0|A|B|M|9|0|2|C|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|13|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|14|8|@$F|15|G|16|H|I]|$F|17|G|18|H|I]]|9|@]|A|$]]|$1|J|3|K|5|6|7|19|8|@$F|1A|G|1B|H|I]]|9|@]|A|$]]|$1|L|3|M|5|6|7|1C|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|1D|8|@]|9|@]|A|$]]|$1|P|3|Q|5|R|7|1E|8|@]|9|@]|A|$S|T]]|$1|U|3|V|5|6|7|1F|8|@]|9|@]|A|$]]|$1|W|3|X|5|R|7|1G|8|@]|9|@]|A|$S|T]]|$1|Y|3|Z|5|6|7|1H|8|@]|9|@]|A|$]]|$1|10|3|-4|5|6|7|1I|8|@]|9|@]|A|$]]]|11|$]]

The easiest way to avoid use of custom attributes is to use existing attributes.

use meaningful, relevant class names. 
For example, do something like: <code>type='book'</code> and <code>type='cd'</code>, 
to represent books and cds. Classes are much better for representing what something IS. 

e.g. <code>class='book'</code>

I have used custom attributes in the past, but honestly, there really isn't a need to for them if you make use of existing attributes in a semantically meaningful way.

To give a more concrete example, let's say you have a site giving links to different kinds of stores. You could use the following:

<pre><code>&lt;a href='wherever.html' id='bookstore12' class='book store'&gt;Molly's books&lt;/a&gt;
&lt;a href='whereverelse.html' id='cdstore3' class='cd store'&gt;James' Music&lt;/a&gt;
</code></pre>

css styling could use classes like:

<pre><code>.store { }
.cd.store { }
.book.store { }
</code></pre>

In the above example we see that both are links to stores (as opposed to the other unrelated links on the site) and one is a cd store, and the other is a book store.

blocks|key|2306889|text|在我看来，自定义属性不应该被使用，因为它们不验证。除此之外，您可以为单个元素定义许多类，如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2306890|<div+class='class1+class2+class3'>
++++Lorem+ipsum
</div>|code-block|syntax|javascript|2306891|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Custom attributes, in my humble opinion, should not be used as they do not validate. Alternative to that, you can define many classes for a single element like:

<pre><code>&lt;div class='class1 class2 class3'&gt;
 Lorem ipsum
&lt;/div&gt;
</code></pre>

blocks|key|2306922|text|将数据嵌入到dom中，并使用元数据进行jQuery。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2306923|所有好的插件都支持元数据插件(允许每个标签选项)。|2306924|它还允许无限复杂的数据/数据结构，以及键值对。|2306925|<li+class="someclass+{'some':+'random,'json':'data'}+anotherclass">...</li>|code-block|syntax|javascript|2306926|或|2306927|<li+class="someclass"+data="{'some':'random',+'json':+'data'}">...</li>|2306928|2306929|<li+class="someclass"><script+type="data">{"some":"random","json":"data"}</script>+...</li>|2306930|然后获取如下数据：|2306931|var+data+=+$('li.someclass').metadata();
if+(+data.some+&&+data.some+==+'random'+)
alert('It+Worked!');|2306932|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/jquery-orphans/jquery-metadata|1|http://jquery.com/^0|E|3|0|J|6|1|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|17|8|@]|9|@$A|18|B|19|1|1A]|$A|1B|B|1C|1|1D]]|C|$]]|$1|D|3|E|5|6|7|1E|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|1F|8|@]|9|@]|C|$]]|$1|H|3|I|5|J|7|1G|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|6|7|1H|8|@]|9|@]|C|$]]|$1|O|3|P|5|J|7|1I|8|@]|9|@]|C|$K|L]]|$1|Q|3|N|5|6|7|1J|8|@]|9|@]|C|$]]|$1|R|3|S|5|J|7|1K|8|@]|9|@]|C|$K|L]]|$1|T|3|U|5|6|7|1L|8|@]|9|@]|C|$]]|$1|V|3|W|5|J|7|1M|8|@]|9|@]|C|$K|L]]|$1|X|3|-4|5|6|7|1N|8|@]|9|@]|C|$]]]|Y|$Z|$5|10|11|12|C|$13|14]]|15|$5|10|11|12|C|$13|16]]]]

Embed the data in the dom and use <a href="https://github.com/jquery-orphans/jquery-metadata" rel="nofollow noreferrer">metadata</a> for <a href="http://jquery.com/" rel="nofollow noreferrer">jQuery</a>.

All the good plug-ins support the metadata plugin(allowing per tag options).

It also allows infinitely complex data/data structures, as well as key-value pairs.

<pre><code>&lt;li class="someclass {'some': 'random,'json':'data'} anotherclass"&gt;...&lt;/li&gt;
</code></pre>

OR

<pre><code>&lt;li class="someclass" data="{'some':'random', 'json': 'data'}"&gt;...&lt;/li&gt;
</code></pre>

OR

<pre><code>&lt;li class="someclass"&gt;&lt;script type="data"&gt;{"some":"random","json":"data"}&lt;/script&gt; ...&lt;/li&gt;
</code></pre>

Then get the data like so:

<pre class="lang-js prettyprint-override"><code>var data = $('li.someclass').metadata();
if ( data.some &amp;&amp; data.some == 'random' )
alert('It Worked!');
</code></pre>

blocks|key|2306955|text|我认为在不破坏任何东西或扩展您的命名空间的情况下使用现有的XHTML特性没有问题。让我们来看看一个小例子：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2306956|<div+id="some_content">
+Hi!
</div>|code-block|syntax|javascript|2306957|如何在没有附加属性的情况下向some_content添加附加信息？添加另一个标签怎么样，如下所示？|2306958|<div+id="some_content">
+<div+id="some_content_extended"+class="hidden">Some+alternative+content.</div>
+Hi!
</div>|2306959|它通过您选择的定义良好的id/扩展"_extended“以及它在层次结构中的位置来保持关系。我经常与jQuery一起使用这种方法，而不实际使用类似于Ajax的技术。|2306960|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

I see no problem in using existing XHTML features without breaking anything or extending your namespace. Let's take a look at a small example:

<pre><code>&lt;div id="some_content"&gt;
 &lt;p&gt;Hi!&lt;/p&gt;
&lt;/div&gt;
</code></pre>

How to add additional information to some_content without additional attributes? What about adding another tag like the following?

<pre><code>&lt;div id="some_content"&gt;
 &lt;div id="some_content_extended" class="hidden"&gt;&lt;p&gt;Some alternative content.&lt;/p&gt;&lt;/div&gt;
 &lt;p&gt;Hi!&lt;/p&gt;
&lt;/div&gt;
</code></pre>

It keeps the relation via a well defined id/extension "_extended" of your choice and by its position in the hierarchy. I often use this approach together with jQuery and without actually using Ajax like techniques.

blocks|key|922909|text|不是。试着做这样的事情：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|922910|<div+id="foo"/>

<script+type="text/javascript">
++document.getElementById('foo').myProperty+=+'W00+H00!+I+can+add+JS+properties+to+DOM+nodes+without+using+custom+attributes!';
</script>|code-block|syntax|javascript|922911|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Nay. Try something like this instead:

<pre><code>&lt;div id="foo"/&gt;

&lt;script type="text/javascript"&gt;
 document.getElementById('foo').myProperty = 'W00 H00! I can add JS properties to DOM nodes without using custom attributes!';
&lt;/script&gt;
</code></pre>

blocks|key|2307009|text|我不使用自定义属性，因为我输出XHTML，因为我希望数据能够被第三方软件机器读取(尽管，如果我愿意的话，我可以扩展XHTML模式)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2307010|作为自定义属性的替代，我发现id和类属性(例如，在其他答案中提到的)已经足够了。|2307011|此外，请考虑以下几点：|2307012|如果额外的数据要具有可读性和机器可读性，则需要使用(可见的)+HTML标记和文本来进行编码，而不是作为自定义属性。|unordered-list-item|2307013|如果它不需要是人类可读的，那么它也许可以使用不可见的HTML标记和文本进行编码。|2307014|有些人做了一个例外:他们允许自定义属性，在运行时由Javascript添加到客户端。他们认为这是可以的:因为定制属性只在运行时添加到DOM中，所以HTML不包含自定义属性。|2307015|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Q|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|R|8|@]|9|@]|A|$]]|$1|I|3|J|5|H|7|S|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|T|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|N|$]]

I'm not doing using custom attributes, because I'm outputing XHTML, because I want the data to be machine-readable by 3rd-party software (although, I could extend the XHTML schema if I wanted to).

As an alternative to custom attributes, mostly I'm finding the id and class attributes (e.g. as mentioned in other answers) sufficient.

Also, consider this:

<ul>
<li>If the extra data is to be human-readable as well as machine-readable, then it needs to be encoded using (visible) HTML tags and text instead of as custom attributes.</li>
<li>If it doesn't need to be human readable, then perhaps it can be encoded using invisible HTML tags and text.</li>
</ul>

Some people make an exception: they allow custom attributes, added to the DOM by Javascript on the client side at run-time. They reckon this is OK: because the custom attributes are only added to the DOM at run-time, the HTML contains no custom attributes.

blocks|key|782766|text|HTML5显式地允许以data开头的自定义属性。因此，例如，<p+data-date-changed="Jan+24+5:23+p.m.">Hello是有效的。由于它得到了标准的正式支持，我认为这是定制属性的最佳选择。而且它也不要求你用黑客过载其他属性，这样你的HTML就可以保持语义。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|782767|来源：-attributes|782768|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes^0|B|4|U|1D|0|3|B|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]|$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@]|D|@$9|V|A|W|1|X]]|E|$]]|$1|H|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]]]

HTML 5 explicitly allows custom attributes that begin with <code>data</code>. So, for example, <code>&lt;p data-date-changed="Jan 24 5:23 p.m."&gt;Hello&lt;/p&gt;</code> is valid. Since it's officially supported by a standard, I think this is the best option for custom attributes. And it doesn't require you to overload other attributes with hacks, so your HTML can stay semantic.

Source: <a href="http://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes" rel="noreferrer">http://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes</a>

blocks|key|782816|text|规范:创建一个ASP.NET+TextBox控件，根据属性"DecimalSeparator“和"ThousandsSeparator"，使用JavaScript动态自动格式化文本为数字。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|782817|将这些属性从控件传递到JavaScript的一种方法是让控件呈现自定义属性：|782818|<input+type="text"+id=""+decimalseparator="."+thousandsseparator=","+/>|code-block|syntax|javascript|782819|JavaScript很容易访问自定义属性。虽然使用具有自定义属性的元素的页面不会验证，但该页面的呈现不会受到影响。|offset|length|782820|当我想将字符串和整数等简单类型与元素关联起来以便与JavaScript一起使用时，只有才使用这种方法。如果我想让HTML元素更容易识别，我将使用类和id属性。|style|BOLD|782821|entityMap|0|LINK|mutability|MUTABLE|url|http://validator.w3.org/^0|0|0|0|14|2|0|0|G|R|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@$K|12|L|13|1|14]]|A|$]]|$1|M|3|N|5|6|7|15|8|@$K|16|L|17|O|P]]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

Spec: Create an ASP.NET TextBox control which dynamically auto-formats its text as a number, according to properties "DecimalSeparator" and "ThousandsSeparator", using JavaScript.
 
One way to transfer these properties from the control to JavaScript is to have the control render out custom properties:

<pre><code>&lt;input type="text" id="" decimalseparator="." thousandsseparator="," /&gt;
</code></pre>

Custom properties are easily accessible by JavaScript. And whilst a page using elements with custom properties won't <a href="http://validator.w3.org/" rel="nofollow noreferrer">validate</a>, the rendering of that page won't be affected.
 
I only use this approach when I want to associate simple types like strings and integers to HTML elements for use with JavaScript. If I want to make HTML elements easier to identify, I'll make use of the class and id properties.

blocks|key|782836|text|下面是我最近使用的一种技巧：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|782837|<div+id="someelement">

++++

++++<div>...+other+regular+content...</div>
</div>|code-block|syntax|javascript|782838|注释对象与父元素(即#AHO某某元素)联系在一起。|782839|下面是解析器：http://pastie.org/511358|offset|length|782840|要获取任何特定元素的数据，只需调用parseData，并作为唯一参数传递对该元素的引用：|style|BOLD|CODE|782841|var+myElem+=+document.getElementById('someelement');

var+data+=+parseData(+myElem+);

data.someRandomData.a;+//+<=+Access+the+object+staight+away|782842|它可以比这更简洁：|782843|<li+id="foo">
++++
++++...+content+...
</li>|782844|进入该系统：|782845|parseData(+document.getElementById('foo')+).specialID;+//+<=+245|782846|使用它的唯一缺点是它不能与自结束元素(例如<img/>)一起使用，因为注释必须在要被视为该元素的数据的元素中。|782847|编辑|782848|这种技术的显著好处是：|782849|易于实现|unordered-list-item|782850|不会使HTML/XHTML失效|782851|易于使用/理解(基本JSON符号)|782852|不显眼，语义上比大多数选择都要干净|782853|下面是解析器代码(从上面的http://pastie.org/511358超链接复制，以防它在pastie.org上变得不可用)：|782854|var+parseData+=+(function(){

++++var+getAllComments+=+function(context)+{

++++++++++++var+ret+=+[],
++++++++++++++++node+=+context.firstChild;

++++++++++++if+(!node)+{+return+ret;+}

++++++++++++do+{
++++++++++++++++if+(node.nodeType+===+8)+{
++++++++++++++++++++ret[ret.length]+=+node;
++++++++++++++++}
++++++++++++++++if+(node.nodeType+===+1)+{
++++++++++++++++++++ret+=+ret.concat(+getAllComments(node)+);
++++++++++++++++}
++++++++++++}+while(+node+=+node.nextSibling+);

++++++++++++return+ret;

++++++++},
++++++++cache+=+[0],
++++++++expando+=+'data'+%2B+%2Bnew+Date(),
++++++++data+=+function(node)+{

++++++++++++var+cacheIndex+=+node[expando],
++++++++++++++++nextCacheIndex+=+cache.length;

++++++++++++if(!cacheIndex)+{
++++++++++++++++cacheIndex+=+node[expando]+=+nextCacheIndex;
++++++++++++++++cache[cacheIndex]+=+{};
++++++++++++}

++++++++++++return+cache[cacheIndex];

++++++++};

++++return+function(context)+{

++++++++context+=+context+%7C%7C+document.documentElement;

++++++++if+(+data(context)+&&+data(context).commentJSON+)+{
++++++++++++return+data(context).commentJSON;
++++++++}

++++++++var+comments+=+getAllComments(context),
++++++++++++len+=+comments.length,
++++++++++++comment,+cData;

++++++++while+(len--)+{
++++++++++++comment+=+comments[len];
++++++++++++cData+=+comment.data.replace(/\n%7C\r\n/g,+'');
++++++++++++if+(+/%5E\s*?\{.%2B\}\s*?$/.test(cData)+)+{
++++++++++++++++try+{
++++++++++++++++++++data(comment.parentNode).commentJSON+=
++++++++++++++++++++++++(new+Function('return+'+%2B+cData+%2B+';'))();
++++++++++++++++}+catch(e)+{}
++++++++++++}
++++++++}

++++++++return+data(context).commentJSON+%7C%7C+true;

++++};

})();|782855|entityMap|0|LINK|mutability|MUTABLE|url|http://pastie.org/511358|1^0|0|0|0|7|O|0|0|H|9|H|9|0|0|0|0|0|0|L|6|0|0|2|0|0|0|0|0|0|D|O|1|0|0^^$0|@$1|2|3|4|5|6|7|1T|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|1U|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|1V|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|1W|8|@]|9|@$K|1X|L|1Y|1|1Z]]|A|$]]|$1|M|3|N|5|6|7|20|8|@$K|21|L|22|O|P]|$K|23|L|24|O|Q]]|9|@]|A|$]]|$1|R|3|S|5|D|7|25|8|@]|9|@]|A|$E|F]]|$1|T|3|U|5|6|7|26|8|@]|9|@]|A|$]]|$1|V|3|W|5|D|7|27|8|@]|9|@]|A|$E|F]]|$1|X|3|Y|5|6|7|28|8|@]|9|@]|A|$]]|$1|Z|3|10|5|D|7|29|8|@]|9|@]|A|$E|F]]|$1|11|3|12|5|6|7|2A|8|@$K|2B|L|2C|O|Q]]|9|@]|A|$]]|$1|13|3|14|5|6|7|2D|8|@$K|2E|L|2F|O|P]]|9|@]|A|$]]|$1|15|3|16|5|6|7|2G|8|@]|9|@]|A|$]]|$1|17|3|18|5|19|7|2H|8|@]|9|@]|A|$]]|$1|1A|3|1B|5|19|7|2I|8|@]|9|@]|A|$]]|$1|1C|3|1D|5|19|7|2J|8|@]|9|@]|A|$]]|$1|1E|3|1F|5|19|7|2K|8|@]|9|@]|A|$]]|$1|1G|3|1H|5|6|7|2L|8|@]|9|@$K|2M|L|2N|1|2O]]|A|$]]|$1|1I|3|1J|5|D|7|2P|8|@]|9|@]|A|$E|F]]|$1|1K|3|-4|5|6|7|2Q|8|@]|9|@]|A|$]]]|1L|$1M|$5|1N|1O|1P|A|$1Q|1R]]|1S|$5|1N|1O|1P|A|$1Q|1R]]]]

Here's a technique I've been using recently:

<pre><code>&lt;div id="someelement"&gt;

 &lt;!-- {
 someRandomData: {a:1,b:2},
 someString: "Foo"
 } --&gt;

 &lt;div&gt;... other regular content...&lt;/div&gt;
&lt;/div&gt;
</code></pre>

The comment-object ties to the parent element (i.e. #someelement).

Here's the parser: <a href="http://pastie.org/511358" rel="noreferrer">http://pastie.org/511358</a>

To get the data for any particular element simply call <code>parseData</code> with a reference to that element passed as the only argument:

<pre><code>var myElem = document.getElementById('someelement');

var data = parseData( myElem );

data.someRandomData.a; // &lt;= Access the object staight away
</code></pre>

<hr>

It can be more succinct than that:

<pre><code>&lt;li id="foo"&gt;
 &lt;!--{specialID:245}--&gt;
 ... content ...
&lt;/li&gt;
</code></pre>

Access it:

<pre><code>parseData( document.getElementById('foo') ).specialID; // &lt;= 245
</code></pre>

<hr>

The only disadvantage of using this is that it cannot be used with self-closing elements (e.g. <code>&lt;img/&gt;</code>), since the comments must be within the element to be considered as that element's data. 

<hr>

EDIT:

Notable benefits of this technique:

<ul>
<li>Easy to implement</li>
<li>Does not invalidate HTML/XHTML</li>
<li>Easy to use/understand (basic JSON notation)</li>
<li>Unobtrusive and semantically cleaner than most alternatives</li>
</ul>

<hr>

Here's the parser code (copied from the <a href="http://pastie.org/511358" rel="noreferrer">http://pastie.org/511358</a> hyperlink above, in case it ever becomes unavailable on pastie.org):

<pre class="lang-js prettyprint-override"><code>var parseData = (function(){

 var getAllComments = function(context) {

 var ret = [],
 node = context.firstChild;

 if (!node) { return ret; }

 do {
 if (node.nodeType === 8) {
 ret[ret.length] = node;
 }
 if (node.nodeType === 1) {
 ret = ret.concat( getAllComments(node) );
 }
 } while( node = node.nextSibling );

 return ret;

 },
 cache = [0],
 expando = 'data' + +new Date(),
 data = function(node) {

 var cacheIndex = node[expando],
 nextCacheIndex = cache.length;

 if(!cacheIndex) {
 cacheIndex = node[expando] = nextCacheIndex;
 cache[cacheIndex] = {};
 }

 return cache[cacheIndex];

 };

 return function(context) {

 context = context || document.documentElement;

 if ( data(context) &amp;&amp; data(context).commentJSON ) {
 return data(context).commentJSON;
 }

 var comments = getAllComments(context),
 len = comments.length,
 comment, cData;

 while (len--) {
 comment = comments[len];
 cData = comment.data.replace(/\n|\r\n/g, '');
 if ( /^\s*?\{.+\}\s*?$/.test(cData) ) {
 try {
 data(comment.parentNode).commentJSON =
 (new Function('return ' + cData + ';'))();
 } catch(e) {}
 }
 }

 return data(context).commentJSON || true;

 };

})();
</code></pre>

blocks|key|2307128|text|对于复杂的web应用程序，我把定制属性放在各处。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2307129|对于更多面向公共的页面，我使用"rel“属性并将所有数据转储到JSON中，然后用MooTools或jQuery对其进行解码：|2307130|<a+rel="{color:red,+awesome:true,+food:+tacos}">blah</a>|code-block|syntax|javascript|2307131|我最近试图坚持HTML+5数据属性，只是为了“准备”，但它还没有自然出现。|2307132|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

For complex web apps, I drop custom attributes all over the place.

For more public facing pages I use the "rel" attribute and dump all my data there in JSON and then decode it with MooTools or jQuery: 

<pre><code>&lt;a rel="{color:red, awesome:true, food: tacos}"&gt;blah&lt;/a&gt;
</code></pre>

I'm trying to stick with HTML 5 data attribute lately just to "prepare", but it hasn't come naturally yet.

blocks|key|782883|text|我们制作了一个基于web的编辑器，它可以理解HTML的一个子集--一个非常严格的子集(邮件客户端几乎可以普遍理解)。我们需要在数据库中表达像<td+width="@INSWIDTH_42@">这样的东西，但是我们不能在DOM中这样做，否则编辑器运行的浏览器就会抓狂(或者更有可能被自定义属性吓到)。我们想要拖放，所以把它完全放在DOM中，就像jquery的.data()一样(额外的数据没有被正确地复制)。我们可能还需要额外的数据，以适应在.html()的旅程。最后，我们决定在编辑过程中使用<td+width="1234"+rs-width="@INSWIDTH_42@">，然后当我们发布所有内容时，我们删除width并执行regex搜索和销毁s/rs-width=/width=/g。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|782884|起初，写这其中大部分内容的人是这个问题上的验证者--纳粹，并尽一切努力避免我们的自定义属性，但最终默许了，因为其他东西似乎对我们所有的需求都没有用。当他意识到自定义属性永远不会出现在电子邮件中时，这起到了帮助，我们确实考虑过在class中编码我们的额外数据，但是决定这将是两种罪恶中更大的一种。|782885|就我个人而言，我更喜欢把东西清理干净并通过验证器等，但作为一名公司员工，我必须记住，我的首要责任是推进公司的事业(尽可能快地赚钱)，而不是我对技术纯度的自我追求。工具应该对我们起作用，而不是对我们起作用。|782886|entityMap^0|1Y|Q|4Y|7|64|7|6U|16|8I|5|90|K|0|35|5|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@$9|M|A|N|B|C]|$9|O|A|P|B|C]|$9|Q|A|R|B|C]|$9|S|A|T|B|C]|$9|U|A|V|B|C]|$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|11|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|K|$]]

We've made a web-based editor that understands a subset of HTML - a very strict subset (that understood nearly universally by mail clients). We need to express things like <code>&lt;td width="@INSWIDTH_42@"&gt;</code> in the database, but we can't have that in the DOM, otherwise the browser where the editor runs, freaks out (or is more likely to freak out than it is likely to freak out over custom attributes). We wanted drag-and-drop, so putting it purely in the DOM was out, as was jquery's <code>.data()</code> (the extra data didn't get copied properly). We probably also needed the extra data to come along for the ride in <code>.html()</code>. In the end we settled on using <code>&lt;td width="1234" rs-width="@INSWIDTH_42@"&gt;</code> during the editing process, and then when we POST it all, we remove <code>width</code> and do a regex search-and-destroy <code>s/rs-width=/width=/g</code>.

At first the guy writing most of this was the validation-nazi on this issue and tried everything to avoid our custom attribute, but in the end acquiesced when nothing else seemed to work for ALL our requirements. It helped when he realized that the custom attribute would never appear in an email We did consider encoding our extra data in <code>class</code>, but decided that would be the greater of two evils.

Personally, I prefer to have things clean and passing validators etc., but as a company employee I have to remember that my primary responsibility is advancing the company's cause (making as much money as quickly as possible), not that of my egotistical desire for technical purity. Tools should work for us; not us for them.

blocks|key|782904|text|如果为页指定架构，则可以创建任何属性。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|782905|例如：|782906|加注|offset|length|782907|<html+xmlns="http://www.w3.org/1999/xhtml"+xmlns:addthis="http://www.addthis.com/help/api-spec">
...
<a+addthis:title=""+addthis:url=""+...>|code-block|syntax|javascript|782908|Facebook+(偶数标签)|782909|<html+xmlns:og="http://opengraphprotocol.org/schema/"+xmlns:fb="http://www.facebook.com/2008/fbml">
...
<fb:like+href="http://developers.facebook.com/"+width="450"+height="80"/>|782910|entityMap|0|LINK|mutability|MUTABLE|url|http://www.addthis.com/help/api-spec|1|http://developers.facebook.com/docs/opengraph^0|0|0|0|2|0|0|0|0|8|1|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|12|8|@]|9|@$F|13|G|14|1|15]]|A|$]]|$1|H|3|I|5|J|7|16|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|17|8|@]|9|@$F|18|G|19|1|1A]]|A|$]]|$1|O|3|P|5|J|7|1B|8|@]|9|@]|A|$K|L]]|$1|Q|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]|Y|$5|T|U|V|A|$W|Z]]]]

You can create any attribute if you specify a schema for your page.

For example:

<a href="http://www.addthis.com/help/api-spec" rel="noreferrer">Addthis</a>

<pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml" xmlns:addthis="http://www.addthis.com/help/api-spec"&gt;
...
&lt;a addthis:title="" addthis:url="" ...&gt;
</code></pre>

<a href="http://developers.facebook.com/docs/opengraph" rel="noreferrer">Facebook</a> (even tags)

<pre><code>&lt;html xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"&gt;
...
&lt;fb:like href="http://developers.facebook.com/" width="450" height="80"/&gt;
</code></pre>

blocks|key|2307224|text|我一直使用自定义字段，例如|type|unstyled|depth|inlineStyleRanges|entityRanges|data|entityMap^0^^$0|@$1|2|3|4|5|6|7|C|8|@]|9|@]|A|$]]]|B|$]]

I use custom fields all the time for example &lt;a i="" .... Then reference to i with jquery. Invalid html , yes. It works well, yes.

blocks|key|782920|text|我知道有人反对，但我想出了一个超短的解决方案。如果您想使用像“我的”这样的自定义属性，例如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|782921|<a+href="test.html"+mine-one="great"+mine-two="awesome">Test</a>|code-block|syntax|javascript|782922|然后，您可以像jquery.data()一样运行这段代码来获取一个对象。|782923|var+custom_props+=+{}+;
$.each($(".selector")[0].attributes,+function(i,x)+{
++++if+(this.specified+&&+x.name.indexOf("mine-")+!==+-1)+
++++++++self.new_settings[x.name.replace("modal-","")]+=+x.value;
});|782924|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

I know people are against it, but I came up with a super short solution for this. If you want to use a custom attribute like "mine" so for example:

<pre><code>&lt;a href="test.html" mine-one="great" mine-two="awesome"&gt;Test&lt;/a&gt;
</code></pre>

Then you can run this code to get an object back just like jquery.data() does.

<pre><code>var custom_props = {} ;
$.each($(".selector")[0].attributes, function(i,x) {
 if (this.specified &amp;&amp; x.name.indexOf("mine-") !== -1) 
 self.new_settings[x.name.replace("modal-","")] = x.value;
});
</code></pre>

blocks|key|922553|text|与那些说自定义属性无法验证的答案相反：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|922554|自定义属性将验证.|offset|length|style|BOLD|922555|因此，自定义标签，只要自定义标签是小写和连字符。|922556|在任何验证器中尝试这个。它会验证的。|922557|<!DOCTYPE+html>
<html+lang="en">
++++<head>
++++++++<meta+charset="utf-8">
++++++++<title>Custom+Test</title>
++++</head>
++++<body>
++++++++<dog-cat+PIANO="yellow">test</dog-cat>
++++</body>
</html>|code-block|syntax|javascript|922558|一些验证器：|922559|https://appdevtools.com/html-validator|922560|https://www.freeformatter.com/html-validator.html|922561|https://validator.w3.org/nu/|922562|问题是:它安全吗？它以后会坏吗？|922563|自定义标记|922564|没有连字符标记存在。我相信W3C永远不会使用连字符的标签。如果他们这样做了，只要你使用一个不寻常的前缀，你就永远不会看到冲突。例如：<johny-mytag>。|CODE|922565|自定义属性|922566|有连字符的HTML属性。但是HTML承诺不会使用以data-开头的属性。因此，data-myattrib是安全的。但是，我相信W3C永远不会引入以johny-开头的任何属性。只要你的前缀是不寻常的，你就不会看到冲突。|922567|entityMap|0|LINK|mutability|MUTABLE|url|1|2|3|https://www.w3schools.com/TAGS/default^0|0|0|9|0|0|0|0|0|0|12|0|0|0|1D|1|0|0|S|2|0|0|G|0|0|5|0|1U|D|7|2|3|0|0|5|0|P|5|13|D|21|6|0^^$0|@$1|2|3|4|5|6|7|1K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1L|8|@$D|1M|E|1N|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|1O|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|1P|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|1Q|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|6|7|1R|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1S|8|@]|9|@$D|1T|E|1U|1|1V]]|A|$]]|$1|U|3|V|5|6|7|1W|8|@]|9|@$D|1X|E|1Y|1|1Z]]|A|$]]|$1|W|3|X|5|6|7|20|8|@]|9|@$D|21|E|22|1|23]]|A|$]]|$1|Y|3|Z|5|6|7|24|8|@$D|25|E|26|F|G]]|9|@]|A|$]]|$1|10|3|11|5|6|7|27|8|@$D|28|E|29|F|G]]|9|@]|A|$]]|$1|12|3|13|5|6|7|2A|8|@$D|2B|E|2C|F|14]]|9|@$D|2D|E|2E|1|2F]]|A|$]]|$1|15|3|16|5|6|7|2G|8|@$D|2H|E|2I|F|G]]|9|@]|A|$]]|$1|17|3|18|5|6|7|2J|8|@$D|2K|E|2L|F|14]|$D|2M|E|2N|F|14]|$D|2O|E|2P|F|14]]|9|@]|A|$]]|$1|19|3|-4|5|6|7|2Q|8|@]|9|@]|A|$]]]|1A|$1B|$5|1C|1D|1E|A|$1F|T]]|1G|$5|1C|1D|1E|A|$1F|V]]|1H|$5|1C|1D|1E|A|$1F|X]]|1I|$5|1C|1D|1E|A|$1F|1J]]]]

Contrary to answers which say custom attributes won't validate:
Custom attributes will validate.
So will custom tags, as long as the custom tags are lowercase and hyphenated.
Try this in any validator. It will validate.
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
 &lt;head&gt;
 &lt;meta charset=&quot;utf-8&quot;&gt;
 &lt;title&gt;Custom Test&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;dog-cat PIANO=&quot;yellow&quot;&gt;test&lt;/dog-cat&gt;
 &lt;/body&gt;
&lt;/html&gt;
</code></pre>
Some validators:
<a href="https://appdevtools.com/html-validator" rel="nofollow noreferrer">https://appdevtools.com/html-validator</a>
<a href="https://www.freeformatter.com/html-validator.html" rel="nofollow noreferrer">https://www.freeformatter.com/html-validator.html</a>
<a href="https://validator.w3.org/nu/" rel="nofollow noreferrer">https://validator.w3.org/nu/</a>
The question is: Is it safe? Will it break later?
Custom Tags
No hyphenated tags <a href="https://www.w3schools.com/TAGS/default" rel="nofollow noreferrer">exist</a>. I believe that W3C will never use a hyphenated tag. And if they did, as long as you use an uncommon prefix, you'll never see a conflict. Eg.<code>&lt;johny-mytag&gt;</code>.
Custom Attributes
There are hyphenated HTML attributes. But the HTML spec promises never to use an attribute starting with <code>data-</code>. So <code>data-myattrib</code> is guaranteed to be safe. However, i believe that W3C will never introduce any attribute that starts with <code>johny-</code>. As long as your prefix is unusual, you'll never see a conflict.

Recently I have been reading more and more about people using custom attributes in their HTML tags, mainly for the purpose of embedding some extra bits of data for use in javascript code.

I was hoping to gather some feedback on whether or not using custom attributes is a good practice, and also what some alternatives are.

It seems like it can really simplify both server side and client side code, but it also isn't W3C compliant. 

Should we be making use of custom HTML attributes in our web apps? Why or why not?

For those who think custom attributes are a good thing: what are some things to keep in mind when using them?

For those who think custom attributes are bad thing: what alternatives do you use to accomplish something similar?

Update: I'm mostly interested in the reasoning behind the various methods, as well as points as to why one method is better than another. I think we can all come up with 4-5 different ways to accomplish the same thing. (hidden elements, inline scripts, extra classes, parsing info from ids, etc). 

Update 2: It seems that the HTML 5 <code>data-</code> attribute feature has a lot of support here (and I tend to agree, it looks like a solid option). So far I haven't seen much in the way of rebuttals for this suggestion. Are there any issues/pitfalls to worry about using this approach? Or is it simply a 'harmless' invalidation of the current W3C specs?

Custom attributes - Yea or nay?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

最近，我看到越来越多的人在HTML标记中使用自定义属性，主要是为了嵌入一些额外的数据，以便在javascript代码中使用。我希望收集一些反馈，了解使用自定义属性是否是一种良好的实践，以及一些替代方法是什么。看起来它确实可以简化服务器端和客户端代码，但它也不符合W3C。我们应该在我们的web应用中使用自定义HTML属性...

问习惯属性-是的还是不是的？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问习惯属性-是的还是不是的？EN