Получение и установка текста

Cash — это компактная, лёгкая библиотека для работы с DOM, вдохновлённая jQuery, но ориентированная на современные браузеры и высокую производительность. Её вес составляет всего несколько килобайт, что делает её оптимальным выбором для проектов, где важна скорость загрузки.

Установка через npm

Для проектов с использованием Node.js и систем сборки (Webpack, Vite, Parcel) Cash можно установить через npm или Yarn:

npm install cash-dom

или

yarn add cash-dom

После установки подключение в коде выглядит следующим образом:

import $ from 'cash-dom';

Это позволяет использовать $ как главный объект для работы с DOM, аналогично jQuery.

Подключение через CDN

Если сборка не используется, Cash можно подключить через CDN. Наиболее популярный вариант:

После этого глобальный объект $ становится доступным для манипуляций с DOM.

Выбор элементов DOM

Cash использует синтаксис CSS-селекторов для выбора элементов. Это основной способ взаимодействия с DOM:

// Получение всех элементов с классом "item"
const items = $('.item');

// Получение элемента по ID
const main = $('#main');

// Получение всех тегов 

const paragraphs = $('p');

Особенности работы с Cash:

  • Возвращаемый объект всегда массивоподобный. Даже при выборе одного элемента, результат можно перебирать через forEach.
  • Поддерживаются цепочки методов, что позволяет писать компактный и читаемый код.

Получение и изменение текста элементов

Для работы с текстом в Cash предусмотрены методы .text() и .html().

Метод .text()

Метод .text() служит для получения или установки текстового содержимого выбранных элементов.

// Получение текста первого элемента
const content = $('.item').text();

// Установка текста для всех элементов с классом "item"
$('.item').text('Новый текст');

Особенности:

  • Если аргумент не передан, метод возвращает текстовое содержимое первого выбранного элемента.
  • Если аргумент передан, текст заменяется у всех выбранных элементов.
  • Поддерживается передача функции для динамического изменения текста:
$('.item').text((index, oldText) => `Элемент ${index}: ${oldText}`);

Метод .html()

Метод .html() работает с HTML-содержимым элементов.

// Получение HTML первого элемента
const htmlContent = $('.item').html();

// Замена HTML всех элементов
$('.item').html('Обновлённый контент');

Особенности:

  • Поддерживает передачу функции для динамического формирования содержимого.
  • Позволяет вставлять HTML-код напрямую, что удобно для сложных структур.

Атрибут value и работа с формами

Для полей формы Cash предоставляет метод .val():

// Получение значения поля input
const value = $('#username').val();

// Установка значения для поля
$('#username').val('admin');

Особенности:

  • Работает с ,