关于js中获取dom节点

js中获取dom节点

//通过id
<div id="box">id盒子</div>
console.log(document.getElementById("box"))


//通过class 返回一个集合
<div class="box">class盒子1</div>
console.log(document.getElementsByClassName("box")[0])


//通过标签名  返回一个集合
<p>段落</p>  
console.log(document.getElementsByTagName("p"))


//通过name属性  含有name属性的表单元素才可以获取
 <input  name="userName" />
console.log(document.getElementsByName("userName"))


//通过document.querySelector( ) / querySelectorAll( )
consle.log(document.querySelector("#box"))
consle.log(document.querySelectorAll(".box"))
//二者区别：querySelector只能获取第一个元素，querySelectorAll可以获取到class中名为box的所有元素


//通过ref进行标记
<div ref="buttonbox">按钮</div>
//两种获取形式
console.log(this.$refs.buttonbox)
console.log(this.$refs["buttonbox"])

// $refs 是所有注册过的ref的一个集合
console.log(this.$refs)

待续。。。