Question

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

例如，假设我有一个列表项＆lt; li＆gt; ，我想在元素中存储一些关于它的数据，例如 “这是元素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以某种方式访问它。

或者，是否有其他方法可以实现这一目标？

谢谢 -

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"});

Answer 3

由于您可以接受添加注释，因此更好的解决方案是添加包含您想要的内容的span元素。

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

您将数据类定义为display:none并且它是不可见的......

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

Answer 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>

Answer 5

如果您不需要HTML有效，您可以创建所需的任何属性，并且可以通过调用getAttribute方法在Javascript中访问它。

Answer 6

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

但这一切都取决于你想要实现的目标。你能详细说明吗？

Answer 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;
 }
}

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

7 个答案: