JS中.getAttribute和数据集的区别答案

【问题标题】：Difference between .getAttribute and dataset in JSJS中.getAttribute和数据集的区别
【发布时间】：2018-09-26 09:25:28
【问题描述】：

我一直在使用 .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);

我们得到“这是一个测试”的输出。

如果我们使用 .dataset

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

我们也得到“这是一个测试”。

那么，这两种方法有区别吗？使用其中一种有什么好处吗？

谢谢！

【问题讨论】：

在 HTML 中，您应该只添加指定为属于特定 HTML 元素的属性。如果您创建自己的命名属性，则可能会与当前或将来的属性名称发生名称冲突。因此创建了 data-* 属性，因此您可以将其用作您希望添加的任何属性的前缀。其余的您可以从MDN 获得。 dataset 的使用只是一个方便的getter，而不是使用element.getAttribute(data-whatever)。
dataset 较新，可在当前浏览器中运行，并且代码可读性更好，但如果您要处理大量 data 属性，则 getAttribute 会更慢，尽管速度较慢对于较小的情况，差异可以忽略不计，dataset 很好。见jsperf.com/getattribute-vs-dataset
dataset compatibility 真的很好，所以除了性能之外它几乎不会在任何地方崩溃

【解决方案1】：

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

我做了getAttribute('data-id') 和dataset.id 来收集待办事项id。

对于 getAttribute，如果我逐行运行调试器，它工作正常。如果我不这样做，就会发生各种奇怪的事情。对于 dataset.id，无论哪种方式都可以正常工作。

如果您对此感到好奇，可以查看我的代码中的第 201 和 202 行： https://glitch.com/~wnc-reading-exercise-3 注释掉第 201 行并取消注释第 201 行。

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

【讨论】：