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

<Meta title='@dxtmisha/vi/functional-basic/# DOM & Phần tử'/>

# DOM & Phần tử

Bộ tiện ích để đơn giản hóa công việc với cây DOM. Bao gồm các phương thức để tra cứu phần tử an toàn, tạo nút động với các thuộc tính, cuộn thông minh và kiểm tra trạng thái đối tượng trong môi trường trình duyệt.

## Truy xuất và Tra cứu

Các hàm để trích xuất các phần tử bằng các bộ chọn hoặc tham chiếu với các kiểm tra môi trường chạy tự động.

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

// 1. Lấy một phần tử bằng bộ chọn hoặc tham chiếu
const container = getElement('#app')

// 2. Tìm kiếm trong một cha cụ thể (tìm kiếm theo phạm vi)
const button = domQuerySelector('.btn-submit', container)
```

## Tạo và Thuộc tính

Một cách thuận tiện để tạo các cấu trúc HTML và quản lý các thuộc tính của chúng mà không cần sử dụng các API gốc cồng kềnh.

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

// 1. Tạo một phần tử div bên trong #app với các thuộc tính
const el = createElement(document.getElementById('app'), 'div', {
  className: 'p-4 active',
  innerHTML: '<span>Hello World</span>',
  id: 'dynamic-node'
})

// 2. Thiết lập/cập nhật các thuộc tính của phần tử
setElementItem(el, 'title', 'Chú thích khi di chuột')
```

## Điều hướng và Cuộn

Các tiện ích để quản lý việc cuộn vùng chứa và đảm bảo khả năng hiển thị của phần tử.

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

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

// 1. Cuộn vùng chứa đến một phần tử cụ thể
goScrollTo(list, item, 'smooth')

// 2. Cuộn mượt trang lên đầu
goScrollSmooth(0)
```

## Kiểm tra trạng thái

Các hàm trợ giúp để xác định loại phần tử và sự hiện diện của chúng trong tài liệu hiện tại.

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

// 1. Kiểm tra xem một phần tử có được gắn vào DOM hay không
if (isInDom(el)) {
  console.log('Phần tử nằm trong cây DOM')
}

// 2. Kiểm tra xem một phần tử có hiển thị hay không (không bị ẩn bởi CSS)
if (isElementVisible(el)) {
  console.log('Phần tử hiển thị với người dùng')
}

// 3. Kiểm tra xem một nút có phải là trường nhập liệu hay không
if (isInput(el)) {
  el.focus()
}
```
