使用Vue获取 操作dom

vue一般是通过操作数据来实现界面的更新,通常不会去操作DOM,但实际开发场景总是千奇百怪,会有场景需要获取DOM

通过 ref 来获取dom元素

建议：vue中尽量不去操作 dom 元素，选用 ref 操作属性获取

<button ref="btn">按钮button>
<div ref="box">
	<h1> refh1>
	<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对象的集合