Получение и изменение value

Dom7 — это компактная библиотека для работы с DOM, активно используемая во фреймворке Framework7, предоставляющая удобные методы для поиска элементов, работы с классами, атрибутами, событиями и значениями элементов. Одним из ключевых аспектов взаимодействия с формами является получение и изменение значения элементов через свойство value.

Получение значения элемента

Для извлечения значения из полей формы (input, textarea, select) используется метод .val(). При вызове без аргументов он возвращает текущее значение первого элемента в выборке.

var inputValue = Dom7('input[name="username"]').val();
console.log(inputValue);

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

  • Работает только с элементами, поддерживающими value.
  • Для множественных элементов возвращается значение первого найденного.
  • Для select возвращается выбранное значение, а для множественного выбора — массив выбранных опций.

Пример с select и множественным выбором:

var selectedValues = Dom7('select[multiple]').val();
console.log(selectedValues); // ['option1', 'option3']

Для проверки текущего состояния checkbox или radio удобно комбинировать .val() с .prop('checked'):

var isChecked = Dom7('input[type="checkbox"]').prop('checked');
console.log(isChecked); // true или false

Изменение значения элемента

Метод .val() также используется для задания значения элемента. В отличие от обычного присваивания через element.value, Dom7 позволяет изменять значения сразу для всех выбранных элементов:

Dom7('input[name="username"]').val('newUser');

Для множественных элементов это особенно удобно:

Dom7('input[type="text"]').val('default');

В этом случае каждый текстовый input в выборке получит значение 'default'.

Для select можно задавать как одну опцию, так и массив значений для множественного выбора:

// одиночный выбор
Dom7('select[name="country"]').val('ru');

// множественный выбор
Dom7('select[multiple]').val(['option1', 'option2']);

Работа с динамическими значениями

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

Dom7('input[name="score"]').val(function(index, oldValue) {
    return parseInt(oldValue) + 10;
});

Пояснение параметров функции:

  • index — порядковый номер элемента в выборке.
  • oldValue — текущее значение элемента перед изменением.

Это позволяет выполнять массовые операции без явных циклов.

Особенности работы с textarea

Для textarea метод .val() работает так же, как и с input[type="text"]. Получение возвращает текстовое содержимое, а установка изменяет текст:

// Получение текста
var message = Dom7('textarea[name="comment"]').val();

// Установка нового текста
Dom7('textarea[name="comment"]').val('Новый комментарий');

Обработка событий при изменении value

Изменение значения через .val() не вызывает события input или change автоматически. Если требуется, чтобы эти события срабатывали, их необходимо триггерить вручную:

Dom7('input[name="username"]').val('user123').trigger('change');

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

Получение значения у нестандартных элементов

Dom7 позволяет работать и с другими HTML-элементами, не имеющими стандартного value, через .attr():

var customValue = Dom7('.custom-element').attr('data-value');
Dom7('.custom-element').attr('data-value', 'newValue');

Хотя это не относится напрямую к val(), комбинирование .val() и .attr() расширяет возможности работы с данными на странице.

Совместимость с цепочкой методов

Метод .val() полностью поддерживает цепочки Dom7. Например, можно сразу задать значение и добавить класс:

Dom7('input[name="email"]').val('user@example.com').addClass('filled');

Это делает код лаконичным и удобным для массовых операций с формами и динамическим контентом.

Итоговые рекомендации по использованию val()

  • Для получения используйте .val() без аргументов.
  • Для изменения значения передавайте строку, число, массив или функцию.
  • Для множественных элементов изменение применяется ко всем сразу.
  • Изменение значения не вызывает события input и change — при необходимости их нужно триггерить вручную.
  • Для нестандартных атрибутов или данных лучше использовать .attr().

Метод .val() в Dom7 обеспечивает простой и мощный способ взаимодействия с формами и полями ввода, объединяя удобство jQuery-подобного синтаксиса с современными возможностями JavaScript.

Оглавление