Retrieving Node Information on the User Interface

DLT Node Information

Node information querying APIs can be used to obtain information about nodes' attributes, styles, positions on the interface, and more.

The most common use case is to use this interface to query the current position of a specific node and the scrolling position of the interface.

Sample code:

const query = dlt.createSelectorQuery();
query.select("#the-id").boundingClientRect(function (res) {
  res.top; // The top boundary coordinate of the #the-id node (relative to the display area)
});
query.selectViewport().scrollOffset(function (res) {
  res.scrollTop; // Vertical scroll position of the display area
});
query.exec();

In the example above, #the-id is a node selector, which is similar to CSS selectors but with some differences. Please refer to the relevant documentation for SelectorQuery.select.

In custom components or pages that include custom components, it is recommended to use this.createSelectorQuery instead of dlt.createSelectorQuery. This ensures that nodes are selected within the correct scope.