tsdom/README.md

Fast, lightweight JavaScript DOM manipulation utility

# tsdom
Fast, lightweight DOM manipulation utility with TypeScript definitions.
**1.8kb** gzipped.
### Install
`npm install --save tsdom`
### Setup
Add the package to your project using one of the following:
- `let tsdom = require('tsdom')`
- `import tsdom from 'tsdom'`
- `<script src="./tsdom.inc.js" />` ("tsdom/dist/tsdom.inc.js")
### Usage
TSDom uses CSS (or jQuery) selector syntax, e,g:
- `let el = tsdom(element)`
- `let el = tsdom("div")`
- `let el = tsdom("#yourId")`
- `let el = tsdom(".yourClass")`
- `let el = tsdom("[data-attribute]")`
### API
Once you've selected an element or elements, you can chain the following methods:
- `el.first()`
- `el.find("#yourSelector")`
- `el.closest(".yourSelector")`
- `el.each(e => { // do something })`
- `el.append("<p>Lorem ipsum</p>" | Node | HTMLElement)`
- `el.prepend("<p>Lorem ipsum</p>" | Node | HTMLElement)`
- `el.empty()`
- `el.addClass("yourClass")`
- `el.removeClass("yourClass")`
- `el.toggleClass("yourClass")`
- `el.css({ opacity: "0" })`
- `el.attr({ title: "Your new title" })`
- `el.on("click", (ev: Event, el: HTMLElement) => { // do something })`
- `el.on("click", ".yourClass", (ev: Event, el: HTMLElement) => { // do something })`
- `el.off("click")`

The following are return methods
- `el.get(0)`
- `el.hasClass("active")`
- `el.val()`
- `el.val("value")`
- `el.text()`
- `el.text("Lorem ipsum")`
- `el.data("key")`
- `el.data("key", "value")`
- `el.attr("key")`
- `el.html()`
- `el.html("<div>Lorem ipsum</div>")`
- `el.toArray()`

And these are NON return methods
- `el.remove()`
### Types
The package exports the following type namespace for use in your app:
- `import tsdom, { TSDom } from 'tsdom'`
  - `TSDom.Init` == `tsdom`
  - `TSDom.Object` == `tsdom("#yourSelector")`