我不应该在 html 中使用数据属性吗？

Question

我正在编写一个 C# 表单应用程序，允许用户将自定义 html 节点添加到 html 网页。我有一些 javascript 代码选择 html 节点来执行对象的特定代码，例如 jQuery ui 滑块。

要标识 html 个节点，我需要在标识标签的标签中存储一个属性。

我刚开始写 html 代码，因此，我想问一下我是否有任何理由不应该为标签使用数据属性？是否有任何我应该注意的限制和缺点？

这是我目前正在使用的一些示例代码：

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div data-customwebpagelayout-name='slider-increments'>
    <div data-customwebpageobject-name='slider-increments'></div>
</div>

<p data-customwebpageobject-output-name='slider-increments'>1</p>

</body>
</html>

谢谢。

Answer 1

识别和 select HTML 标签的常用方法是使用 class 或 id.

如果页面上只有一个内容，您应该使用 id。看起来你有多个相同的东西要识别，所以我会像这样使用 class：

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div class="customwebpagelayout slider-increments" >
    <div class="customwebpageobject slider-increments"></div>
</div>

<p class="customwebpageobject slider-increments">1</p>

</body>
</html>

然后您可以 select 具有 javascript 的节点，如下所示：

document.getElementsByClassName("slider-increments");

或者如果您决定使用 jQuery:

$(".slider-increments");

数据属性更难处理：

原始 Javascript (code adapted from code in this answer):

var matchingElements = [];
var allElements = document.getElementsByTagName('*');
for (var i = 0, n = allElements.length; i < n; i++){
  if (allElements[i].getAttribute('data-customwebpagelayout-name') !== null){
    // Element exists with attribute. Add to array.
    matchingElements.push(allElements[i]);
  }
}
//use matchingElements;

jQuery:

$("*[data-customwebpagelayout-name='data-customwebpagelayout-name']");

我不应该在 html 中使用数据属性吗？

Should I not use data attributes in html?

html

custom-data-attribute