はじめに

今回紹介するのは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を変更する場合です。
要素の中身を変更するにはこの二つの関数があります。

Jqueryにしたら、この処理と同じです。

また、V1ではCSSのdisplayのみを省略することができます。
ですが、v2では下のd_関数と同様のCSSを省略することが可能です。
記述例 : qsa_display( CSSセレクタ , CSS[display]の値 );

また、このライブラリは、属性でも操作することができます。

基本的に関数の構造は次のようになります。
d_○○( 属性ネーム , 属性ネームの値 , 値 )
HTML構造の例は次のようになります。

<div d_text="text1"></div>
<script>
d_html("text","text1","これはスクリプトで変更しました！");
//属性d_textがtext1の要素のHTMLを「これはスクリプトで変更しました！」に変更
</script>

d_○○はV1の時点でこの関数が存在します。

V1とそれ以降のバージョンの変更点は太字で付け足しますのでよろしくお願いします。

このライブラリは比較的軽いので使いやすくWebの読み込みに影響しにくいのがポイントです。
Jqueryを使わずにDOM操作をしたいのならこのライブラリがいいでしょう。