---
title: 'Refs'
description: 'Out-of-band DOM access'
---

The `ref` keyword can be used inside of any HTML element or component to get the DOM `Element` that
the item is attached to. This can be used to make changes to the DOM outside of the `view` lifecycle
method.

This is useful for getting ahold of canvas elements, or scrolling to different sections of a page.
For example, using a `NodeRef` in a component's `rendered` method allows you to make draw calls to
a canvas element after it has been rendered from `view`.

The syntax is:

```rust
use yew::{html, NodeRef, web_sys::Element};

// In create
self.node_ref = NodeRef::default();

// In view
html! {
    <div ref=self.node_ref.clone()></div>
}

// In rendered
let has_attributes = self.node_ref.cast::<Element>().unwrap().has_attributes();
```

## Relevant examples

-   [Node Refs](https://github.com/yewstack/yew/tree/v0.18/examples/node_refs)
