digikid / dom-element

A set of methods for convenient manipulation of DOM elements

DOM Element

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

English | Русский

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

• Traversing
• Manipulations
• Styles
• Events
• Effects
• Getters
• Data management

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

• You might not need jQuery
• Cheat sheet for moving from jQuery to vanilla JavaScript

License

The MIT License (MIT)