js/vue/tsx 中获取dom元素的方法集合

前言：

        整理下常用的获取dom元素的方法。

js:

1、原始的class/id

// 拿到唯一的一个dom元素
document.getElementById('abc')
 
// 比id多了一个s，并且拿到dom是一个数组
document.getElementsBClassName('abc') 
 
// 拿到指定的标签的元素，是一个数组
document.getElementsByTagName("div")
 
// 拿到元素身上的name值为abc的，数组
document.getElementsByName('abc') 

2、进阶版

// 1、获取单个元素
document.querySelector('.abc') //页面上的第一个
document.querySelector('#abc')

// 2、获取所有的元素

document.querySelectorAll('abc')

vue

1、class名、id名获取，跟上面的一样

2、ref、refs获取

this.$refs.abc //拿到dom元素

vue3+tsx

import {  ref } from 'vue'

const searchByte = ref('')

// input的双向绑定

import {  ref } from 'vue'
 
const scrollRef = ref();
 
<el-scrollbar ref={scrollRef}>el-scrollbar>

*** 因为 虽然 同是使用element的el-scrollbar  的标签，但是获取dom元素的方法是不同的，如果下面无法使用，需要你在界面上重新找下对应的dom元素。

// 获取滚动区域的属性
 
const domHeitht = scrollRef.value.wrap$.clientHeight;
 
const allHeitht = scrollRef.value.wrap$.scrollHeight;
 
 
 
// 修改他的滚动条位置
 
scrollRef.value.wrap$.scrollTop = 43;
 
 
 
// 如果上面的dom找不到，赋值不成功，就用下面的试试
 
scrollRef.value.$refs.wrap$.scrollTop = 36