uniapp 不使用document,然后根据html元素id 获取到当前的元素,比如 <div id='main'> <span></span> </div> 通过 id main 获取到 元素本身
时间: 2023-12-07 10:06:09 浏览: 135
在 uniapp 中,可以通过 `uni.createSelectorQuery()` 方法来根据元素 ID 获取到元素本身。该方法返回一个 `SelectorQuery` 对象,可以通过该对象的 `select(selector: string)` 方法来选取第一个匹配到的元素。
例如,可以通过以下代码选取 ID 为 `main` 的元素本身:
```javascript
uni.createSelectorQuery()
.select('#main')
.boundingClientRect(rect => {
console.log(rect); // 匹配到的元素本身
})
.exec();
```
其中,`boundingClientRect(callback: Function)` 方法可以获取匹配到的元素本身。在这个例子中,我们只是简单地输出这个元素到控制台上,你可以根据实际情况来处理这个元素。
需要注意的是,如果你要获取该元素的子元素,可以通过该元素的 `childNodes` 属性来获取,例如:
```javascript
uni.createSelectorQuery()
.select('#main')
.fields({
node: true,
size: true,
scrollOffset: true,
properties: ['childNodes']
}, res => {
const childNodes = res.childNodes;
console.log(childNodes); // 子元素列表
})
.exec();
```
其中,`fields(fields: Object, callback: Function)` 方法可以获取匹配到的元素的一些信息,例如它的位置、大小、滚动偏移量、属性等等。在这个例子中,我们通过在 `properties` 中添加 `childNodes` 来获取该元素的子元素列表。需要注意的是,通过 `fields()` 方法获取到的元素结构信息是一个类似于 HTML 字符串的形式,需要使用 `uni.htmlparser()` 方法来解析成 JSON 对象。
阅读全文