HTML元素上的用户可定义属性？

Question

我需要做的是能够存储关于元素的一些数据.

例如,假设我有一个列表项<li>,我想在元素中存储一些关于它的数据,例如"这是来自XYZ的元素1".

我知道如何做到这一点的唯一方法(如果我能避免,我不想这样做)是这样的:

<li id='item1'>
  Item 1
  <!--This is element 1 from XYZ-->
</li>

<script>
  // read it something like this
  var e = document.getElementById('item1').innerHTML; 
  // then parse out the comment, etc.
  // --
</script>

我真正想要的是这样的东西(我相当肯定是不可能的):

// example
<li id='item1' userdata='This is element 1 from XYZ'>Item 1</li>

..当然,我希望能够通过javasscript以某种方式访问​​它.

或者,还有其他方法来实现这一目标吗？

谢谢 -

Answer 1

您可以从JavaScript访问userdata =""属性.做就是了:

var theData = document.getElementById('item1').getAttribute('userdata');

如果你想用HTML5方式做,那么你将使用名为data-*的属性,例如:

<li id='item1' data-foo='This is element 1 from XYZ'>Item 1</li>

这样它仍然有效(即,它会让你感觉更好,因为没有使用无效的属性).新浏览器将支持访问data-*属性,如下所示:

var theData = document.getElementById('item1').data.foo;

但我认为这种做法并不足以依赖.

如果你确实想将数据存储在注释中(虽然我建议改为使用属性路径),你可以这样做:

var e = document.getElementById('item1');
var n = e.firstChild;
while (n && n.nodeType != Node.COMMENT_NODE) {
    n = n.nextSibling;
}
// now n.nodeValue will have the comment contents

(无法保证IE是否喜欢上述任何一项.)

Answer 2

您不能将任意元素添加到HTML.嗯,你可以,但它不会有效,beheaviour是未定义的.对于这种事情,我倾向于使用jQuery.它有一个data()可以向元素添加任意数据的调用.我相信它在class属性中对它进行编码,但实现并不重要.

你可以自己做,但为什么要这么麻烦？通过输入错误的字符,而不是正确地转义/取消数据或无意中破坏信息,很容易出错.而是只做:

$("#item1").data({source: "Thsi is element 1 from XYZ"});