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

【问题标题】：User Definable Attributes on HTML Elements?HTML元素上的用户可定义属性？
【发布时间】：2010-01-08 21:28:07
【问题描述】：

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

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

，我想在元素中存储一些关于它的数据，例如 “这是来自的元素 1 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 以某种方式访问它。

或者，还有其他方法可以实现这一点吗？

谢谢-

【问题讨论】：

标签： javascript html dom

【解决方案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 是否喜欢上述任何一个。）

【讨论】：

+1 用于提及 valid HTML5 数据属性。很好的答案！
哇 - 多么棒的答案，加上 HTML5 提及非常有用。非常感谢！
setUserData 的实施范围有多广？
Dominic，五种主流浏览器中，似乎只有火狐支持。

【解决方案2】：

您不能向 HTML 添加任意元素。好吧，您可以，但它无效，并且行为未定义。对于这种事情，我倾向于使用 jQuery。它有一个data() 调用，可以向元素添加任意数据。我相信它在类属性中对其进行了编码，但实现并不重要。

你可以自己做，但为什么要麻烦呢？输入错误的字符、未正确转义/取消转义数据或无意中破坏信息很容易出错。而是这样做：

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

【讨论】：

【解决方案3】：

由于您可以接受添加 cmets，因此更好的解决方案是添加包含所需内容的 span 元素..

<span class="data">.....</span>

你定义你的数据类有display:none，它是不可见的......

这样你就可以使用普通的 DOM 遍历方法来访问它了..

【讨论】：

【解决方案4】：

您可以使用 setUserData() 和 getUserData() 函数 http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#Node3-setUserData

例如：

<html>
<head>
    <script type="text/javascript">
        function set(){
            var a = document.getElementById("testElement");
            a.setUserData("testData", "Some text", null);
        }

        function get(){
            var a = document.getElementById("testElement");
            alert(a.getUserData("testData"));
        }
    </script>
</head>
<body>
    <span id="testElement"/>
    <form>
        <input type="button" value="setUserData" onclick="set()"/>
        <input type="button" value="getUserData" onclick="get()"/>
    </form>
</body>

【讨论】：

【解决方案5】：

如果你不需要 HTML 是有效的，你可以制作任何你想要的属性，你可以通过调用 getAttribute 方法在 Javascript 中访问它。

【讨论】：

【解决方案6】：

您可以添加一个带有 id 的嵌套不可见元素，并将您的数据作为 innerText。使用 style 属性确保它是不可见的。

但这完全取决于您要达到的目标。你能详细说明一下吗？

【讨论】：

【解决方案7】：

// 如果你想在 html 中包含数据为什么不给它自己的节点呢？

.hiddendata{
 display: none
}

<li id= 'item1'> 
Item 1
<span class= "hiddendata"> This is element 1 from XYZ</span> 
</li> 

function readHiddenData(who){
 var A= [], n= who.firstChild;
 while(n){
  if(n.className= 'hiddendata'){
   A[A.length]= n.textContent || n.innerText || '';
  }
  n= n.nextSibling;
 }
 return A;
}

function showHiddenData(who){
 var n= who.firstChild;
 while(n){
  if(n.className= 'hiddendata'){
   n.style.display= "inline"
  }
  n= n.nextSibling;
 }
}

【讨论】：