> For the complete documentation index, see [llms.txt](https://bemtv.gitbook.io/bemtvjs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bemtv.gitbook.io/bemtvjs/dom-elements.md).

# DOM Elements

Bemtv offers helper functions to make it easier to manage and manipulate a DOM element.

### ElManager

All functions for getting elements from the DOM at some point return an  instance, which makes it easier to manage the element.

#### ElManager.el

Allows access to the real DOM element.

#### ElManager.css()

Allows you to add CSS-in-JS to the element.

> This method can be called even before the element is added to the DOM, the style will be scheduled and applied as soon as the element is available.

#### ElManager.anyDOMEvent()

You can add any event from the instance, it works exactly the same as adding events from the component instance:

```javascript
ElManager.click$(()=>{})
```

### useElManager()

Allows you to bind an instance to handle a real DOM element to an element in the template:

```javascript
import { _, useElManager } from "bemtv";

const { onMount, template } = _`Hey`();

const elManagerFn = useElManager();

onMount(() => {
  const elManager = elInstFn();
});

template`h1[ ${elInstFn} Hey!]`;
```

When calling the `useElementInst()`, you will have as return another function that must be inserted the tag of the element in the template.

> This function has a “key” property that bemtv automatically accesses when the template is defined as a TemplateStringsArray.

When calling the function, you will get an instance as return that facilitates the management of the DOM element.

> The function should only be called on callbacks that the component can handle, so that it returns a handling instance of the element correctly even if the component is used multiple times:

### useFirstElManager()

This function directly accesses the first element of the component and returns an instance to manage it:

```javascript
import { _, useFirstElManager } from "bemtv";

const { onMount, template } = _`Hey`();

onMount(() => {
  const elManager = useFirstElManager();
});

template`h1[ Hey!]`;
```

> This function should only be called on callbacks that the component can handle, so that it returns a handling instance of the element correctly even if the component is used multiple times:

### createElManager()

This function creates an instance to manage the element from a selector or element:

```typescript
import { createElManager } from "bemtv";

const elManager = createElManager("#app");
```