vue一般是通过操作数据来实现界面的更新,通常不会去操作DOM,但实际开发场景总是千奇百怪,会有场景需要获取DOM
通过 ref 来获取dom元素
建议:vue中尽量不去操作 dom 元素,选用 ref 操作属性获取
<button ref="btn">按钮</button>
<div ref="box">
<h1> ref</h1>
<p> 测试</p>
</div>
<hr>
<div ref="myDiv">
<p v-for="item in 10">{{item}}</p>
</div>
获取的时候 this.$refs. 跟上需要获取标签的 ref的属性值
"获取标签内容": this.$refs.btn.innerHTML
"获取子标签":this.$refs.box.children
"获取标签的高度": this.$refs.myDiv.offsetHeight
"获取标签的距离顶部的高度":this.$refs.myDiv.offsetTop
"获取并操作":this.$refs.box.style.backgroundColor="red"
其他获取dom元素的方法
一,通过ID 获取DOM对象
var xx = document.getElementById('xx')
二.通过签名获取DOM对象
var xx = document.getElementsByTagId('xx')
三.通过类名获取DOM对象(获取的)
var xx = document.getElementsByClassName('xx')
四.通过name属性获取DOM (只有表单元素才有name属性)
var pp = document.getElementsByName('pp')
五.通过css选择器 获取DOM
document.querySelector(选择器) //获取符合条件的第一个dom对象
document.querySelectorAll(选择器) //获取所有符合条件的dom对象的集合