tinyDOM

A tiny DOM manipulation library written in ES6 with zero dependencies.

1. Installation
2. Creating a new instance
3. Instance methods

Installation

Script Tag

The easiest way to get started is by using the jsDelivr CDN via an HTML <script></script> tag.

tinyDOM uses semantic versioning. You can grab a major, minor, or patch version from the CDN with the @1.2.3 syntax. You can find all available versions under releases.

<script src="https://cdn.jsdelivr.net/npm/tiny-dom@2/dist/tinydom.min.js"></script>

You can also download the files directly from GitHub.

Compiled and production-ready code can be found in the dist directory. The src directory contains development code.

<script src="path/to/tinydom.min.js"></script>

ES Module

tinyDOM also supports modern browsers and module bundlers (Rollup, Webpack, Snowpack, etc.) using the ES module import syntax. Use the .es version.

import { TinyDOM as $ } from 'https://cdn.jsdelivr.net/npm/tiny-dom@2/dist/tinydom.es.min.js';

CommonJS

You can also use npm. First, install the package via the command line.

npm i tiny-dom

Then import the package.

const { TinyDOM: $ } = require('tiny-dom');

AMD

If you use RequireJS, SystemJS, or another AMD format, you can import TinyDOM with the .amd version.

requirejs(['https://cdn.jsdelivr.net/npm/tiny-dom@2/dist/tinydom.amd.min.js'], function ({ TinyDOM: $ }) {
  //...
});

Creating a new instance

To create a new tinyDOM instance, simply instantiate the class using the new operator.

Like jQuery, tinyDOM uses the $ namespace. You can pass in any valid CSS selector string:

// Create a new TinyDOM instance
const paragraphs = new $('p');

Instance methods

items()

Get an immutable copy of the matching elements.

Parameters: None.

Returns: An array of matching Element objects.

// Create a new TinyDOM instance
const paragraphs = new $('p');

// Get an immutable copy of the matching elements
const paragraphsCopy = paragraphs.items();

first()

Get the first matching element.

Parameters: None.

Returns: The first matching Element object.

// Create a new TinyDOM instance
const paragraphs = new $('p');

// Get the first matching element
const firstParagraph = paragraphs.first();

last()

Get the last matching element.

Parameters: None.

Returns: The last matching Element object.

// Create a new TinyDOM instance
const paragraphs = new $('p');

// Get the last matching element
const lastParagraph = paragraphs.last();

addClass()

Add a class to all matching elements.

Parameters: A string representing the class to be added.

Returns: The tinyDOM instance on which addClass() was called.

// Create a new TinyDOM instance
const paragraphs = new $('p');

// Add a class to all matching elements
paragraphs.addClass('is-active');

removeClass()

Remove a class from all matching elements.

Parameters: A string representing the class to be removed.

Returns: The tinyDOM instance on which removeClass() was called.

// Create a new TinyDOM instance
const paragraphs = new $('p');

// Remove a class from all matching elements
paragraphs.removeClass('is-active');