DOM使い必見!超簡単にDOMを操れる「Voyeur.js」がすごい

「Voyeur.js」はデフォルトのDOM機能を拡張し、jQueryライクな指定での要素の参照、非常に簡単な書き方での要素の生成を実現するJavScriptライブラリです。

Voyeur.js

voyeur-js

これはすごいですねー。JavaScriptでのDOM参照や生成をコーディングするのは結構手間ですが、「Voyeur.js」を使えば非常に簡単になります。

まずは要素の参照。例えば、「Voyeur.js」で以下のようにコーディングします。

Voyeur.div.ul.li;

 

すると以下のHTMLの★部分のli要素が参照されます。

<div>
  <ul id="foo">
    <li>aaa</li><!-- ★ -->
    <li>bbb</li><!-- ★ -->
    <li>ccc</li><!-- ★ -->
  </ul>
</div>

 

“find”を使いidやclass指定も可能です。

Voyeur.div.find("#foo");

 

この場合、以下のHTMLの★部分のul要素が参照されます。

<div>
  <ul id="foo"><!-- ★ -->
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
  </ul>
</div>

 

次に要素の生成。「Voyeur.js」で以下のようにコーディングします。createの前までで要素の特定、create後に生成する要素を書きます。

Voyeur.div.create.h1;

 

すると以下のHTMLの★部分が生成されます。

<div>
  <h1></h1><!-- ★ -->
  <ul id="foo">
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
  </ul>
</div>

 

 

それでは「Voyeur.js」の使い方をご紹介します。まずは外部ファイルを読み込みます。

<script type="text/javascript" src="Voyeur.min.js"></script>

 

HTMLはDemo用にこのようにマークアップしました。

<div></div>

 

JavaScriptはDemo用にこのようにコーディングしました。

Voyeur.div.create.a;
Voyeur.div.a.href = "http://tecuration.com";
Voyeur.div.a.textContent = "Tecuration.com";

 

するとこのように要素が生成されました

<div><a href="http://tecuration.com">Tecuration.com</a></div>

 

とても便利です。DOM使うならぜひ検討したいですね。参考にどうぞ。

 

Home > JavaScript > DOM使い必見!超簡単にDOMを操れる「Voyeur.js」がすごい

Return to page top