@makecode/dom-manager

@makecode/dom-manager

A lightweight JavaScript library for DOM manipulation inspired by jQuery. It provides an easy and flexible API to interact with and modify DOM elements.

Installation

Install the package via npm:

npm install @makecode/dom-manager

Usage

Import the library and use it in your project:

import $ from '@makecode/dom-manager';

// Select an element
const dom = $('body');

// Check visibility
console.log(dom.isVisible());

// Add a class
dom.addClass('new-class');
console.log(dom.getClass()); // Outputs: 'new-class'

// Toggle a class
dom.toggleClass('new-class');
console.log(dom.getClass()); // Outputs: ''

// Set and get data attributes
dom.data({ 'test-attr': 'value' });
console.log(dom.data('test-attr')); // Outputs: 'value'

// Append a new div element
const newDiv = $('<div>').attr({ id: 'new-div', class: 'example-class' });
dom.append(newDiv);
console.log($('body').contains(newDiv)); // Outputs: true

Features

• Attribute manipulation (attr, removeAttr, hasAttr)
• Class manipulation (addClass, removeClass, toggleClass, hasClass)
• Style manipulation (css)
• Element visibility (isVisible)
• DOM traversal (next, prev, closest)
• Element insertion and replacement (prepend, append, before, after, replaceWith)
• Data attributes (data)
• Scroll parent detection (scrollParent)
• Node comparison (isEqualNode)

Browser Compatibility

• Modern browsers: Chrome, Edge, Firefox, Safari
• Internet Explorer: IE11+

This library relies on modern JavaScript APIs such as dataset, classList, and matches, so ensure your environment supports these features or includes polyfills for older browsers.

License

MIT