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

问题描述：

我正在编写一个C＃表单应用程序，它允许用户将自定义html节点添加到html网页。我有一些javascript代码选择一个html节点来执行特定的代码，如jQuery ui滑块。我不应该在html中使用数据属性吗？

为了识别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>

谢谢。

以何种方式，你需要“确定”这些节点？你为什么不简单地使用'class'来“辨别”（并容易地选择）这些元素......？ – CBroe

如果您需要HTML节点的唯一标识符，您可以分配一个'id'。 –

答

识别和选择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>

然后，你可以选择使用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中使用数据属性吗？

相关推荐