ホーム  >  JavaScript / Webサイト構築

【JavaScript】DOM操作専用ライブラリを見てみる

JavaScript

今回は、DOM操作専用のライブラリ。dom_sen.jsです。このライブラリは、複雑なものを少しでも少ない処理で行うことに特化していて、さらに超軽量です。

DOM操作に特化しているため、ソースコードはSEO的に懸念されるJqueryの半分もありません。

では、どのような機能があるのでしょうか。

スクリプトの読み込み

スクリプトは次のコードで読み込むことができます。また、ファイルを開き、保存して使用することも可能です。

<script src="https://tamralworld.com/library/dom_sen_v2.js"></script>

読み込めた所で、使い方を紹介していきます。

ライブラリの使い方

まず、関数短縮機能です。

qsa()

この関数は、document.querySelectorAll()の省略です。querySelectorAllと同様に利用すことができます。

qs()

document.querySelector()の省略です。qsa()とは違い、最初にマッチした要素のみ取得します。

 

そして、次に、記述短縮です。よく利用する機能の場合、短縮して記述することが可能です。

また、Jqueryに似ているところもあるため、使いやすくなっています。

 

qsa_html( CSSセレクタ, HTML )

これは、Jqueryに例えると$( CSSセレクタ ).html( HTML );と同じです。

通常のJavaScriptであれば、このような処理になります。

var qsa=document.querySelectorAll( CSSセレクタ );
qsa.forEach(function(v){
  v.innerHTML= HTML ;
});

この長文を一つの関数にまとめてできるので効率よく記述することができます。

qsa_text( CSSセレクタ, TEXT )

HTMLがあるなら、テキストもあるよね。と思った方。正解です。

これはqsa_html()のテキスト版です。HTMLタグなども直接表示されます。

qsa_プロパティ名( CSSセレクタ, CSS[プロパティ名]の値 )

このCSSのプロパティ名は利用シーンの多い一部のプロパティに限られています。

利用可能なプロパティは次の通りです。

  • display
  • opacity
  • width
  • height
  • color
  • background
  • border
  • border_radius
  • top
  • left
  • right
  • bottom
  • position
  • margin
  • padding
  • transition
  • transform
  • z_index
  • box_sizing
  • font_size

(ハイフンは _ で記述してください)

また、その他に一つ関数があります。

delete_margin( CSSセレクタ )

ブラウザ初期のマージンを無効にする利用シーンが多いのでこの関数が存在します。これは、指定された要素のmarginを0にしてくれます。ですが、marginが設定されている状態の場合、上書きされてしまうので注意しましょう。

d属性

このライブラリではd属性でグループ分けをすることができます。

この記事では詳しく説明しませんが詳しく知りたい方は記事最後のサイトを見ていただけたらと思います。

d_html( 属性クラス, 属性クラス値, HTML )

これを簡単に説明するとこのようになります。

<span d_html="dom1">変更前</span>

<script>
d_html("html","dom1","変更後のHTML");
// 属性d_htmlの値がdom1の要素のHTMLを"変更後のHTML"に変換します
</script>

最後に

実際この記事で紹介できなかった機能はまだ大量にあります！！

興味のある方はこちらから。

kore-ene.blogspot.com
超軽量DOM操作ライブラリdom_sen.js var1
Kore! Ene!では、様々な人に役立つ記事を配信しています
kore-ene.blogspot.com
超軽量DOM操作ライブラリdom_sen.js var2
Kore! Ene!では、様々な人に役立つ記事を配信しています

 

 

 

カテゴリー:JavaScript​Webサイト構築

関連投稿