Vue获取节点的方法

Vue获取DOM节点

1、原生js获取节点的方式

document.getElementById() -- 使用id获取方式较少
document.getElementByClassName() -- 类名
document.getElementByTagName() -- 标签名
document.getElementByName() -- name属性，使用少

document.querySelector() -- css选择符模式，返回该模式匹配的第一个元素，结果为一个元素;没有匹配元素时，返回值为null

function funb() {
    var selectDiv = document.querySelector("#list li:nth-child(3)");
    selectDiv.style.color = "red";
    // console.log(selectDiv)
}
funb()

document.querySelectorAll() -- css选择模式，返回该模式匹配的所有元素，结果为一个数组

function func() {
    var selectDiv = document.querySelectorAll(".text ul>li");
    selectDiv[0].style.color = "red";
    //打印出为NodeList对象 -- 是节点的集合,可以使用 Array.from() 将其转换为数组
    console.log(selectDiv) 
}
func()

2、在vue项目中引入jquery

jQuery中包裹后的DOM对象实际上是一个数组，要获得纯粹的DOM对象可以有两种方式：

使用数组索引方式访问，例如：var dom = $(dom)[0]; 如： $("#id")[0]
使用函数get()访问，例如：var dom = $(dom).get(0); get()函数中的参数为索引号

3、ref属性

此属性是获取dom对象，作用：与id作用相似，相当于给标签起了一个类似于id。
ref用来给元素或子组件引用信息。引用信息会注册在父组件的$refs对象中。在普通的DOM元素上使用，引用指向时DOM元素，在子组件上，引用指向组件实例
操作一个元素时，在元素上添加ref属性，之后使用$refs来获取该元素，之后进行操作

this.$refs.ref值

<template>
    <div>
        <div class="contaier" ref="box" style="width: 100px;height: 100px;">
            测试元素的ref属性
        </div>
        <button type="button" @click="showRef()">点击</button>
    </div>
</template>

<script>
 export default {
        methods: {
            showRef() {
                this.$refs.box.style.color = "red";
                console.log(this.$refs.box); //获取到元素本身 -- <div class="contaier" ref="box" style="width: 100px;height: 100px;">测试元素的ref属性</div>
                console.log(this.$refs.box.style); //获取到元素的样式
            }
        }
     //this.$refs即为搜索所有的ref的一个对象，this.$ref可以访问到vue实例中的所有设置ref属性的DOM元素，并对其操作
     //组件中的子组件的ref指向的时组件的实例
    }
</script>

4、直接使用DOM API寻找元素

<script>
    //这种方法足够简单直观，Vue组件在patch阶段结束时会把this.$el赋值为挂载的根dom元素，我们可以直接使用$el的querySelector, querySelectorAll等方法获取匹配的元素。
    ...
    mounted () {
        let elm = this.$el.querySelector('#id')
    }
</script>