Чтение и установка текстового содержимого

Umbrella JS предоставляет удобные методы для работы с текстом внутри элементов DOM, обеспечивая простую альтернативу стандартным методам JavaScript. Основной подход строится на цепочках вызовов, что позволяет работать с множеством элементов одновременно и легко комбинировать операции.

Метод .text()

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

Чтение текста:

u('p').text();
  • Возвращает текстовое содержимое первого элемента коллекции.
  • Если коллекция пуста, возвращается undefined.
  • Текст собирается из всех дочерних текстовых узлов элемента, игнорируя HTML-разметку.

Пример:

Привет, мир!


console.log(u('p').text()); // "Привет, мир!"

Здесь тег не влияет на результат, текст объединяется.

Установка текста:

u('p').text('Новый текст');
  • Заменяет все существующие дочерние узлы на новый текст.
  • Автоматически экранирует специальные символы HTML (<, >, &), предотвращая выполнение HTML-кода внутри текста.

Пример:

u('p').text('Важное сообщение');
// В документе будет отображаться как Важное сообщение, а не жирным.

Множественные элементы

Если селектор выбирает несколько элементов, метод .text() применяет установку текста ко всем выбранным элементам одновременно.

u('li').text('Элемент списка');

Все

  • на странице будут содержать один и тот же текст.

    Для чтения .text() возвращает текст только первого элемента коллекции:

    console.log(u('li').text()); // текст первого

    • Комбинация с другими методами Umbrella JS

    Umbrella JS поддерживает цепочку вызовов. Это особенно полезно при комбинировании операций с текстом и другими манипуляциями.

    Пример:

    u('p')
  .text('Обновленный текст')
  .addClass('highlight')
  .show();
    • Текст заменяется на "Обновленный текст".
    • Элементу добавляется класс highlight.
    • Элемент становится видимым, если был скрыт.

    Такой подход сокращает количество обращений к DOM и делает код более читаемым.

    Работа с динамическим содержимым

    Метод .text() отлично подходит для вставки динамических значений, полученных из API или форм:

    const data = { message: 'Привет, мир!' };
u('#output').text(data.message);
    • Позволяет безопасно вставлять любые строки без риска выполнения HTML.
    • Экранирование символов происходит автоматически.

    Особенности и ограничения

    1. .text() не обрабатывает HTML. Для работы с HTML содержимым нужно использовать метод .html().
    2. При установке текста удаляются все дочерние узлы, включая элементы и комментарии.
    3. Для больших коллекций элементов операция эффективна, так как Umbrella JS использует внутренние оптимизации обхода DOM.

    Итоговые правила использования .text()

    • Использовать для безопасного отображения текста без HTML.
    • Чтение возвращает значение только первого элемента.
    • Установка применяется ко всем выбранным элементам коллекции.
    • Метод полностью совместим с цепочками вызовов для комбинированных операций.
    • Оглавление