首页 > 网络编程 > JavaScript > javascript类库 > vue.js > js与vue获取元素

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

2023-10-08 11:52:35 作者：小宛碎碎冰

在开发中我们可能会遇到这样的问题,文本框聚焦、元素点击等,所以下面这篇文章主要给大家介绍了关于javaScript与vue获取元素的相关资料,需要的朋友可以参考下

javaScript

1 根据ID获取

get 获得 element 元素 by 通过

返回的是一个元素对象

document.getElementById('ID');

2 根据标签名获取

get 获得 element 元素 by 通过 Tag标签 Name名字

返回带有指定标签名的对象的集合以伪数组的形式存储

document.getElementsByTagName('标签名');

3 通过HTML5新增的方法获取

document.getElementsByClassName('类名') 需要加下标因为class可以有多个元素

querySelector('?') 参数是css选择器，只能返回一个元素（最上面的元素）

querySelectorAll('?') 参数是css选择器，会返回全部该选择器集合通过下标获取单个元素

vue获取元素及兄弟元素，父级元素

先添加ref

<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的最后一个子节点

附：vue遍历过程中获取元素

在开发时遇到需要遍历设备集合，并且一个集合对应一个视频元素(video)的问题

这里主要展示vue遍历过程中如何取出元素的方法以及一些坑

首先是循环

    <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元素，并且由于是数组所以每一个video元素需要绑定给不同ref，总的来说如果你需要在组件的 JS 代码中操作 <video> 元素，可以使用 ref 属性，如果需要给 <video> 元素设置样式或者 JS 代码中无需操作该元素，可以使用 id 属性。

然后是method

    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();
                });
              });
            });
          }
      }
    },

在这段代码中，首先是for循环，为什么不采用foreach循环有以下原因

->首先就是先获取了设备列表然后采用了异步操作加载视频源可以避免阻塞主线程，提高页面响应速度，并且在加载多个视频时，异步操作可以同时进行，进一步提高效率。

->其次就是在foreach循环中无法等待异步操作完成再执行下一步循环的问题，因此容易出现数据错乱或者遗漏等问题。

然后这里的this.$nextTick是为了保证我们的video元素已经是最新的才进行视频加载，获取元素的方法是通过this.$refs[`videoRef_${i}`][0]获取的，因为ref是可以绑定多个元素的，而我们是一个设备对应一个视频的，所以只需要取ref数组的第一个元素即可。

tips:只需要将元素打印出来，如果不是undefined是对应的元素即为获取到元素

总结

到此这篇关于javaScript与vue获取元素的文章就介绍到这了,更多相关js与vue获取元素内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue.js获得当前元素的文字信息方法