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

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

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

javaScript

1 根據(jù)ID獲取

get 獲得 element 元素 by 通過(guò)

返回的是一個(gè)元素對(duì)象

document.getElementById('ID');

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

get 獲得 element 元素 by 通過(guò) Tag標(biāo)簽 Name名字

返回帶有指定標(biāo)簽名的對(duì)象的集合以偽數(shù)組的形式存儲(chǔ)

document.getElementsByTagName('標(biāo)簽名');

3 通過(guò)HTML5新增的方法獲取

document.getElementsByClassName('類名') 需要加下標(biāo) 因?yàn)閏lass可以有多個(gè)元素

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

querySelectorAll('?') 參數(shù)是css選擇器，會(huì)返回全部該選擇器集合通過(guò)下標(biāo)獲取單個(gè)元素

vue獲取元素及兄弟元素，父級(jí)元素

先添加ref

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

獲取對(duì)象

let a = this.$refs.divBox

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

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

附：vue遍歷過(guò)程中獲取元素

在開(kāi)發(fā)時(shí)遇到需要遍歷設(shè)備集合，并且一個(gè)集合對(duì)應(yīng)一個(gè)視頻元素(video)的問(wèn)題

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

首先是循環(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">實(shí)時(shí)溫度信息</el-row>
            <el-row style="height: 48px;">
              <el-col><span>當(dāng)前相機(jī)精確位置:{{ item.groupName }}</span></el-col>
            </el-row>
            <el-row style="height: 48px;">
              <el-col><span>當(dāng)前外表最低溫度:{{ item.tempMin }}℃</span></el-col>
            </el-row>
            <el-row style="height: 48px;">
              <el-col><span>當(dāng)前外表最高溫度:{{ item.tempMax }}℃</span></el-col>
            </el-row>
            <el-row style="height: 48px;">
              <el-col><span>當(dāng)前外表平均溫度:{{ 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ù)組所以每一個(gè)video元素需要綁定給不同ref，總的來(lái)說(shuō)如果你需要在組件的 JS 代碼中操作 <video> 元素，可以使用 ref 屬性，如果需要給 <video> 元素設(shè)置樣式或者 JS 代碼中無(wú)需操作該元素，可以使用 id 屬性。

然后是method

    async mwfs() {
        // Wfs 對(duì)象已經(jīng)存在，可以進(jìn)行后續(xù)操作
        if (Wfs.isSupported()) {
          // 循環(huán)遍歷設(shè)備列表
          //發(fā)送請(qǐng)求獲取當(dāng)前設(shè)備列表
          this.equipmentList = await this.getEquipmentTemp()
          for (let i = 0; i < this.equipmentList.length; i++) {
            const item = this.equipmentList[i];
            // // 發(fā)送同步請(qǐng)求獲取當(dāng)前溫度信息
            // const res = await EquipTemp(item);
            // this.equipmentTempList.push(res.data)
            // 使用異步操作加載視頻源
            await new Promise(async resolve => { // 將 Promise 函數(shù)添加 async 關(guān)鍵字標(biāo)識(shí)
              //保證獲取最新的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)有以下原因

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

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

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

tips:只需要將元素打印出來(lái)，如果不是undefined是對(duì)應(yīng)的元素即為獲取到元素