はじめに
今回紹介するのはdom_sen.jsというライブラリです。
ポイントとしては、とても軽量で扱いやすいというところです。
dom_sen.jsは、そのままの通り、DOM操作が楽になります。
Jqueryほどではないけれど、簡単にDOM操作をしたいという方向けのライブラリとなります。
使い方
(こちらでは簡単に説明をしています。詳しく知りたい方はこちら:dom_sen.js)
まず、
<script src="https://tamralworld.com/library/dom_sen_v2.js"></script>
※ファイル名のv2はdom_sen.jsにある最新のバージョン名にしてください。2019/11/29時点ではV2です。
基本
まず、queryselectの省略をすることが可能になります。
こうなります。
document.querySelectorAll()
↓↓
qsa()
document.querySelector()
↓↓
qs()
次に、qsa()で指定した要素のHTMLを変更する場合です。
要素の中身を変更するにはこの二つの関数があります。
- qsa_html( CSSセレクタ , HTML)
- qsa_text( CSSセレクタ , テキスト)
※V2ではqsa_value( CSSセレクタ , value値)が使用可能になりました
Jqueryにしたら、この処理と同じです。
- $(CSSセレクタ).html(HTML);
- $(CSSセレクタ).text(テキスト);
また、V1ではCSSのdisplayのみを省略することができます。
ですが、v2では下のd_関数と同様のCSSを省略することが可能です。
記述例 : qsa_display( CSSセレクタ , CSS[display]の値 );
- qsa_display()
- qsa_opacity()
- qsa_width()
- qsa_height()
- qsa_color()
- qsa_background()
- qsa_border()
- qsa_border_radius()
- qsa_top()
- qsa_left()
- qsa_bottom()
- qsa_right()
- qsa_position()
- qsa_margin()
- qsa_padding()
- qsa_transition()
- qsa_transform()
- qsa_z_index()
- qsa_box_sizing()
- qsa_font_size()
また、このライブラリは、属性でも操作することができます。
属性により操作する方法
基本的に関数の構造は次のようになります。
d_○○( 属性ネーム , 属性ネームの値 , 値 )
HTML構造の例は次のようになります。
<div d_text="text1"></div>
<script>
d_html("text","text1","これはスクリプトで変更しました！");
//属性d_textがtext1の要素のHTMLを「これはスクリプトで変更しました！」に変更
</script>
d_○○はV1の時点でこの関数が存在します。
- d_html()
- d_text()
- d_value()
- d_display()
- d_opacity()
- d_width()
- d_height()
- d_color()
- d_background()
- d_border()
- d_border_radius()
- d_top()
- d_left()
- d_bottom()
- d_right()
- d_position()
- d_margin()
- d_padding()
- d_transition()
- d_transform()
- d_z_index()
- d_box_sizing()
- d_font_size()
※太字はV2で追加された関数です。
※関数はすべて置き換え用です。読み取りはできません。
最後に
V1とそれ以降のバージョンの変更点は太字で付け足しますのでよろしくお願いします。
このライブラリは比較的軽いので使いやすくWebの読み込みに影響しにくいのがポイントです。
Jqueryを使わずにDOM操作をしたいのならこのライブラリがいいでしょう。