传统获取DOM元素的方法

相信大家获取DOM元素都不陌生。都是从html一路披荆斩棘到了Vue3的。还是重新回顾一下在JS中获取DOM元素的方法吧。

html 复制代码

<div class="body" id="container">
    <button class="btn">按钮</button>
    <button class="btn">按钮</button>
    <button class="btn">按钮</button>
    <button class="btn">按钮</button>
    <p>我是测试文字</p>
</div>

js 复制代码

let btn = document.getElementsByClassName("btn")
console.log(btn); 

let body = document.getElementById("container")
console.log(body)

代码执行结果在HTML中，我们获取元素的方法就是通过getElementsByClassName或者是getElementById通过元素的类名或者是ID来对元素进行锁定的。

在Vue中获取DOM元素

直接在setup中获取

因为Vue中有生命周期的缘故，获取元素不能再setup中直接获取到DOM元素。DOM元素需要经过渲染，挂载到页面中才能获取到。当初第一次接触到Vue的时候，还沉浸在HTML的操作，直接在setup中操作DOM元素，结果给我迎头一棒。

相同的代码，但是在Vue中运行，直接就是null。我们仔细看获取的HTMLCollection,明明可以获取得到，那我们再来看看，打印这个数组的长度。

js 复制代码

let btn = document.getElementsByClassName("btn")
console.log(btn); 

let body = document.getElementById("container")
console.log(body)

console.log("btn的长度"+btn.length);

神奇的事情出现了，数组的长度居然是0。后面我去查阅资料发现，我们只是能获取到这个DOM元素，但是没有办法进行操作。因为在created中，实例被生成的时候哦根本就没有这个元素被挂在上去。知道了原因之后，我又开开心心地把获取这个两个DOM元素的操作放到了onMounted钩子函数中，这样总没错了吧。

在onMounted钩子函数中获取

在onMounted的钩子函数中获取

Vue 复制代码

onMounted(()=>{
  let btn = document.getElementsByClassName("btn")
  console.log(btn); 
  let body = document.getElementById("container")
  console.log(body)
  console.log("btn的长度"+btn.length); 
})

在onMounted中获取能够成功获取。但是如果我们要发送请求的话，Mounted中是不会等待挂载完成再发送请求的，这样就会引出一个新的问题，如果有一个echarts的图，异步获取数据之后渲染在页面上，然后根据页面视口的宽度来改变echarts的宽度，这样子获取显然就不行了。那又该怎么样获取呢？我们下一章见~

Vue前端踩坑日常（一）之DOM元素

传统获取DOM元素的方法

在Vue中获取DOM元素

直接在setup中获取

在onMounted钩子函数中获取