问题
在mounted中使用document.getElementsByClassName能打印元素集但是不能访问
代码
mounted() {
this.handleDOM()
}
methods: {
handleDOM() {
let swiperEl = document.querySelector('.swiper') //获取swiper元素
let itemEls = swiperEl.getElementsByClassName('slide') //获取所有item个数
console.log(itemEls); //打印元素集合
console.log(itemEls.length);//打印元素个数
}
}
打印的元素集
捕获.PNG
先来说说mounted
以下出自官方文档
el 被新创建的 vm.
el 也在文档内。
注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以>用 vm.$nextTick 替换掉 mounted：
总结
mounted是当模板被渲染完，在挂载到实例上去，然后在执行钩子，但mounted不承诺
当所有的元素都加载完成在执行
所以在元素还没有全部加载完，就执行了js代码，所有才导致获取不到的原因
解决办法
这也是个笨办法，在以后的开发中可能会产生一定的bug
使用异步操作
setInterval(() => {
if (this.isLoad) {
this.handleDOM()
this.isLoad = false
}
},100)
所以在实际开发中我们要注意生命周期函数运行的实质
