tnt-dom

Super simple DOM utilities

Usage no npm install needed!

<script type="module">
  import tntDom from 'https://cdn.skypack.dev/tnt-dom';
</script>

README

tnt-dom

Super simple DOM library

Join the chat at https://gitter.im/reinvanoyen/tnt-dom

Designed to be used with browserify.

Please note that this DOM library is not yet production ready. So for the moment: use at your own risk.

Getting started

Install using npm:

$ npm install tnt-dom

Add it to your Javascript:

var tnt = require('tnt-dom');

Methods

constructor

// From HTML string
var el = new tnt( '<div class="my-class">My element</div>' );

// From selector
var el = new tnt( 'div.my-class' );

// From HTMLElement
var el = new tnt( document.body );

forEach

element.forEach( function( el ) {
    console.log( el );
} );

length

Gets the amount of matched elements

element.length();

get

Gets a HTMLElement by index

element.get( 0 );

remove

Removes the element from the DOM.

element.remove();

copy

Makes a new copy of the element(s)

element.copy();

append

Append one or multiple elements to the current element

element.append( new tnt( 'body' ) );

or

element.append( '<button>my button</button>' ) );

appendTo

Append the current element to an element

element.appendTo( new tnt( document.body ) );

insertBefore

Inserts the element(s) before an element

element.appendTo( new tnt( document.body ) );

wrap

Wrap the element(s) with an element

element.wrap( new tnt( '<div></div>' ) );

css

Sets a CSS property to the element(s)

element.css( 'color', 'red' );

addClass

Adds a class to the element(s)

element.addClass( 'my-class' );

removeClass

Removes a class from the element(s)

element.removeClas( 'my-class' );