@tonyism1/dom-utils

v1.0.0

Published

4 months ago

Lightweight DOM manipulation utilities (jQuery-lite)

Downloads

0High
0Medium
0Low

tonyism1

dom utilities jquery-lite

DOM Utils - A Lightweight jQuery-like DOM Utility Library

This is a lightweight, jQuery-like DOM utility library designed for easy manipulation of the Document Object Model (DOM) in web browsers. It provides a simple API for selecting elements, modifying content, handling events, and more, without the overhead of a full-fledged library like jQuery.

Project Structure

dom-utils/
├── package.json
├── index.js
├── README.md
├── demo/
│   ├── index.html
│   └── demo.css

Features

$(selector, context): Selects the first element matching the CSS selector within the given context (defaults to document). Returns a wrapped element object with utility methods.
$all(selector, context): Selects all elements matching the CSS selector within the given context. Returns an array of wrapped element objects.
Chainable Methods: Most methods return the wrapped element object, allowing for method chaining.
DOM Manipulation: html(), text(), val(), append(), prepend(), remove(), empty(), clone()
Attribute & Data Handling: attr(), removeAttr(), data()
Class Manipulation: addClass(), removeClass(), toggleClass(), hasClass()
CSS Styling: css() for getting and setting inline styles.
Event Handling: on(), off(), trigger()
Display Control: show(), hide(), toggle()

Installation

You can install dom-utils via npm:

npm install dom-utils

Usage

ES Module (Recommended)

import { $, $all } from 'dom-utils';

// Update content
$("#title").text("Hello from DOM Util Lite!");

// Add event listener
$("#myButton").on("click", () => {
  $("#output")
    .text("Button Clicked!")
    .addClass("active")
    .css({ color: "red", fontWeight: "bold" });

  $("#list").append("<li>New Item</li>");
});

// Multiple items
$all(".item").forEach((item, i) => {
  item.text("Item " + (i + 1));
});

// Attribute & dataset
$("#link").attr("href", "https://example.com").data("track", "outbound");

CommonJS

const { $, $all } = require('dom-utils');

// Your code here

Direct Inclusion (Global Scope)

If you prefer, you can still include index.js directly in your HTML file using a <script> tag. This will expose $ and $all globally.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>DOM Util Lite Demo</title>
  <link rel="stylesheet" href="demo/demo.css" />
</head>
<body>
  <h1 id="title">DOM Util Lite</h1>

  <button id="myButton">Click Me</button>
  <p id="output"></p>

  <ul id="list">
    <li class="item">Old Item 1</li>
    <li class="item">Old Item 2</li>
  </ul>

  <a id="link" href="#">Link</a>

  <script src="./index.js"></script>
  <script>
    // Update content
    $("#title").text("Hello from DOM Util Lite!");

    // Add event listener
    $("#myButton").on("click", () => {
      $("#output")
        .text("Button Clicked!")
        .addClass("active")
        .css({ color: "red", fontWeight: "bold" });

      $("#list").append("<li>New Item</li>");
    });

    // Multiple items
    $all(".item").forEach((item, i) => {
      item.text("Item " + (i + 1));
    });

    // Attribute & dataset
    $("#link").attr("href", "https://example.com").data("track", "outbound");
  </script>
</body>
</html>

Running the Demo

Install serve globally (if you haven't already):
```
npm install -g serve
```
Navigate to the project root and start the server:
```
npm run start
```
Open your browser and go to http://localhost:3000/demo/index.html (or the address provided by serve).

Development

To contribute or develop further:

Clone the repository.
Make your changes to index.js.
Test your changes using the demo/index.html file.

License

This project is licensed under the MIT License.