1. uniapp层级多获取不到dom
在进行uniapp开发的过程中，因为组件的层层嵌套，导致有时候无法直接获取某个特定的DOM元素。这时候，我们该怎么办呢？本文将从以下几个方面进行探讨：
通过选择器获取DOM元素
通过refs获取DOM元素
通过alternation事件获取DOM元素
1.1 通过选择器获取DOM元素
在uniapp中，我们可以通过微信小程序提供的API wx.createSelectorQuery() 获取页面某个节点的信息。具体步骤如下：
使用API获取相关的节点信息，代码如下：
wx.createSelectorQuery().select('#dom').boundingClientRect(function(rect) {
console.log(rect)
}).exec()
其中，'#dom'为要获取节点的选择器。
获取到节点后，我们就可以操作该节点了。比如修改节点的class、style等属性。代码如下：
wx.createSelectorQuery().select('#dom').boundingClientRect(function(rect) {
console.log(rect)
rect.dom.classList.add('active');
rect.dom.style.backgroundColor = 'red';
}).exec()
1.2 通过refs获取DOM元素
在模板中我们可以通过给某个DOM元素添加 ref 属性来获取该元素。具体步骤如下：
在模板中添加dom元素，添加ref属性
< view ref="dom" >这是要获取的元素< /view >在页面中使用this.$refs来获取该元素，代码如下：
this.$refs.dom.classList.add('active');
this.$refs.dom.style.backgroundColor = 'red';
1.3 通过alternation事件获取DOM元素
对于一些无法使用refs或者选择器获取DOM元素的情况，我们可以使用 uniapp 提供的alternation事件来获取相关的节点信息。
onLoad() {
this.$nextTick(() = > {
uni.createIntersectionObserver(this, {observeAll: true}).relativeToViewport().observe('.dom', (res) => {
console.log(res);
if (res.intersectionRatio > 0) {
console.log('在可视区域内');
} else {
console.log('不在可视区域内');
}
});
});
}
其中，observeAll: true 表示观察所有的节点。参数'.dom'为要观察的节点，res为观察到的节点信息，res.intersectionRatio大于0表示节点在可视区域内。
2. 总结
以上三种方法，应该能够解决大部分层级多获取不到DOM元素的问题。如果还有其他问题，可以在uniapp的官网或者相关的社区中提出。