A tiny DOM manipulation library written in ES6 with zero dependencies.
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>
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';
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');
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: $ }) {
//...
});
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');
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();
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();
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();
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');
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');