Vue获取DOM节点方式

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); //获取到元素本身 -- 
测试元素的ref属性
                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>