在JS中，.getAttribute和dataset的区别是什么？

Question

我一直在使用.getAttribute方法，今天了解到了.dataset方法，因此想知道它们之间的区别以及应该在何时使用每个方法。

以下是一个例子。假设我们有一个段落：

<p class="test" data-something="this is a test">some text</p>

如果我们使用 .getAttribute 方法

let testText = document.querySelector('.test');
let testGetAttribute = testText.getAttribute('data-something');
console.log(testGetAttribute);

我们得到的输出是“this is a test”。如果我们使用.dataset。

let testText = document.querySelector('.test');
let testDataset = testText.dataset.something;
console.log(testDataset);

我們還可以得到 "this is a test" 。那麼，這兩種方法之間有什麼區別嗎？使用其中一種方法是否有一些好處？謝謝！

- LuisBento

---

在HTML中，您应该只添加指定属于特定HTML元素的属性。如果您创建自己的命名属性，则可能会与当前或未来的属性名称发生名称冲突。因此，data-*属性被创建，以便您可以将其用作要添加的任何属性的前缀。其余部分可以从MDN获取。使用dataset仅是一个方便的getter，而不是使用element.getAttribute(data-whatever)。 - RobG

dataset比较新，在当前浏览器中工作，并且使代码更易读，但是如果您处理大量的data属性，则速度比getAttribute慢，虽然对于较小的情况，dataset的速度差异可以忽略不计。请参见https：//jsperf.com/getattribute-vs-dataset。 - Dave Everitt

数据集的兼容性非常好，因此除了性能方面外，在任何地方它几乎不会崩溃。 - Adrià

Answer 1

我之所以回复这个问题，是因为我遇到了两种方法之间的区别，实际上影响了我的应用程序的功能。

我使用getAttribute('data-id') 和 dataset.id 来收集一个待办事项的id。

对于getAttribute方法，如果我逐行调试运行，它可以正常工作。如果没有，就会发生各种奇怪的事情。而对于dataset.id，两种方式都可以正常工作。

如果你感兴趣，你可以在我的代码中检查第201行和第202行: https://glitch.com/~wnc-reading-exercise-3 把第201行注释掉，取消注释第202行。

在运行应用程序时，尝试切换待办事项的完成状态，看看DOM会发生什么变化。如果你一次切换几个，你会看到一些奇怪的值出现。

- Xavier Chia

---

这似乎并没有解释它们之间的区别？ - Kalnode