*

~ガジェットのその先へ~

IT/科学

[JavaScript]jQueryっぽいものを作ってDOMを学ぶ

こんにちは、takusanです。最近、JavaScriptをよく使っていて、jQueryのような重いライブラリを使わずにDOMの操作が出来ればいいなと思っていたので、作ってみました(実際にはまだ使ってないです)。

名前は全く思いつかなかったので「hogeQuery」にしておきます。また、ここで作るものは実用するにはものすごく機能が不足しているので、自分でメソッドを増やして拡張してみたりしてください。

スポンサーリンク

やってみよう

まずは、
var hogeQuery = new Object();
で、オブジェクトを作ります。そしたら、まずは要素を追加する「addElm」メソッドを作ってみます。

hogeQuery.addElm = function(selectelm, wrap, inner) {
  var outer = document.querySelector(selectelm);
  var elm = document.createElement(wrap);
  elm.innerHTML = inner;
  outer.appendChild(elm);
}

まず、addElmメソッドに無名関数を代入します。このとき無名関数に、

  • 追加する要素の親要素
  • 追加する要素名
  • 追加する要素の中身

の3つを指定するための引数を用意しておきます。関数の中では、まず変数outerに引数selectelmにCSSと同じ書式で指定された要素を代入します。CSSと同じ書き方で要素を探すにはquerySelectorメソッドを使います。

次に、追加する要素を変数elmに代入します。これは、createElementメソッドで出来ます。このメソッドの引数には追加する要素名として、引数wrapを指定しておきます。

その次に、追加する要素の中身をinnerHTMLメソッドを使って指定します。これは、innerHTMLメソッドの引数に、引数innerを指定します。

最後に、変数elmをappendChildで、変数outerで指定された要素の中の最後に追加します。

ここまでに作ったメソッドの使用例と実行結果をまとめておきます。

HTML

<div>
  <p id="hogehoge">hogehoge</p>
</div>

JavaScript

var hogeQuery = new Object();
hogeQuery.addElm = function(selectelm, wrap, inner) {
  var outer = document.querySelector(selectelm);
  var elm = document.createElement(wrap);
  elm.innerHTML = inner;
  outer.appendChild(elm);
}

hogeQuery.addElm("div", "div", "<p>aaa</p><p>bbb</p>");

実行結果

hogehoge

aaa

bbb

こんな感じになったら一応成功です。要素を追加するだけじゃまだまだ機能が足りないと思うので、よく使いそうなメソッドの一部のサンプルを載せておきます。

要素の削除

hogeQuery.rmElm = function(selectelm) {
  var elm = document.querySelector(selectelm);
  elm.parentNode.removeChild(elm);
}

要素の編集

hogeQuery.editElm = function(selectelm, inner) {
  var elm = document.querySelector(selectelm);
  elm.innerHTML = inner;
}

クラスの追加

hogeQuery.addClass = function(selectelm, classname) {
  var elm = document.querySelector(selectelm);
  elm.classList.add(classname);
}

クラスの削除

hogeQuery.rmClass = function(selectelm, classname) {
  var elm = document.querySelector(selectelm);
  elm.classList.remove(classname);
}

その他のメソッドも、これらを応用することで作成できます。まあ、たくさん作るならjQuery使ってもそんなに変わらないと思いますが。

スポンサーリンク

おわりに

ここで紹介したことは、JavaScriptにおけるDOMの操作の基本的なことなので、これを是非いろいろなものに応用してみてください。

\シェアお願いします!/

更新通知を受け取る

こちらの記事も読まれています!

この記事を書いた人:takusan

-IT/科学
-,

関連記事

LINE Pay、ポイント還元率が4%になる「年末年始の大大大お買い物祭り」を開催

LINE Payは、ポイント還元率が4%になる「年末年始の大大大お買い物祭り」を ...

[WWDC]AppleがWWDC 2016の配信ページを公開

Appleは、2016年6月13日 午前10時(日本時間 6月14日午前2時)に ...

AirPodsを手に入れたので早速開封!AirPodsファーストインプレッション

スポンサーリンク AirPods、結局購入してしまいました。 どうもお久しぶり、 ...

Android版「スーパーマリオラン」の事前登録が受付開始!Android版の事前登録をする方法

先日、iOS版が配信された「スーパーマリオラン」ですが、遂にAndroid版の事 ...

とうとうEdgeもすべてのFlash自動再生をブロックへ

ChromeやFirefoxなどの主要ブラウザがAdobe Flashをデフォル ...