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

我们也会得到 "这是一个测试"。

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

谢谢你！我一直在使用.getAttribute，今天发现了.dataset。

Answer 1

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

我做了 getAttribute('data-id') 和 dataset.id 领取待办事项 id.

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

如果你对它好奇，你可以检查我代码中的第201和202行。https:/glitch.com~wnc-reading-exercise-3。 注释出第201行，取消注释第201行。

当运行应用程序时，尝试在一个todo项目上切换完成，看看DOM会发生什么。如果你到处去切换几个，你会看到一些奇怪的值显示出来。