[JS]実行が超高速で、簡単にDOMを操作できるJavaScriptの超軽量ライブラリ -DOMmy.js

サイト構築 -JavaScript

Post on:2018年6月28日

DOMmy.jsの特徴

DOMmy.jsはIE9を含むクロスブラウザ対応の超軽量スクリプトです。実行が超高速で、非常に簡単にDOMを操作できます。ライセンスは、MITライセンスです。

4.0kBの超軽量スクリプト。
他のスクリプトやライブラリに依存は、一切なし。
ページ上のすべてのDOMを簡単に操作できます。
ページ上に>強力なCSSアニメーションを作成できます。
単独または複数のイベント、ストレージ、CSSの属性やプロパティを加えることができます。
構造的に機能し、DOM Readyをサポート。

サポートブラウザ

最新安定版の主要ブラウザをサポートしています。

Chrome
Firefox
Opera
Safari
Internet Explorer

※IE8以下は未サポートです。

DOMmy.jsのデモ

デモでは、DOMmy.jsの基本的な使い方が紹介されています。

DOMmy.jsのデモ

DOMmy.jsの使い方

Step 1: 外部ファイル

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

<script src="http://www.riccardodegni.com/projects/dommy/dommy-min.js"></script>
<script>
    // do some DOMmy stuff
    $$$(function() {
        // ...
    });
</script>

// do some DOMmy stuff

$$$(function() {

// ...

});

</script>

DOMの操作

DOM要素の選択。

// select an element by ID
$('myel');

// select a collection of elements by css selector
$$('#myid div.myclass p');

// select an element by ID

$('myel');

// select a collection of elements by css selector

$$('#myid div.myclass p');

要素にイベントを追加。

// add an event to an element
$('myel').on('click', function() {
    log('Hey!');
});

// add a events to an element
$$('#myel p').on(
    'click': function() {
        log('Hey!');
    },
    
    'mouseout': function() {
        log('Hey!');
    }
});

// add an event to an element

$('myel').on('click', function() {

log('Hey!');

});

// add a events to an element

$$('#myel p').on(

'click': function() {

log('Hey!');

'mouseout': function() {

log('Hey!');

}

});

要素にプロパティを追加。

// set html
$('myel').html('new content');

// get an attribute
var title = $('myel').attr('title');

// set an attribute
$('myel').attr('title', 'my title');

// set attributes
$('myel').attr({'title': 'my title', 'alt': 'alternate text'});

// set html

$('myel').html('new content');

// get an attribute

var title = $('myel').attr('title');

// set an attribute

$('myel').attr('title', 'my title');

// set attributes

$('myel').attr({'title': 'my title', 'alt': 'alternate text'});

要素にアニメーションを追加。

// simple animation
$('myel').fx({'width': '300px'}, 2000, callBack);

// queue animations
$$('.myel').fx({'width': '300px'}, 2000, callBack, true);
           .fx({'width': '300px'}, 2000, callBack, true);

// simple animation