关于js里DOM的一些方法和vue框架里DOM的用法

Ⅰ、js里DOM的用法

一、通过id获取所在的元素

document.getElementById("id名")

二、通过class名查找相应元素

document.getElementsByClassName("class名")

三、通过标签名查找相应元素

document.getElementsByTagName("标签名")

四、通过querySelector来获取

document.querySelector('.name')

五、给其查找到的元素添加样式

var span=document.body.getElementsByTagName("span")[0];//从查找结果的类数组对象中取出保存在第一个位置的唯一一个DOM元素对象。
span.style.color="red";

六、属性操作（不符合w3c标准的）

var imgElement = document.querySelector('img');

//设置img标签的属性值

imgElement.setAttribute('src','img/wzx.jpg');

imgElement.setAttribute('width','800px');

//获取img标签的属性值

var srcValue = imgElement.getAttribute('src');

Ⅱ、vue里DOM用法

一、单个获取dom元素(使用ref来获取DOM元素)

this.$refs.element

二、在vue3里面

import { ref} from 'vue'

const valRef=ref()

valRef.value.xx()

valRef.value.xx=xxx