首页uniapp 不使用document，然后根据html元素id 获取到当前的元素，比如 <div id='main'> <span></span> </div> 通过 id main 获取到元素本身

uniapp 不使用document，然后根据html元素id 获取到当前的元素，比如 <div id='main'> <span></span> </div> 通过 id main 获取到元素本身

时间: 2023-12-07 13:06:09 浏览: 185

在 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 对象。

阅读全文