vue页面中使用getElementsByClassName无法获取元素的解决
投稿：jingxian
这篇文章主要介绍了vue页面中使用getElementsByClassName无法获取元素的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
一、问题描述
在vue页面中，使用getElementsByClassName获取dom，发觉总是获取不到，返回的数组，空空如也，长度为0。
二、问题分析
据说这是由于vue的机制造成的。 需要等所有内容都挂载完毕才行。
具体内容可见参看这篇文章。要使用nextTick。
我印象中，nextTick好像总是与onMounted一起使用。但其实不是。
以下例子中，nextTick就没有跟onMounted放在一起，而是位于外部调用的开关方法，跟随事件而触发。
三、问题解决
以下代码，是一个组件，响应外部调用传过来的参数，展示或隐藏不同的内容，并且执行初始化动作。
初始化时，需要使用getElementsByClassName获取dom。
初始化方法需要放在nextTick()里执行，才能获取指定class的dom。
<template>
<div id="tjContainer">
<div v-if="state.water" class="tj-container">内容一</div>
<div v-if="state.zone" class="tj-container">内容二</div>
<div v-if="state.red" class="tj-container">内容三</div>
</div>
</template>
<script setup>
const state = reactive({
targ: "",
water: false,
zone: false,
red: false,
});
const showOrHide = (targ, status) => {
state.targ = targ;
const t = targ.toLowerCase();
if (t === "water") state.water = status;
else if (t === "zone") state.zone = status;
else if (t === "red") state.red = status;
nextTick(() => {//nextTick，不一定要用在onMounted里
dragInit();
});
};
const show = (targ) => {
showOrHide(targ, true);
};
const hide = (targ) => {
showOrHide(targ, false);
};
defineExpose({ show, hide });//外部可以调用这两个方法
function dragInit() {
const dom = document.getElementById("tjContainer");
const els = dom.getElementsByClassName("tj-container");
if (els.length === 0) {
console.log("找不到class='tj-container'的元素");
return;
}
const drag = els[0];
//大展宏图，吧啦吧啦吧啦
}
</script>
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。