dom 自定义属性 data
时间: 2023-08-06 10:05:49 浏览: 51
DOM 自定义属性 data-* 是 HTML5 中新增的一种用于在 HTML 元素上存储自定义数据的方式。这种方式可以避免使用全局变量或者其他容易产生命名冲突的方式来存储数据。
以 `data-` 开头的自定义属性可以在 HTML 元素上声明,例如:
```
<div data-name="John Doe" data-age="30"></div>
```
在上面的例子中,我们在一个 `div` 元素上定义了两个自定义属性 `data-name` 和 `data-age`,用于存储该元素对应的人名和年龄。
在 JavaScript 中,我们可以通过访问元素的 `dataset` 属性来获取和修改这些自定义属性的值,例如:
```
const div = document.querySelector('div')
console.log(div.dataset.name) // 输出 "John Doe"
console.log(div.dataset.age) // 输出 "30"
div.dataset.name = 'Jane Doe'
div.dataset.age = '35'
```
在上面的例子中,我们首先使用 `querySelector()` 方法获取了一个 `div` 元素,然后通过访问该元素的 `dataset` 属性来获取和修改它的自定义属性的值。
需要注意的是,属性名中的连字符 `-` 在 JavaScript 中会被转换为驼峰式命名,例如 `data-name` 会被转换为 `div.dataset.name`。
相关问题
vue3 根据自定义属性查找dom
Vue3 中提供了两种方式用于根据自定义属性查找DOM。
第一种方式是通过使用 `ref` 和 `$refs`。我们可以在模板中使用 `ref` 定义一个引用名,然后在对应的Vue实例中通过 `$refs` 访问该引用名。通过 `$refs` 可以直接获取到对应的DOM元素,然后就可以查找自定义属性了。例如,在模板中定义一个自定义属性`data-id`,代码如下:
```html
<template>
<div ref="myDiv">
<div data-id="123">...</div>
</div>
</template>
```
然后在Vue实例中可以通过 `$refs` 获取到 `myDiv` 这个引用名对应的DOM元素,并在其中查找自定义属性为 `data-id` 的DOM元素,代码如下:
```javascript
export default {
mounted() {
const myDiv = this.$refs.myDiv; // 获取引用名为`myDiv`对应的DOM元素
const myEle = myDiv.querySelector('[data-id="123"]'); // 查找自定义属性为`data-id`、值为`123`的DOM元素
// 其他逻辑...
},
};
```
第二种方式是使用 `querySelector` 或 `querySelectorAll` 方法直接在DOM上进行查找。这种方式需要在Vue实例中手动访问DOM元素,并在其中查找自定义属性。例如,在Vue实例中通过`querySelector`方式查找自定义属性为 `data-id` 的DOM元素,代码如下:
```javascript
export default {
mounted() {
const myEle = document.querySelector('[data-id="123"]'); // 查找自定义属性为`data-id`、值为`123`的DOM元素
// 其他逻辑...
},
};
```
需要注意的是,这种方式需要在Vue组件中手动处理DOM相关的逻辑,可能会引发其他问题,所以使用时需要谨慎。
原生js获取自定义属性e.data
原生JS获取自定义属性`e.data`的方法如下:
1. 首先,我们需要获取到事件对象`e`,通常是在监听事件的回调函数中获取到。
2. 获取`e`对象的自定义属性`data`,可以通过`e`对象的`getAttribute()`方法来获取。例如:
```javascript
var data = e.getAttribute('data');
```
如果`e`是一个DOM元素的事件对象,可以改为:
```javascript
var data = e.target.getAttribute('data');
```
3. 其他方法可以使用`dataset`属性来获取自定义属性值。例如:
```javascript
var data = e.dataset.data;
```
这种方法适用于HTML5中的`data-*`属性。
4. 如果自定义属性`data`是在HTML标签的`data-*`属性中定义的,则可以直接通过`e`对象的`dataset`属性来获取。例如,如果自定义属性是`data-data`,则可以使用`e.dataset.data`来获取。
总之,原生JS获取自定义属性`e.data`的方法有多种,可以根据具体情况选择合适的方法来获取。