XHTML 1.0 Strict中的自定义数据

Question

我在我的HTML中使用了一些自定义属性，用于jquery操作。我看到在HTML5中有data-XYZ属性，但我需要符合xhtml 1.0 strict标准。我还有哪些选项？

- cambraca

---

+1 对于一个有趣的问题。我很好奇为什么会被踩... - David Thomas

@David Thomas，你和我都一样 :) - cambraca

Answer 1

你可以使用jQuery MetaData插件，该插件允许你在class属性中以JSON格式编写数据。

<li class="someclass {some: 'data'} anotherclass">...</li>

然后在您的jQuery中，要获取数据：

var data = $('li.someclass').metadata();
if ( data.some && data.some == 'data' )
    alert('It Worked!');

这应该符合你的要求，使用xhtml 1.0 strict标准，同时允许你使用即插即用的解决方案 :)

- Jess Telford

---

它按预期工作，但我需要能够通过jQuery选择器在自定义数据上进行选择。例如，我有<div data1="val1">，然后我执行了$('div[data1=val1]')；现在我有<div class="{data1: 'val1'}">，我该如何选择相同的内容？ - cambraca

你可以这样做：<div class="data1 {data: 'val1'}">，然后通过 var myVal = $('div.data1').metadata().data; 进行选择，这将使 myVal = 'val1'。要获得与 $ ('div[data1=val1]') 相同的效果，您必须手动循环遍历所有与 $ ('div.data1') 匹配的元素，这与 jQuery 内部执行的操作相同，因此不应该更慢。 - Jess Telford

根据XHTML模式：https://www.w3.org/TR/xhtml1-schema/#xhtml1-strict，class的值空间定义为<xs:attribute name="class" type="xs:NMTOKENS"/>，但不幸的是，{some:不是有效的NMTOKEN，因此我在使用此解决方案时遇到了问题:( - IgnacioHR

我建议您拒绝这个答案，而采用我下面解释的解决方案，有两个原因：（1）所提出的解决方案不符合XHTML标准，（2）jQuery MetaData插件已不再可用（可能是因为第一点）。谢谢！ - IgnacioHR

Answer 2

我能想到几个选项。

假设您想要用于脚本的特定于站点的自定义属性，一种方法是将脚本嵌入到要添加属性的元素中。例如：

  <span id="myId1"><script type="text/javascript">
      var myId1Span = document.getElementById("myId1");
      myId1Span.myData = {};
      myId1Span.myData.firstname = "John";
      myId1Span.myData.surname = "Smith";
  </script>My Text</span>

---

另一种向元素添加额外数据的方法是将数据嵌入类属性中。

因此，您可以有

<span class="myCssClass http://example.com/hasData 
                data-firstname:John data-surname:Smith">My Text</span>

如果你正在使用数据进行脚本编写，那么你可以添加以下脚本来提取这些数据。你可以在结束的 body 标签之前添加这个脚本。

  <script type="text/javascript">
      //<![CDATA[
      if (! document.getElementsByClassName)
      {
        // From http://lawrence.ecorp.net/inet/samples/js-getelementsbyclassname.shtml
        document.getElementsByClassName = function(class_name)
        {
          var docList = this.all || this.getElementsByTagName('*');
          var matchArray = new Array();

          var re = new RegExp("(?:^|\\s)"+class_name+"(?:\\s|$)");
          for (var i = 0; i < docList.length; i++)
          {
            if (re.test(docList[i].className) )
            {
              matchArray[matchArray.length] = docList[i];
            }
          }
          return matchArray;
        }
      }

      var hasData = document.getElementsByClassName("http://example.com/hasData");
      for (var i = 0 ; i < hasData.length ; i++)
      {
        var myElem = hasData[i];
        myElem.myData = {};
        var dataClassList = myElem.className.split(" ");
        for (var j = 0 ; j < dataClassList.length ; j++)
        {
          var dataCandidate = dataClassList[j];
          if (dataCandidate.substring(0, 5) == "data-")
            if (dataCandidate.indexOf(":") >= 0)
            { 
              var nameValue = dataCandidate.split(":", 2);
              myElem.myData[nameValue[0].substring(5)] = nameValue[1];
            }
        }
      }
      //]]>
  </script>

