Vue3取得DOM節點的方式有哪些

1 .原生js取得DOM 節點：

document.querySelector(选择器)
document.getElementById(id选择器)
document.getElementsByClassName(class选择器)
....

2. vue2中取得目前元件的實例物件：

因為每個 vue 的元件實例上，都包含一個 $refs 對象，裡面儲存對應的 DOM 元素或元件的參考。所以在預設情況下， 組件的 $refs 指向一個空物件 。

可以先在元件上加上 ref="名字" ，然後透過 this.$refs.名字 取得對應元素並進行操作。

<template>
  <div class="box">
    <h2 ref="divDom">这是一个测试样例</h2>
    <button ref="but">按钮</button>
  </div>
</template>
 
<script>
 
export default {
  data() {
    return {
    }
  },
  methods: {
    showThis(){
      // h2的实例对象 
      console.log(this);
      this.$refs.divDom.style.color=&#39;yellow&#39;
      //引用到组件的实例之后，也可以调用组件上的 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 &#39;vue&#39;;
    
    const divDom = ref(null);
    onMounted(()=>{
        console.log(&#39;获取dom元素&#39;,divDom)
    })
 
    // 获取页面的实例对象
    const pageInstance = getCurrentInstance();
    // 获取dom节点对象
    const tagDomObj = pageInstance.refs.divDom;
 
</script>

以上是Vue3取得DOM節點的方式有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！