您现在的位置是:首页 > Javascript
当前栏目
【Vue3】获取DOM节点的几种方式
2023-03-31 10:38:47 时间
1 .原生js获取 DOM 节点:
document.querySelector(选择器)
document.getElementById(id选择器)
document.getElementsByClassName(class选择器)
....
2. vue2中获取当前组件的实例对象:
因为每个 vue 的组件实例上,都包含一个 $refs 对象,里面存储着对应的 DOM 元素或组件的引用。所以在默认情况下, 组件的 $refs 指向一个空对象 。
可以先在组件上加上 ref="名字" ,然后通过 this.$refs.名字 获取相应元素并进行操作。
<template>
<div class="box">
<h1 ref="divDom">这是一个测试样例</h1>
<button ref="but">按钮</button>
</div>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
showThis(){
// h1的实例对象
console.log(this);
this.$refs.divDom.style.color='yellow'
//引用到组件的实例之后,也可以调用组件上的 methods方法
this.$refs.but.click();
},
},
}
</script>
3.vue3中获取当前组件的实例对象:
在Vue3框架里面是解除了this这个对象,所以无法使用this.$refs的方式获取自定义组件 ref 的DOM节点。
但是vue3中自带了能返回当前组件实例对象的函数 getCurrentInstance,通过该函数获取对象节能看到该对象包含界面中的refs。
<template>
<div ref="divDom"></div>
</template>
<script setup>
import { ref, getCurrentInstance } from 'vue';
const divDom = ref(null);
onMounted(()=>{
console.log('获取dom元素',divDom)
})
// 获取页面的实例对象
const pageInstance = getCurrentInstance();
// 获取dom节点对象
const tagDomObj = pageInstance.refs.divDom;
</script>
相关文章
- TiDB Binlog 组件正式开源
- 使用Visual Studio Code对Node.js进行断点调试
- 推荐!数据可视化的十种优秀JavaScript图表库
- Node.js在复杂集成场景下占据统治地位的五个理由
- 玩转Node.js单元测试
- Node.js中内存泄漏分析
- Angular对React:一场关于Web开发者支持率的史诗对决
- 热点推荐:什么是后端开发?
- 谈谈Spring boot 启动层面的开发
- 使用NodeJS将文件或图像上传到服务器
- 编写React组件的最佳实践
- JavaScript MV*框架最值得关注的七个亮点
- 前端开发指南:如何利用PHP Cake框架构建应用
- 基于React与Vue后,移动开源项目Weex如何定义未来
- NodeJS和C++之间的类型转换
- jQuery中的常用到的三十九个技巧
- 官宣|Google Developers中国网站发布!
- NodeJS和C++之间的类型转换
- .NET Core首例Office开源跨平台组件(NPOI Core)
- 如何写出漂亮的React组件