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);

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

如果我们使用 .dataset

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

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

那么，这两种方法有区别吗？使用一个比另一个有什么好处吗？

谢谢！

Answer 1

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

我做了getAttribute('data-id')并dataset.id收集一个待办事项id。

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

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

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