这应该会导致与第一个选项相同的myData对象被添加到span中。

http://example.com/hasData类只是一个标志，用于指示哪些元素应该被处理。您可以为此目的使用任何字符串。

---

这两种方法都符合XHTML 1.0 Strict标准，无论是作为text/html还是application/xhtml+xml提供服务都可以正常工作。

- Alohci

---

这就是我要找的答案。顺便说一下，我正在使用jQuery，它可以使用$(..).data(x, y)将数据存储在元素中，您知道是否有一种方法可以直接将可被jQuery读取的数据放入html中吗？（也许有一些使用您类解决方案的插件之类的东西..） - cambraca

我不知道是否有这种类型的jQuery插件，但是我并不经常使用jQuery。也许其他人能够提供帮助。 - Alohci

Answer 3

我只是想知道严格的规范是否允许在元素中添加额外的数据。

不行。

（你应该关心吗？可能不需要，但这是你的决定。）

- Ms2ger

Answer 4

这里提供了一个符合XHTML 1.0标准的解决方案。

<li class="someclass someData anotherclass">...</li>

结合

<style>
someData {
  --custom-some: data
}
</style>

或者直接在元素上使用样式属性。

注意1：类属性的语法不允许json元数据。开放的花括号不是有效的NMToken。 注意2：元数据中的属性名称前面加上--custom-，以避免CSS内容本身的验证问题。

- IgnacioHR

Answer 5

就我看来，如果我将其作为text/html提供服务，那么它是否符合XHTML规范并不重要，因为它无论如何都不会是真正的XHTML。在99%的XHTML使用情况下都是如此。

只要您没有关键错误，例如缺少结束标记等，您就不必担心验证器告诉您什么，只要您知道原因即可。 XHTML 1.0规范是多年前编写的。技术发展迅速。如果您限制自己使您的网站在规范编写时“有效”，则永远无法使用新功能。

虽然我的真正建议是切换到HTML 5-据我所知，xhtml语法与HTML 5兼容。可能会有一些小的不一致性，但大部分应该是一个相当简单的过渡。

- meder omuraliev

---

我知道这些。我只是想知道严格的规范是否允许在元素中添加额外的数据的某种方式。 - cambraca

不这么认为，根据https://dev59.com/PnE95IYBdhLWcg3wMrEB的说法——除非你自己创建DTD。 - meder omuraliev

制作自己的DTD会使其不再是XHTML。 - Quentin

我使用最新的技术开发电子商务网站。100%有效，在所有浏览器中都可以运行。HTML是在XHTML之前创建的，因此根据上述声明，我们也不需要过多关注它。我认为这样的谈话早在2001年就过时了。 - Rob

@Rob - 你的CSS文件是否完全有效？你是否使用了CSS3的功能？你是否使用了任何供应商特定的CSS属性？你是否真正使用了“最新”的技术？如果你能提供你的一个电子商务网站链接，那就太好了，这样我可以观察一下。 - meder omuraliev

Answer 6

如果您想要正确的XHTML，您需要使用HTML5文档类型（）。然后您就可以使用data-属性了。

<element data-usage='for an example' data-number='28' />

这是完全有效的XHTML strict（我在我的网站上使用它）。 这样做的目的是为了防止W3C出现一个与您在网站上使用的名称相同的属性并破坏它。

要在JavaScript中获取值，您需要使用elem.getAttribute('data-name');。 W3M规范确实包括使用ele.dataset.name，但目前尚未被广泛支持的浏览器。

- Youarefunny

---

但是HTML5并不是XHTML。HTML5甚至不一定是有效的XML。您指的是哪个版本的XHTML？那怎么可能有效呢？引用w3验证器的话：“没有' data-usage' 属性”（检查为XHTML1.1）。 - Joel Peltonen