获取DOM 节点的四大方式

前言：

在 Vue 中，获取 DOM 节点可以通过多种方式，如自定义属性、ref 引用、类选择器和 ID 选择器等。

一、使用 ref 获取 DOM 实例

ref 是 Vue 中推荐的获取 DOM 节点的方式，它为每个节点分配一个唯一的引用，可以直接访问该 DOM 元素。

//vue2的写法
<template><div><!-- 通过 ref 绑定 DOM --><div ref="myDiv">这是一个 div</div><button @click="getRefElement">获取 ref 实例</button></div>
</template><script>
export default {methods: {getRefElement() {// 通过 this.$refs 访问 DOM 元素console.log(this.$refs.myDiv);},},
};
</script>

//vue3的写法
<template><div><div ref="myDiv">这是一个 div</div><button @click="getRefElement">获取 ref 实例</button></div>
</template><script setup>
import { ref, onMounted } from 'vue';// 创建一个 ref
const myDiv = ref(null);function getRefElement() {// 使用 .value 来访问 DOM 节点console.log(myDiv.value);
}
</script>

二、使用自定义属性选择器

可以为 DOM 元素添加自定义属性，然后使用 querySelector 或 querySelectorAll 来获取该元素。

//vue2的写法
<template><div><!-- 使用自定义属性 data-my-attr --><div data-my-attr="example">这是一个 div</div><button @click="getCustomAttribute">获取自定义属性的元素</button></div>
</template><script>
export default {methods: {getCustomAttribute() {// 使用 querySelector 选择自定义属性const element = this.$el.querySelector('[data-my-attr="example"]');console.log(element);},},
};
</script>

//vue3的写法
<template><div><div data-my-attr="example">这是一个 div</div><button @click="getCustomAttribute">获取自定义属性的元素</button></div>
</template><script setup>
import { onMounted } from 'vue';let customElement = null;function getCustomAttribute() {console.log(customElement);
}// 使用 onMounted 确保 DOM 渲染完成后获取节点
onMounted(() => {customElement = document.querySelector('[data-my-attr="example"]');
});
</script>

三、使用类选择器获取元素

类选择器可以用于获取 DOM 节点。注意，如果是多个元素的类，可以使用getElementsByClassName或者querySelectorAll 来获取所有匹配的元素。

//vue2写法
<template><div><!-- 使用类选择器 --><div class="my-class">第一个元素</div><div class="my-class">第二个元素</div><button @click="getClassElements">获取类选择器的元素</button></div>
</template><script>
export default {methods: {getClassElements() {// 获取具有类名 "my-class" 的所有元素const elements = this.$el.querySelectorAll('.my-class');elements.forEach((element) => console.log(element));},},
};
</script>

//vue3的写法
<template><div><div class="my-class">第一个元素</div><div class="my-class">第二个元素</div><button @click="getClassElements">获取类选择器的元素</button></div>
</template><script setup>
import { onMounted } from 'vue';let classElements = [];function getClassElements() {classElements.forEach((element) => console.log(element));
}onMounted(() => {// 使用类选择器选择所有元素classElements = document.querySelectorAll('.my-class');
});
</script>

四、使用 ID 选择器获取元素

ID 在页面中应该唯一，可以通过 querySelector或者getElementById直接获取该元素。

// vue2的写法
<template><div><!-- 使用 ID 选择器 --><div id="my-unique-id">这是一个 div</div><button @click="getIdElement">获取 ID 选择器的元素</button></div>
</template><script>
export default {methods: {getIdElement() {// 使用 querySelector 选择 IDconst element = this.$el.querySelector('#my-unique-id');console.log(element);},},
};
</script>

//vue3的写法
<template><div><div id="my-unique-id">这是一个 div</div><button @click="getIdElement">获取 ID 选择器的元素</button></div>
</template><script setup>
import { onMounted } from 'vue';let idElement = null;function getIdElement() {console.log(idElement);
}onMounted(() => {// 使用 ID 选择器获取元素idElement = document.querySelector('#my-unique-id');
});
</script>

五、总结

• ref：推荐方式，使用 this.$refs.refName 获取元素。
• 自定义属性选择器：使用 this.$el.querySelector('[data-attr="value"]')。
• 类选择器：使用 this.$el.querySelectorAll('.class-name')。
• ID 选择器：使用 this.$el.querySelector('#id-name')。