*

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

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/科学
-,

関連記事

[Google]Googleの囲碁AI「AlphaGo」が世界トップ棋士に3連勝

最近話題のGoogleの囲碁AI「AlphaGo」がAIとプロ棋士が対局する「G ...

iOS版Google Driveアプリに「iOSからAndroidへのデータ移行機能」が追加

iOS版 Google Driveアプリに、Androidへデータ移行移行する機 ...

Softbank、ARMを約3.3兆円で買収。IoT分野の強化へ

ソフトバンクグループは半導体設計大手ARMを約243億ポンド(約3.3兆円)で買 ...

LINEで複数の人、グループにメッセージを一斉送信する方法

もうすぐ今年も終わりですが、LINEで複数の人、グループにメッセージを一斉に送信 ...

[速報]Googleが物理フリックキーボードを発表!!

本日4月1日、Googleから新製品「Google日本語入力 物理フリックバージ ...