https://github.com/jahilldev/tsdom

Fast, lightweight TypeScript DOM manipulation utility
https://github.com/jahilldev/tsdom

dom javascript library lightweight manipulation typescript

Last synced: 4 months ago
JSON representation

Fast, lightweight TypeScript DOM manipulation utility

• Host: GitHub
• URL: https://github.com/jahilldev/tsdom
• Owner: jahilldev
• License: mit
• Created: 2017-07-03T09:24:05.000Z (over 7 years ago)
• Default Branch: main
• Last Pushed: 2022-03-21T12:58:21.000Z (almost 3 years ago)
• Last Synced: 2024-10-06T11:58:50.795Z (4 months ago)
• Topics: dom, javascript, library, lightweight, manipulation, typescript
• Language: TypeScript
• Homepage:
• Size: 373 KB
• Stars: 16
• Watchers: 4
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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'`

- `` ("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("
Lorem ipsum
" | Node | HTMLElement)`

- `el.prepend("
Lorem ipsum
" | 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("
Lorem ipsum
")`

- `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")`