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

Question

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

例如，假设我有一个列表项

，我想在元素中存储一些关于它的数据，比如 “This is element 1 from XYZ”。

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

<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 是否喜欢以上任何一项。)