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

How to manage HTML elements attributes, best practice

本文关键字：属性 最佳 元素 HTML 何管理 管理      更新时间：2023-09-26

在性能方面设置/获取属性的最佳方法是什么:

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-*属性的好主意?这些属性的值是否必须总是字符串，或者我可以使用其他类型的值，如对象和数组?

先读后写，绝不混用。这会导致重新油漆。关于这个问题有一篇很好的文章:wilsonpage.co。英国/preventing-layout-thrashing

关于自定义属性，您可以添加很多，据我所知它不会损害性能。它们的值只有text，但是您可以使用JSON.parse和JSON.stringify来解码和编码要存储在自定义属性中的数组或对象;

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

相关文章：