目錄

• 1 .原生js獲取 DOM 節點：
• 2. vue2中獲取當前組件的實例對象：
• 3.vue3中獲取當前組件的實例對象：
• 總結

1 .原生js獲取 DOM 節點：

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

2. vue2中獲取當前組件的實例對象：

因為每個 vue 的組件實例上，都包含一個 $refs 對象，里面存儲著對應的 DOM 元素或組件的引用。所以在默認情況下， 組件的 $refs 指向一個空對象 。

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

<template>
  <div>
    <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>

總結

到此這篇關于Vue3獲取DOM節點的3種方式的文章就介紹到這了,更多相關Vue3獲取DOM節點內容請搜索以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持！