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

识别和选择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中使用数据属性吗？

1 个答案: