Vue3獲取DOM節(jié)點(diǎn)的方式有哪些

這篇文章主要講解了“Vue3獲取DOM節(jié)點(diǎn)的方式有哪些”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“Vue3獲取DOM節(jié)點(diǎn)的方式有哪些”吧！

1 .原生js獲取 DOM 節(jié)點(diǎn)：

document.querySelector(選擇器)
document.getElementById(id選擇器)
document.getElementsByClassName(class選擇器)
....

2. vue2中獲取當(dāng)前組件的實(shí)例對象：

因?yàn)槊總€(gè) vue 的組件實(shí)例上，都包含一個(gè) $refs 對象，里面存儲著對應(yīng)的 DOM 元素或組件的引用。所以在默認(rèn)情況下， 組件的 $refs 指向一個(gè)空對象 。

可以先在組件上加上 ref="名字" ，然后通過 this.$refs.名字 獲取相應(yīng)元素并進(jìn)行操作。

<template>
  <div class="box">
    <h2 ref="divDom">這是一個(gè)測試樣例</h2>
    <button ref="but">按鈕</button>
  </div>
</template>
 
<script>
 
export default {
  data() {
    return {
    }
  },
  methods: {
    showThis(){
      // h2的實(shí)例對象 
      console.log(this);
      this.$refs.divDom.style.color='yellow'
      //引用到組件的實(shí)例之后，也可以調(diào)用組件上的 methods方法
      this.$refs.but.click();
    },
  },
}
</script>

3.vue3中獲取當(dāng)前組件的實(shí)例對象：

 在Vue3框架里面是解除了this這個(gè)對象，所以無法使用this.$refs的方式獲取自定義組件 ref 的DOM節(jié)點(diǎn)。

但是vue3中自帶了能返回當(dāng)前組件實(shí)例對象的函數(shù) getCurrentInstance，通過該函數(shù)獲取對象節(jié)能看到該對象包含界面中的refs。

<template>
    <div ref="divDom"></div>
</template>
 
<script setup>
    import { ref, getCurrentInstance } from 'vue';
    
    const divDom = ref(null);
    onMounted(()=>{
        console.log('獲取dom元素',divDom)
    })
 
    // 獲取頁面的實(shí)例對象
    const pageInstance = getCurrentInstance();
    // 獲取dom節(jié)點(diǎn)對象
    const tagDomObj = pageInstance.refs.divDom;
 
</script>

感謝各位的閱讀，以上就是“Vue3獲取DOM節(jié)點(diǎn)的方式有哪些”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對Vue3獲取DOM節(jié)點(diǎn)的方式有哪些這一問題有了更深刻的體會，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！