---
name: "getElementById"
mode: "kit"
versionRequirements:
  - { name: "@ray-js/ray", version: "0.5.10" }
---

## getElementById

> [VERSION] @ray-js/ray >= 0.5.10

### Description

Get a page node

### Parameters

`Params`

| Parameter | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `id` | `string` | Yes | - | The value of the node's id attribute |

### Referenced Types

##### `interface` BoundingClientRectResult

| Property | Type | Description |
| --- | --- | --- |
| `id` | `string` | Node id |
| `dataset` | `Record<string, unknown>` | Node dataset |
| `left` | `number` | Left boundary coordinate |
| `right` | `number` | Right boundary coordinate |
| `top` | `number` | Top boundary coordinate |
| `bottom` | `number` | Bottom boundary coordinate |
| `width` | `number` | Node width |
| `height` | `number` | Node height |

##### `interface` SelectorQueryChain

| Property | Type | Description |
| --- | --- | --- |
| `exec` | `(callback: (results: unknown[]) => void) => void` | Execute query |

##### `interface` ScrollOffsetResult

| Property | Type | Description |
| --- | --- | --- |
| `id` | `string` | Node id |
| `dataset` | `Record<string, unknown>` | Node dataset |
| `scrollLeft` | `number` | Horizontal scroll position |
| `scrollTop` | `number` | Vertical scroll position |


### Examples

#### Basic usage

```tsx
import React from 'react';
import { View, Button, Text, getElementById } from '@ray-js/ray';

export default function Demo() {
  const handleGetElement = async () => {
    const element = await getElementById('targetView');
    console.log('Node reference:', element);
  };

  return (
    <View style={{ padding: 20 }}>
      <View
        id="targetView"
        style={{
          height: 100,
          backgroundColor: '#1890ff',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <Text style={{ color: '#fff' }}>Target node</Text>
      </View>
      <Button style={{ marginTop: 10 }} onClick={handleGetElement}>
        Get node reference
      </Button>
    </View>
  );
}
```