Max Home IndustryПроект с открытым исходным кодом HTML DOM имеет 100 фрагментов ванильного JavaScript для общих задач манипулирования DOM. Он также имеет 1,8 тыс. Звезд на GitHub, поэтому стоит взглянуть на него.
Зачем мне вручную манипулировать DOM, если есть сторонние библиотеки и фреймворки, которые могут сделать это проще и лучше?
На то могло быть несколько причин. Во-первых, вам нужен весь наворот, который идет в комплекте с библиотекой? потому что в большинстве случаев библиотека будет делать больше чем одну вещь, которая может вам не понадобиться.
Тогда вы хотите начать обучение, необходимое для овладения фреймворком, чтобы извлечь из него только одну вещь?
Наконец, создавая свою собственную, вы расширяете свои знания и становитесь лучшим программистом. Я знаю, что это может быть невозможно, поскольку в большинстве случаев вам нужна библиотека, но этот крошечный случай управления DOM должен быть автономным.
Кроме того, стандартизация собственных API-интерфейсов браузера в каждом современном браузере и повышение производительности, которое вы получаете при их использовании, больше не нужны в библиотеках, таких как JQuery.
Конечно, когда вы имеете дело с крупномасштабными приложениями, фреймворк, такой как React или Vue, может быть односторонним, но во всех остальных случаях лучше начинать с чистого листа и добавлять библиотеки и фреймворки по мере необходимости. vanilla JS сначала значительно упрощает переход на фреймворк позже.
Разобравшись с этим, давайте посмотрим, что может предложить HTML DOM. Он содержит 100 фрагментов ванильного JS для общих задач манипулирования DOM. Они небольшие и легкие для понимания и используют исключительно API-интерфейсы собственных браузеров, без внешних библиотек.
Задачи варьируются от базовых, вроде «Добавление или удаление класса из элемента»:
ele.classList.add (‘class-name’); // Добавление нескольких классов (не поддерживается в IE 11) ele.classList.add (‘another’, ‘class’, ‘name’);
ele.classList.remove (‘class-name’); // Удаляем несколько классов (не поддерживается в IE 11) ele.classList.remove (‘another’, ‘class’, ‘name’);
на промежуточное звено вроде «Проверка возможности прокрутки элемента»:
const isScrollable = function (ele) {// Сравните высоту, чтобы увидеть, есть ли у элемента прокручиваемое содержимое const hasScrollableContent = ele.scrollHeight> ele.clientHeight;
// Этого недостаточно, потому что стиль элемента `overflow-y` может быть установлен как // *` hidden` // * `hidden! Important` // В этих случаях полоса прокрутки не отображается const overflowYStyle = window.getComputedStyle ( ele) .overflowY; const isOverflowHidden = overflowYStyle.indexOf (‘скрытый’)! == -1;
return hasScrollableContent &&! isOverflowHidden;};
до продвинутого типа «Перетаскивание элемента в списке».
Другие включают:
Разрешить ввод только определенных символов
Добавить к элементу
Присоединить или отсоединить обработчик событий
Вычислить положение мыши относительно элемента
Рассчитать размер полосы прокрутки
Проверить, является ли элемент потомком другого
Проверьте, находится ли элемент в области просмотра
Проверьте, прокручивается ли элемент
Проверьте, поддерживается ли собственный ввод даты
Клонировать элемент
Связь между iframe и его родительским окном
Копировать текст в буфер обмена
Обнаруживать клики за пределами элемента
Определить, сфокусирован ли элемент
Определите, включен ли Caps Lock
Обнаружить браузер Mac OS
Определите высоту и ширину элемента
Различать щелчки левой и правой кнопкой мыши
и многое другое.
В заключение, HTML DOM — это отличное и компактное руководство для начала вашего пути к JS, написания быстрых и грязных скриптов или создания чего-то потрясающего с помощью простого JS и без внешних зависимостей. Проект также можно разместить на локальном сервере, создав его репозиторий на Github. Наслаждайтесь!