[JS]0.6kBの超軽量!基本的なDOM操作を実行するためだけに開発されたシンプルなライブラリ -nanoJS

要素にclassを加えたり、変更したり、要素を削除したり、::beforeや::afterを加えたり、要素の表示位置を取得したり、変更したり、クリックやホバーのイベントを設定したり、基本的なDOM操作を実行するためだけに開発された超軽量ライブラリを紹介します。

jQueryは使うけど、$関数や上記の挙動しか利用しないという人には、特にぴったりなスクリプトです。

サイトのキャプチャ

nanoJS
nanoJS -GitHub

nanoJSの特徴

  • トータル100行、0.6kBの超軽量スクリプト。
  • jQueryに似た構文が利用でき、オブジェクトの連鎖的もサポート。
  • それぞれのメソッドは単独で機能するため、削除・追加することも可能。
  • IE9対応(addClass, removeClass, toggleClassのみ非対応)。

nanoJSのデモ

ドキュメントでは、nanoJSで利用できる構文がすべてまとめられています。

サイトのキャプチャ

nanoJS

nanoJSの使い方

外部ファイル

当スクリプトを外部ファイルとして記述します。

よく使用する構文

DOMを操作する構文をいくつか紹介します。
$関数をはじめ、jQueryとほぼ同じ使い方なので、簡単だと思います。

指定した要素に、classを与えます。

指定した要素に、アニメーションを与えます。

指定した要素の属性に値を設定します。

指定した属性に値を設定します。

指定した要素の子要素を全て削除し、空にします。

指定した要素のHTMLを書き換えます。

指定した要素の後に、HTMLを加えます。

指定した要素の位置を取得・設定します。

指定した要素の任意のイベントをバインドします。

sponsors

top of page

©2018 coliss