获取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 选择 ID
      const 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>