Skip to content

A set of methods for convenient manipulation of DOM elements

License

Notifications You must be signed in to change notification settings

digikid/dom-element

Repository files navigation

DOM Element

DOM Element

A set of methods for convenient manipulation of DOM elements.
Lightweight alternative to jQuery with similar method names.

English | Русский

Release version TypeScript MIT License

Features

  • Minimalistic set of commonly used methods for DOM manipulating
  • Lightweight and highly performant through the give up of legacy browsers support
  • No additional dependencies
  • Written in TypeScript

Install

npm i digikid/dom-element

API

Initialization

Import library and pass element selector as a parameter:

import $ from 'dom-element';

$(document)
  .ready(() => {
    $('body')
      .addClass('is-ready');
  });

If you're using TypeScript, you can also import the type of created instance:

import $, { type DomElement } from 'dom-element';

const $element: DomElement = $('.element');

Selectors

The following types of selectors are supported:

  • String
    • CSS selectors (e.g. .element, #app etc)
    • HTML strings <div class="element"></div> etc)
    • The string 'html' (alias for document.documentElement)
  • HTMLCollection | NodeList (collection of HTML elements)
    • document.querySelector
    • document.querySelectorAll
    • document.getElementById
    • document.getElementsByClassName
  • HTMLElement[] (array of HTML elements)
  • HTMLElement
  • Document
  • Window (event handling)
  • DOM Element Instance

⚠️ Important note This library does not support Sizzle selectors (:checked, :hover etc).

Methods

Functions store

This library supports creation of custom functions that are stored globally.

Functions created via $.fn are stored in a separate object and do not pollute the global scope.

$.fn.sum = (a, b) => a + b;

const sum = $.fn.sum(1, 2);

Reference

License

The MIT License (MIT)