可以向 DOM 对象添加任意属性吗？

简介

DOM（文档对象模型）是一种用于表示 HTML 或 XML 文档的标准。在前端开发中，我们通常会使用 JavaScript 操作 DOM 对象来动态修改网页的内容和样式。

有时候，我们希望给 DOM 对象添加一些自定义的属性或方法，以方便在代码中进行操作。那么问题来了，我们是否可以向 DOM 对象添加任意的属性呢？

答案

答案是肯定的。JavaScript 允许我们在运行时添加任意的属性和方法到对象上，包括 DOM 对象。

例如，我们可以创建一个 data 属性来存储一些额外的数据：

const div = document.createElement('div');
div.data = {
  name: 'John',
  age: 30,
};

然后，在之后的代码中，我们可以像下面这样访问这个属性：

console.log(div.data.name); // 输出 "John"

需要注意的是，这种方式虽然方便，但不推荐使用。因为浏览器可能会将某些属性视为内部属性，并对其进行特殊处理。如果我们随意添加属性，可能会与这些内部属性产生冲突，导致代码出现 bug。

另外，由于 DOM 对象经常被用于与其他库交互，如果我们在其中添加了自定义属性，可能会影响到这些库的功能。

因此，如果我们需要存储额外的数据，最好使用 data-* 属性，如下所示：

<div data-name="John" data-age="30"></div>

然后，在 JavaScript 中，我们可以使用 dataset 属性来访问这些属性：

const div = document.querySelector('div');
console.log(div.dataset.name); // 输出 "John"

总结

在前端开发中，我们可以向 DOM 对象添加任意的属性和方法。但是，这种方式并不推荐使用，因为可能会产生冲突或影响其他库的功能。如果我们需要存储额外的数据，应该使用 data-* 属性，并通过 dataset 属性来访问这些属性。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30613