JS 按数据属性选择 - Javascript

很多时候，我们需要按照数据属性来选择元素。JavaScript 提供了几种方法来实现这个功能，接下来我们来一一介绍。

通过getAttribute()方法选择

const element = document.querySelector("[data-attr='value']");

这个方法会找到所有使用“data-attr”的元素并返回第一个元素。如果没有找到这样的元素，它将返回null。

通过dataset属性选择

const element = document.querySelector("[data-attr]");
const dataAttribute = element.dataset.attr;

这个方法使用一个特殊的JavaScript属性dataset，该属性允许您访问散列在HTML元素上的“data-”属性。它返回一个类似于对象的结构，可以使用它来访问数据属性集合。

通过querySelectorAll()方法选择

const elements = document.querySelectorAll("[data-attr='value']");

这个方法将返回匹配该选择器的所有元素的列表。这是最好的方法，可以使用它来选择多个元素。

结论

通过上述方法，我们可以很容易地选择特定的数据属性。无论你选择哪种方法，都要记得在数据属性前面加上“data-”，否则这些方法将无法找到你需要的元素。

以上就是JS按数据属性选择的方法，希望对您有所帮助。