# Alpine.js Documentation - Directives

Alpine directives are attributes that you can add to HTML elements to give them special behavior.

## [x-ref](/directives/ref)

`x-ref` in combination with `$refs` is a useful utility for easily accessing DOM elements directly. It's most useful as a replacement for APIs like `getElementById` and `querySelector`.

```
<button @click="$refs.text.remove()">Remove Text</button>

<span x-ref="text">Hello 👋</span>
```

Hello 👋

> Despite not being included in the above snippet, `x-ref` cannot be used if no parent element has `x-data` defined. [→ Read more about `x-data`](/directives/data)

[← x-ignore](/directives/ignore)

[x-cloak →](/directives/cloak)

Code highlighting provided by [Torchlight](https://torchlight.dev/)