Свойства элементов

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

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

Метод .prop() используется для работы с свойствами DOM, отличающимися от атрибутов. Основное отличие состоит в том, что свойства отражают текущее состояние элемента в браузере, тогда как атрибуты — исходные значения в разметке.

Синтаксис:

// Получение свойства
const value = $(selector).prop('propertyName');

// Установка свойства
$(selector).prop('propertyName', value);

Примеры:

// Получение состояния чекбокса
const isChecked = $('#checkbox').prop('checked');

// Установка состояния чекбокса
$('#checkbox').prop('checked', true);

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

// Установка значения поля ввода
$('#input').prop('value', 'Новый текст');

Работа с логическими свойствами

Для логических свойств, таких как checked, disabled, selected, важно использовать именно .prop(), а не .attr(). Это связано с тем, что атрибут может не обновляться при изменении состояния элемента через пользовательский ввод или скрипт.

// Деактивация кнопки
$('#submit').prop('disabled', true);

// Активация кнопки
$('#submit').prop('disabled', false);

Массивная установка свойств

Cash поддерживает передачу объекта для массовой установки нескольких свойств сразу. Это особенно удобно при необходимости синхронного изменения нескольких характеристик элементов.

$('#input').prop({
  value: 'Тест',
  disabled: false,
  checked: true
});

Такой подход уменьшает количество обращений к DOM и улучшает производительность при работе с множеством элементов.

Чтение нескольких элементов

При выборке нескольких элементов, метод .prop() возвращает значение свойства первого элемента в наборе. Это поведение аналогично jQuery и позволяет быстро получать состояние группы элементов без перебора.

const firstChecked = $('input[type="checkbox"]').prop('checked');

Если требуется получить значения всех элементов, необходимо использовать .map():

const allValues = $('input[type="text"]').map(function() {
  return $(this).prop('value');
}).get();

Свойства и методы встроенных элементов

Cash позволяет взаимодействовать с нативными свойствами DOM-элементов, включая методы форм, медиаэлементов и таблиц:

// Воспроизведение видео
$('#video').prop('currentTime', 10);
$('#video').prop('paused', false);

// Получение количества строк в таблице
const rowCount = $('#table').prop('rows').length;

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

Отличие .prop() от .attr()

  • .prop() работает с актуальным состоянием элемента в DOM.
  • .attr() возвращает значение атрибута, заданного в HTML или через скрипт с помощью .attr().

Пример различия:

<input id="checkbox" type="checkbox" checked>

$('#checkbox').attr('checked'); // "checked" — значение атрибута
$('#checkbox').prop('checked'); // true — текущее состояние

Работа с нестандартными свойствами

Метод .prop() также позволяет добавлять и изменять пользовательские свойства, которых нет в стандартном DOM:

$('#element').prop('customData', { foo: 42 });
const data = $('#element').prop('customData'); // { foo: 42 }

Это удобно для хранения дополнительной информации непосредственно на элементах без использования data-* атрибутов.

Советы по производительности

  1. Минимизировать количество вызовов .prop() внутри циклов.
  2. Использовать массовую установку свойств через объект.
  3. Предпочитать .prop() для логических и динамически изменяемых свойств.
  4. Для чтения свойств большого количества элементов применять .map() вместо итераций с .each().

Итоговая структура использования

// Получение
const value = $(selector).prop('propertyName');

// Установка
$(selector).prop('propertyName', value);

// Множественная установка
$(selector).prop({
  property1: value1,
  property2: value2
});

// Работа с массивом элементов
const values = $(selector).map(function() {
  return $(this).prop('propertyName');
}).get();

Свойства элементов в Cash предоставляют гибкий и эффективный способ управления состоянием DOM, сочетая удобство API с высокой производительностью при работе с динамическим содержимым.

Оглавление