javaScript与vue获取元素的方法代码示例

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

let a = this.$refs.divBox

var b = a.childNodes; 获取a的全部子节点
var c = a.parentNode; 获取a的父节点
var d = a.nextSbiling; 获取a的下一个兄弟节点
var d = a.nextElementSibling; 获取a的下一个兄弟节点
var e = a.previousSbiling;获取a的上一个兄弟节点
var e = a.previousElementSibling;获取a的上一个兄弟节点
var f = a.firstChild; 获取a的第一个子节点
var g = a.lastChild; 获取a的最后一个子节点

    <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>

    async mwfs() {
        // Wfs 对象已经存在，可以进行后续操作
        if (Wfs.isSupported()) {
          // 循环遍历设备列表
          //发送请求获取当前设备列表
          this.equipmentList = await this.getEquipmentTemp()
          for (let i = 0; i < this.equipmentList.length; i++) {
            const item = this.equipmentList[i];
            // // 发送同步请求获取当前温度信息
            // const res = await EquipTemp(item);
            // this.equipmentTempList.push(res.data)
            // 使用异步操作加载视频源
            await new Promise(async resolve => { // 将 Promise 函数添加 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();
                });
              });
            });
          }
      }
    },