import {Meta} from '@storybook/addon-docs/blocks'

<Meta title='@dxtmisha/ru/functional-basic/# DOM и Элементы'/>

# DOM и Элементы

Набор утилит для упрощения работы с DOM-деревом. Включает методы для безопасного поиска элементов, динамического создания узлов с атрибутами, умного скролла и проверки состояния объектов в среде браузера.

## Поиск и получение

Функции для извлечения элементов по селекторам или ссылкам с автоматической проверкой среды выполнения.

```javascript
import { getElement, domQuerySelector } from '@dxtmisha/functional-basic'

// 1. Получение элемента по селектору или ссылке
const container = getElement('#app')

// 2. Поиск внутри конкретного родителя (scoped search)
const button = domQuerySelector('.btn-submit', container)
```

## Создание и атрибуты

Удобный способ генерации HTML-структур и управления их свойствами без использования громоздкого нативного API.

```javascript
import { createElement, setElementItem } from '@dxtmisha/functional-basic'

// 1. Создание элемента div внутри #app с атрибутами
const el = createElement(document.getElementById('app'), 'div', {
  className: 'p-4 active',
  innerHTML: '<span>Hello World</span>',
  id: 'dynamic-node'
})

// 2. Установка/обновление свойств элемента
setElementItem(el, 'title', 'Подсказка при наведении')
```

## Навигация и скролл

Утилиты для управления прокруткой контейнеров и обеспечения видимости элементов.

```javascript
import { goScrollTo, goScrollSmooth } from '@dxtmisha/functional-basic'

const list = getElement('.scroll-container')
const item = getElement('.target-item')

// 1. Прокрутка контейнера к конкретному элементу
goScrollTo(list, item, 'smooth')

// 2. Плавный скролл страницы к верху
goScrollSmooth(0)
```

## Проверки состояния

Вспомогательные функции для определения типов элементов и их наличия в текущем документе.

```javascript
import { isInDom, isElementVisible, isInput } from '@dxtmisha/functional-basic'

// 1. Проверка, примонтирован ли элемент к DOM
if (isInDom(el)) {
  console.log('Элемент находится в дереве DOM')
}

// 2. Проверка, является ли элемент видимым (не скрыт через CSS)
if (isElementVisible(el)) {
  console.log('Элемент виден пользователю')
}

// 3. Проверка, является ли узел полем ввода
if (isInput(el)) {
  el.focus()
}
```
