javaScript與vue獲取元素的方法代碼示例

更新時間：2023年10月08日 11:56:35 作者：小宛碎碎冰

在開發(fā)中我們可能會遇到這樣的問題,文本框聚焦、元素點擊等,所以下面這篇文章主要給大家介紹了關于javaScript與vue獲取元素的相關資料,需要的朋友可以參考下

javaScript

1 根據(jù)ID獲取

get 獲得 element 元素 by 通過

返回的是一個元素對象

document.getElementById('ID');

2 根據(jù)標簽名獲取

get 獲得 element 元素 by 通過 Tag標簽 Name名字

返回帶有指定標簽名的對象的集合以偽數(shù)組的形式存儲

document.getElementsByTagName('標簽名');

3 通過HTML5新增的方法獲取

document.getElementsByClassName('類名') 需要加下標因為class可以有多個元素

querySelector('?') 參數(shù)是css選擇器，只能返回一個元素（最上面的元素）

querySelectorAll('?') 參數(shù)是css選擇器，會返回全部該選擇器集合通過下標獲取單個元素

vue獲取元素及兄弟元素，父級元素

先添加ref

<div class="" ref="divBox">

獲取對象

let a = this.$refs.divBox

獲取父、子、兄弟節(jié)點方法

var b = a.childNodes; 獲取a的全部子節(jié)點
var c = a.parentNode; 獲取a的父節(jié)點
var d = a.nextSbiling; 獲取a的下一個兄弟節(jié)點
var d = a.nextElementSibling; 獲取a的下一個兄弟節(jié)點
var e = a.previousSbiling;獲取a的上一個兄弟節(jié)點
var e = a.previousElementSibling;獲取a的上一個兄弟節(jié)點
var f = a.firstChild; 獲取a的第一個子節(jié)點
var g = a.lastChild; 獲取a的最后一個子節(jié)點

附：vue遍歷過程中獲取元素

在開發(fā)時遇到需要遍歷設備集合，并且一個集合對應一個視頻元素(video)的問題

這里主要展示vue遍歷過程中如何取出元素的方法以及一些坑

首先是循環(huán)

    <el-row style="margin-bottom: 10px;">
      <template v-for="(item, index) in equipmentTempList">
        <el-col :xs="24" :sm="24" :md="12" :lg="4">
          <el-card class="update-log">
            <el-row style="text-align: center; margin-bottom: 40px">實時溫度信息</el-row>
            <el-row style="height: 48px;">
              <el-col><span>當前相機精確位置:{{ item.groupName }}</span></el-col>
            </el-row>
            <el-row style="height: 48px;">
              <el-col><span>當前外表最低溫度:{{ item.tempMin }}℃</span></el-col>
            </el-row>
            <el-row style="height: 48px;">
              <el-col><span>當前外表最高溫度:{{ item.tempMax }}℃</span></el-col>
            </el-row>
            <el-row style="height: 48px;">
              <el-col><span>當前外表平均溫度:{{ item.tempAvg }}℃</span></el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="8">
          <div style="height: 296px; width: 489px">
            <video :ref="'videoRef_' + index" :id="'video_' + index" height="285" width="400" muted="muted"
                   autoplay="autoplay"></video>
          </div>
        </el-col>
      </template>
    </el-row>

綁定ref元素是為了獲取video元素，并且由于是數(shù)組所以每一個video元素需要綁定給不同ref，總的來說如果你需要在組件的 JS 代碼中操作 <video> 元素，可以使用 ref 屬性，如果需要給 <video> 元素設置樣式或者 JS 代碼中無需操作該元素，可以使用 id 屬性。

然后是method

    async mwfs() {
        // Wfs 對象已經(jīng)存在，可以進行后續(xù)操作
        if (Wfs.isSupported()) {
          // 循環(huán)遍歷設備列表
          //發(fā)送請求獲取當前設備列表
          this.equipmentList = await this.getEquipmentTemp()
          for (let i = 0; i < this.equipmentList.length; i++) {
            const item = this.equipmentList[i];
            // // 發(fā)送同步請求獲取當前溫度信息
            // const res = await EquipTemp(item);
            // this.equipmentTempList.push(res.data)
            // 使用異步操作加載視頻源
            await new Promise(async resolve => { // 將 Promise 函數(shù)添加 async 關鍵字標識
              //保證獲取最新的DOM元素
              this.$nextTick(() => {
                const videoRef = this.$refs[`videoRef_${i}`][0];
                console.log(videoRef)
                const wfs = new Wfs();
                wfs.attachMedia(videoRef, item.id);
                this.videos.push(wfs)
                wfs.on(Wfs.Events.MEDIA_ATTACHED, () => {
                  videoRef.play();
                  resolve();
                });
              });
            });
          }
      }
    },

在這段代碼中，首先是for循環(huán)，為什么不采用foreach循環(huán)有以下原因

->首先就是先獲取了設備列表然后采用了異步操作加載視頻源可以避免阻塞主線程，提高頁面響應速度，并且在加載多個視頻時，異步操作可以同時進行，進一步提高效率。

->其次就是在foreach循環(huán)中無法等待異步操作完成再執(zhí)行下一步循環(huán)的問題，因此容易出現(xiàn)數(shù)據(jù)錯亂或者遺漏等問題。

然后這里的this.$nextTick是為了保證我們的video元素已經(jīng)是最新的才進行視頻加載，獲取元素的方法是通過this.$refs[`videoRef_${i}`][0]獲取的，因為ref是可以綁定多個元素的，而我們是一個設備對應一個視頻的，所以只需要取ref數(shù)組的第一個元素即可。

tips:只需要將元素打印出來，如果不是undefined是對應的元素即為獲取到元素