jdoms

v1.1.1

Published

3 months ago

jDoms is a fast, powerful, and zero-dependency JavaScript library for modern DOM manipulation, traversal, event handling, and more

Downloads

jDoms: The Lightweight Vanilla JavaScript DOM Utility Library

jDoms is a fast, powerful, and zero-dependency JavaScript library for modern DOM manipulation, traversal, event handling, and more. It provides an intuitive, jQuery-like syntax for common tasks, empowering you to write cleaner, more efficient vanilla JS without the overhead of larger frameworks. It is the perfect lightweight alternative to jQuery for any project.

✨ Why Choose jDoms?

💡 Zero Dependencies: Pure, vanilla JavaScript. No external libraries needed. It just works.
⚡ Lightweight & Fast: A minimal footprint ensures your projects are fast and responsive.
⛓️ Familiar Chainable API: An elegant, jQuery-inspired syntax (jDoms(...).parent().addClass(...)) that is easy to learn and use.
🧭 Effortless DOM Traversal: Easily navigate the DOM tree with methods like .parent(), .child(), .closest(), .next(), and .find().
📢 Powerful Event Handling: Simple and robust event management with .on() and .off(), including built-in support for event delegation.
📡 Built-in AJAX: A straightforward jDoms.ajax() utility for handling asynchronous network requests.
🧰 Rich Utility Suite: Includes dozens of helpers for type checking (jDoms.isString), parsing (jDoms.jsonParse), cookie management, and more.

🚀 Getting Started

CDN

The easiest way to get started is to use the jsDelivr CDN. Just add this script tag to your HTML file before your main application script.

<script src="https://cdn.jsdelivr.net/gh/mamedul/jdoms@main/src/jdoms-latest.js"></script>

Direct Download

You can also download jdoms-latest.js from this repository and host it yourself.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jDoms Example Page</title>
</head>
<body>
    <div id="container">
        <p>Welcome to jDoms!</p>
    </div>

    <!-- Your scripts -->
    <script src="./src/jdoms-latest.js"></script>
    <script src="your-app.js"></script>
</body>
</html>

📚 Full API Documentation

Core Function: `jDoms()`

The jDoms() function is the entry point for almost all operations. It returns a jDoms instance, which is an array-like object of DOM elements with all the library methods attached to its prototype.

Syntax: jDoms(selector, [context])

selector: A CSS selector string, a DOM element, a NodeList, an HTML string, window, or document.
context (optional): A DOM element within which to search for the selector.

// Select elements by CSS selector
const primaryButtons = jDoms('button.primary');

// Select a single element by ID
const header = jDoms('#main-header');

// Wrap an existing DOM element
const myElement = document.getElementById('my-el');
const jDomsElement = jDoms(myElement);

// Select the window
const win = jDoms(window);

Now you can see/ check some examples & some tests in browser

DOM Traversal & Filtering

Navigate and filter the collection of elements.

| Method | Description | Example | | :--- | :--- | :--- | | .find(selector) | Gets the descendants of each element, filtered by a selector. | jDoms('ul').find('li.active'); | | .parent() | Gets the immediate parent of each element. | jDoms('span').parent(); | | .child() / .children() | Gets the children of each element, optionally filtered. | jDoms('#list').children('a'); | | .closest(selector) | Travels up the DOM tree to find the first ancestor that matches. | jDoms(event.target).closest('tr'); | | .next() | Gets the next sibling of each element. | jDoms('li.current').next(); | | .previous() | Gets the previous sibling of each element. | jDoms('li.current').previous(); | | .first() | Reduces the set to the first element. | jDoms('li').first(); | | .last() | Reduces the set to the last element. | jDoms('li').last(); | | .index(number) | Retrieves the raw DOM element at a specific index. | jDoms('p').index(0); // returns ... | | .domIndex(number) | Retrieves a new jDoms instance containing the element at an index. | jDoms('p').domIndex(0); // jDoms { 0: ... } | | .is(selector) | Checks if the first element matches the selector. Returns true or false. | if (jDoms(el).is(':checked')) { ... } | | .not(selector) | Removes elements from the set that match the selector. | jDoms('p').not('.intro'); | | .match(selector) | Filters the current set to elements that also match a new selector. | jDoms('div').match('.visible'); |

DOM Manipulation

Create, modify, and remove elements.

| Method | Description | Example | | :--- | :--- | :--- | | .html([content]) | Gets the HTML of the first element or sets the HTML for all elements. | jDoms('#box').html('New Content'); | | .text([content]) | Gets the text of the first element or sets the text for all elements. | jDoms('h1').text('Welcome!'); | | .append(content) | Inserts content at the end of each element. | jDoms('ul').append('<li>Last Item</li>'); | | .prepend(content) | Inserts content at the beginning of each element. | jDoms('ul').prepend('<li>First Item</li>'); | | .appendTo(selector) | Appends the current set of elements to the target selector. | jDoms('h2').appendTo('#container'); | | .prependTo(selector) | Prepends the current set of elements to the target selector. | jDoms('p').prependTo('#container'); | | .before(content) | Inserts content before each element. | jDoms('#btn').before('<hr>'); | | .after(content) | Inserts content after each element. | jDoms('#btn').after('Info'); | | .remove() | Removes all selected elements from the DOM. | jDoms('.temporary').remove(); | | .empty() | Removes all child nodes from the selected elements. | jDoms('#results').empty(); | | .clone([deep]) | Creates a deep or shallow copy of the first element. deep is true by default. | const clonedEl = jDoms('#original').clone(); | | .create(tagName, [attributes]) | Creates a new element. Must be called on an empty jDoms() instance. | const newDiv = jDoms().create('div', {id: 'new'}); |

