解码JS自定义属性之迷，重返编程初心

一、自定义属性的魅力：锦上添花，妙不可言

自定义属性，顾名思义，就是我们自己定义的属性，可以为HTML元素添加额外的信息。它们以data-作为前缀，后接自定义的属性名。例如，我们可以为<div>元素添加一个名为data-color的自定义属性，其值为red。这样，我们就可以通过JavaScript获取这个自定义属性的值，并根据其值来设置元素的样式。

const element = document.querySelector('div');
const color = element.getAttribute('data-color');
element.style.color = color;

自定义属性的强大之处在于，它们可以让我们轻松地向元素添加元数据，而不会破坏其现有的语义。这使得它们非常适合存储诸如用户偏好、状态信息或其他需要动态更改的数据。

二、getAttribute的陷阱：歧义丛生，真假难辨

在JavaScript中，我们可以使用getAttribute方法来获取元素的属性值。然而，当涉及到自定义属性时，getAttribute方法可能会引起一些歧义。这是因为，getAttribute方法不仅可以获取元素的自带属性，还可以获取元素的自定义属性。

const element = document.querySelector('div');
const color1 = element.getAttribute('id'); // 获取元素的id属性值
const color2 = element.getAttribute('data-color'); // 获取元素的data-color自定义属性值

在这种情况下，getAttribute方法返回了两个值：id属性的值和data-color自定义属性的值。这可能会让人感到困惑，因为我们无法立即判断哪个值是元素的自带属性，哪个值是元素的自定义属性。

三、dataset属性：拨云见日，一览无余

为了解决getAttribute方法的歧义问题，HTML5引入了dataset属性。dataset属性是一个特殊的对象，它包含了元素的所有自定义属性。我们可以通过dataset属性来轻松获取和操作元素的自定义属性。

const element = document.querySelector('div');
const color = element.dataset.color; // 获取元素的data-color自定义属性值

dataset属性的好处在于，它可以让我们直接获取元素的自定义属性值，而无需担心歧义的问题。此外，dataset属性还提供了许多有用的方法，可以让我们更轻松地操作元素的自定义属性。

// 设置元素的data-color自定义属性值
element.dataset.color = 'red';

// 删除元素的data-color自定义属性
delete element.dataset.color;

// 遍历元素的所有自定义属性
for (const key in element.dataset) {
  const value = element.dataset[key];
  // ...
}

四、结语：拨开迷雾，重返初心

自定义属性是JavaScript中的一项重要特性，可以让我们为HTML元素添加额外的信息，而不会破坏其现有的语义。然而，获取这些自定义属性有时会让人感到困惑，尤其是在区分元素的自带属性和自定义属性时。通过使用dataset属性，我们可以轻松地获取和操作元素的自定义属性，从而避免歧义的问题。我希望这篇文章能够帮助您更好地理解和使用JavaScript中的自定义属性。无论您是JavaScript的新手还是经验丰富的开发人员，自定义属性都是一个值得您探索和掌握的强大工具。