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

Dom7 — это легковесная библиотека для работы с DOM, которая обеспечивает удобный синтаксис для манипуляций с элементами, включая работу с текстом. Работа с текстовым содержимым является одной из основных операций при динамическом изменении интерфейса на странице. В Dom7 это реализуется через методы text() и html(), а также через работу с атрибутами и свойствами элементов.

Метод text()

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

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

const content = $('.my-element').text();
console.log(content);

Если выбрано несколько элементов, метод вернет текст первого элемента из коллекции.

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

$('.my-element').text('Новый текст');

В этом случае текстовое содержимое всех выбранных элементов будет заменено на указанное значение.

Особенности метода text():

  • Игнорирует HTML-разметку внутри элементов.
  • Автоматически экранирует специальные символы (<, >, &) при вставке текста.
  • Работает с коллекцией элементов одновременно, что упрощает массовые изменения контента.

Метод html()

Метод html() предназначен для работы с HTML-контентом внутри элементов. Он позволяет вставлять как простой текст, так и полноценную разметку.

Получение HTML-кода:

const htmlContent = $('.my-element').html();
console.log(htmlContent);

Возвращается строка с внутренней разметкой первого элемента коллекции.

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

$('.my-element').html('<strong>Жирный текст</strong>');

Все выбранные элементы получат новую HTML-разметку.

Особенности метода html():

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

Комбинирование text() и html() с функциями обратного вызова

Оба метода поддерживают передачу функции в качестве аргумента. Функция получает индекс текущего элемента и его текущее значение. Возвращаемое значение функции станет новым содержимым.

Пример с текстом:

$('.item').text(function(index, oldText) {
  return oldText + ' (' + (index + 1) + ')';
});

Пример с HTML:

$('.item').html(function(index, oldHtml) {
  return `<span>${oldHtml}</span>`;
});

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

Добавление и удаление текста без перезаписи всего содержимого

Для вставки текста в начало или конец элемента можно использовать методы append(), prepend(), appendTo(), prependTo().

Добавление текста в конец:

$('.my-element').append(' Дополнительный текст');

Добавление текста в начало:

$('.my-element').prepend('Начало текста ');

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

Работа с пустыми элементами и проверка содержимого

Dom7 предоставляет удобные способы для проверки, содержит ли элемент текст.

if ($('.my-element').text().trim() === '') {
  console.log('Элемент пустой');
}

Метод trim() удаляет пробелы в начале и конце строки, что важно при динамической подстановке данных.

Особенности работы с текстом и производительность

  • Dom7 оптимизирован для работы с множеством элементов, поэтому массовое изменение текста выполняется эффективно.
  • При работе с большим количеством данных предпочтительно использовать методы с функциями обратного вызова, чтобы избежать лишних обходов DOM.
  • Для вставки текста, не содержащего HTML, рекомендуется использовать text(), чтобы избежать потенциальных уязвимостей и проблем с экранированием.

Итоговые рекомендации

  • text() — для безопасного вставления простого текста.
  • html() — для вставки разметки и сложного контента.
  • append() и prepend() — для добавления текста или HTML без перезаписи всего содержимого.
  • Функции обратного вызова позволяют динамически формировать содержимое на основе текущего состояния элементов.
  • Проверка пустого текста и очистка пробелов обеспечивают корректное управление визуальными и логическими состояниями элементов.

Эффективное использование этих методов позволяет создавать динамические интерфейсы, управлять текстовым и HTML-контентом без громоздких обходов DOM и избыточного кода.

Оглавление