如何管理HTML元素属性，最佳实践

Question

根据性能设置/获取属性的最佳方法是什么：

var div = document.getElementById('someId');

//Setting Attributes
div.setAttribute('class', 'myClass');
div.attributes.class.value = 'myClass';
div.className = "myClass";

//Getting Attributes Values
console.log(div.getAttribute('class'));
console.log(div.attributes.class.value);
console.log(div.className);

//Checking Attribute Existance
if (div.attributes.hasOwnProperty('class')) ..;
if (!div.className) ..;

同样使用html5数据集是设置自定义data-*属性的好主意吗？并且这些属性的值必须始终是一个字符串，还是可以使用其他类型的值，如对象和数组？

Answer 1

全部读，然后全部写，永不混。这会导致重画。关于这个问题的优秀文章： wilsonpage.co.uk/preventing-layout-thrashing

关于自定义属性，你可以添加很多，据我所知，它不会影响性能。它们的值仅为text，但您可以使用JSON.parse和JSON.stringify对要存储在自定义属性中的数组或对象进行解码和编码;

我个人喜欢自定义属性的语义，以及它们如何根据附加信息扩展DOM元素。对于非常基本的事情，它是数据和DOM之间更好的链接。例如，创建一个应该打开某个模态窗口的链接。你可以在数据属性中添加关于应该从这个链接打开的模态窗口的附加信息，就在触发该窗口的链接的顶部。它非常方便，并且有很多用途。