Метод $.type()

Метод $.type() является одним из ключевых инструментов для работы с типами элементов в библиотеке Bliss.js. Он позволяет эффективно определять типы DOM-элементов, проверять их соответствие определённым тегам и интегрироваться с другими методами библиотеки для динамического управления элементами страницы.

Основной синтаксис

$.type(element)

element — DOM-элемент, либо селектор, который необходимо проверить. Может быть объектом, возвращаемым document.querySelector, $.create или любым другим способом получения элемента в Bliss.js.
Возвращаемое значение — строка, содержащая название тега элемента в нижнем регистре ('div', 'input', 'span' и т.д.).

Пример:

var btn = document.querySelector('button');
console.log($.type(btn)); // "button"

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

Проверка типа элемента

Метод $.type() часто используется для проверки соответствия элемента определённому типу перед применением к нему операций. Например:

var input = document.querySelector('input');

if ($.type(input) === 'input') {
    input.value = 'Пример текста';
}

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

Интеграция с другими методами Bliss.js

$.type() хорошо сочетается с методами создания и манипуляции DOM в Bliss.js:

$.create() — создание новых элементов с последующей проверкой типа:

var newDiv = $.create('div', { class: 'container' });

if ($.type(newDiv) === 'div') {
    newDiv.textContent = 'Новый контейнер';
}

$.each() — перебор коллекций элементов с фильтрацией по типу:

$.each(document.querySelectorAll('div, span'), function(el) {
    if ($.type(el) === 'span') {
        el.style.color = 'blue';
    }
});

$.on() — добавление событий с проверкой типа целевого элемента:

$.on(document.body, 'click', function(event) {
    if ($.type(event.target) === 'button') {
        console.log('Клик по кнопке');
    }
});

Особенности работы с нодами и фрагментами

Метод корректно определяет тип стандартных элементов, включая input, textarea, select, option, ul, li и другие. Для DocumentFragment возвращается 'documentfragment'. Для текстовых нод тип определяется как 'text', для комментариев — 'comment'.

var fragment = document.createDocumentFragment();
console.log($.type(fragment)); // "documentfragment"

var textNode = document.createTextNode('текст');
console.log($.type(textNode)); // "text"

Сравнение с `instanceof` и `tagName`

$.type() является более универсальным и лаконичным способом определения типа элемента по сравнению с instanceof или прямым доступом к tagName.

var div = document.createElement('div');

console.log(div instanceof HTMLDivElement); // true
console.log(div.tagName.toLowerCase());     // "div"
console.log($.type(div));                   // "div"

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