Attributes & Properties

CSS, Styling & Dimensions

| Method | Description | Example | | :--- | :--- | :--- | | .css(prop, [val]) / .style(...) | Gets a style value or sets one or more style properties. | jDoms('.box').css('background-color', 'blue'); | | .addClass(className) | Adds a CSS class. | jDoms('p').addClass('highlight'); | | .removeClass(className) | Removes a CSS class. | jDoms('p').removeClass('highlight'); | | .hasClass(className) | Checks if any element has the class. Returns true or false. | if (jDoms('#box').hasClass('active')) { ... } | | .hide() | Hides elements by setting display: none !important. | jDoms('.modal').hide(); | | .show([displayType]) | Shows elements. Defaults to block. | jDoms('.modal').show('flex'); | | .width([value]) / .height([value])| Gets the width/height or sets it (in pixels). | jDoms('#box').width(200); | | .innerWidth() / .innerHeight() | Gets the current computed inner width/height (including padding). | const w = jDoms('#box').innerWidth(); | | .outerWidth() / .outerHeight() | Gets the current computed outer width/height (including padding, border, and margin). | const h = jDoms('#box').outerHeight(); | | .offset() | Gets the coordinates of the first element relative to the document. Returns {left, top}. | const pos = jDoms('#box').offset(); | | .scrollTop() / .scrollLeft() | Gets the vertical/horizontal scroll position. | const y = jDoms(window).scrollTop(); | | .scrollTo(x, y) / .scrollBy(x, y)| Scrolls the element to a specific coordinate or by a certain amount. | jDoms(window).scrollTo(0, 0); |

Event Handling

Event Delegation Example: Event delegation allows you to attach a single event listener to a parent element that will fire for its descendants, even for elements added to the DOM after the listener was attached.

// Instead of attaching a listener to every <li>...
// Attach ONE listener to the parent <ul>
jDoms('#dynamic-list').on('click', 'li', function(event) {
    // 'this' refers to the <li> that was clicked
    console.log('Clicked item:', jDoms(this).text());
    jDoms(this).addClass('clicked');
});

AJAX (Static Method)

The jDoms.ajax() method is a static utility on the main jDoms object.

Syntax: jDoms.ajax(options)

jDoms.ajax({
    url: 'https://api.example.com/users',
    method: 'POST',
    data: {
        name: 'Mamedul Islam',
        role: 'Developer'
    },
    onSuccess: function(xhr) {
        const response = jDoms.jsonParse(xhr.responseText);
        console.log('User created:', response);
    },
    onError: function(xhr) {
        console.error('API Error:', xhr.status, xhr.statusText);
    }
});

Utilities (Static Methods)

Static methods are called directly on the jDoms object itself, not on a jDoms instance.

Document Ready

jDoms.ready(callback): The classic document ready function. Executes the callback once the DOM is fully loaded and parsed.
```
jDoms.ready(function() {
    // DOM is ready, safe to manipulate
    jDoms('body').addClass('loaded');
});
```

Type Checking

A comprehensive suite of functions to check the type of a variable.

jDoms.isString(variable)
jDoms.isNumber(variable)
jDoms.isArray(variable)
jDoms.isObject(variable)
jDoms.isFunction(variable)
jDoms.isBoolean(variable)
jDoms.isUndefined(variable)
jDoms.isEmpty(variable): Returns true for '', 0, false, null, undefined, NaN, or empty arrays/objects.

Parsing

jDoms.jsonParse(string): Safely parses a JSON string into an object, returning an empty object on failure.
jDoms.xmlParse(string): Parses an XML string into an XML Document.
jDoms.htmlParse(string): Parses an HTML string into a DocumentFragment.

Cookies

jDoms.setCookie(name, value, expireTimeInMs): Sets a browser cookie.
jDoms.getCookie(name): Retrieves a cookie value by name.
jDoms.removeCookie(name): Deletes a cookie.

Miscellaneous Utilities

jDoms.trim(string): Removes leading and trailing whitespace from a string.
jDoms.unique(array): Returns a new array with duplicate values removed.
jDoms.merge(obj1, obj2): Merges the contents of two objects into the first object.
jDoms.now(): Returns the current timestamp in milliseconds.
jDoms.delay(callback, ms): A debouncing function that invokes a callback after a specified delay.
jDoms.activeDom(): Returns the currently focused element as a jDoms instance.

🤝 Contributing

Contributions are what make the open-source community such an amazing place. Any contributions you make are greatly appreciated.

Fork the Project
Create your Feature Branch (git checkout -b feature/AmazingFeature)
Commit your Changes (git commit -m 'Add some AmazingFeature')
Push to the Branch (git push origin feature/AmazingFeature)
Open a Pull Request

📜 License

Distributed under the MIT License. See LICENSE for more information.

👨‍💻 Author & Hire

This extensible codes was created by Mamedul Islam and opened for contribute by anyone.

As a passionate web developer with experience in creating interactive and user-friendly web components. Currently available for freelance projects or full-time opportunities.

Helping businesses grow their online presence with custom web solutions. Specializing in WordPress, WooCommerce, and Shopify. Building modern, responsive, and high-performance scalable websites with custom made plugins, codes, customizations.