javascript - JS中.getAttribute和数据集的区别

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 会发生什么。如果您一次切换几个，您会看到一些奇怪的值出现。