在uni-app中查询dom元素节点信息

我不是女神ヾ 2022-08-31 07:16 85阅读 0赞

查询节点信息的对象

### [selectorQuery.in(component)][selectorQuery.in_component] ###

将选择器的选取范围更改为自定义组件 `component` 内，返回一个 `SelectorQuery` 对象实例。（初始时，选择器仅选取页面范围的节点，不会选取任何自定义组件中的节点）。

**代码示例**

const query = uni.createSelectorQuery().in(this);
    query.select('#id').boundingClientRect(data => {
      console.log("得到布局位置信息" + JSON.stringify(data));
      console.log("节点离页面顶部的距离为" + data.top);
    }).exec();

**注意**

*  支付宝小程序不支持in(component)，使用无效果

### [selectorQuery.select(selector)][selectorQuery.select_selector] ###

在当前页面下选择第一个匹配选择器 `selector` 的节点，返回一个 `NodesRef` 对象实例，可以用于获取节点信息。

**selector 说明：**

`selector` 类似于 CSS 的选择器，但仅支持下列语法。

*  ID选择器：`#the-id`
 *  class选择器（可以连续指定多个）：`.a-class.another-class`
 *  子元素选择器：`.the-parent > .the-child`
 *  后代选择器：`.the-ancestor .the-descendant`
 *  跨自定义组件的后代选择器：`.the-ancestor >>> .the-descendant`
 *  多选择器的并集：`#a-node, .some-other-nodes`

### [selectorQuery.selectAll(selector)][selectorQuery.selectAll_selector] ###

[selectorQuery.in_component]: https://uniapp.dcloud.io/api/ui/nodes-info?id=selectorqueryin
[selectorQuery.select_selector]: https://uniapp.dcloud.io/api/ui/nodes-info?id=selectorqueryselect
[selectorQuery.selectAll_selector]: https://uniapp.dcloud.io/api/ui/nodes-info?id=selectorqueryselectall