Javascript 获取 data-id 属性

在前端开发中，经常需要操作元素的自定义属性，其中 data-id 是一个常见的自定义属性，用来存储元素的标识符。

1. 通过 getAttribute 方法获取 data-id 属性的值

const element = document.getElementById('my-element');
const dataId = element.getAttribute('data-id');
console.log(dataId);

这段代码中，首先通过 getElementById 方法获取指定的元素，然后使用 getAttribute 方法并传入 'data-id' 来获取 data-id 属性的值。最后，打印出 dataId 变量的值。

2. 通过 dataset 属性获取 data-id 属性的值

除了使用 getAttribute 方法来获取 data-id 属性的值之外，还可以使用 dataset 属性。

const element = document.getElementById('my-element');
const dataId = element.dataset.id;
console.log(dataId);

这段代码中，通过 getElementById 方法获取指定的元素，并直接访问 dataset 对象的 id 属性来获取 data-id 属性的值。最后，打印出 dataId 变量的值。

3. 通过 querySelector 方法获取带有 data-id 属性的元素

如果需要获取页面上带有特定 data-id 属性的元素，可以使用 querySelector 方法。

const element = document.querySelector('[data-id="123"]');
console.log(element);

这段代码中，使用 querySelector 方法并传入属性选择器 [data-id="123"]，来获取 data-id 属性值为 '123' 的元素。最后，打印出 element 变量的值。

结论

以上是三种常用的方式来获取 data-id 属性的值。根据实际需求，选择合适的方式进行操作。