Vue获取DOM节点

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

  1. document.getElementById() – 使用id获取方式较少

  2. document.getElementByClassName() – 类名

  3. document.getElementByTagName() – 标签名

  4. document.getElementByName() – name属性,使用少

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

    function funb() {
    	var selectDiv = document.querySelector("#list li:nth-child(3)");
        selectDiv.style.color = "red";
        // console.log(selectDiv)
    }
    funb()
    
  6. document.querySelectorAll() – css选择模式,返回该模式匹配的所有元素,结果为一个数组

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

js获取DOM节点的详细应用链接

2、在vue项目中引入jquery

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

  1. 使用数组索引方式访问,例如:var dom = $(dom)[0];
    如: $("#id")[0]
  2. 使用函数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>

Logo

前往低代码交流专区

更多推荐