getElementById や querySelector といったメソッドを使いやすくするスクリプト『tm.dom.js』の紹介
前回, 『Selectors API の querySelector/querySelectorAll を使ってみよう』というエントリーを書きましたが, 今回はそれをより使いやすくするスクリプトを紹介したいと思います.
document.getElementById や document.querySelectorAll なんて長くて毎回書いてらんねぇって人に オススメのスクリプトです.
とはいってもそれぞれのメソッドをラップしただけのシンプルなスクリプトです. shorthand としてお使いください.
ちなみに今回紹介する『tm.dom.js』は今制作中のライブラリからの抜粋したものだったりします.
Sample and Download
今回制作したサンプルはこちらです.
スクリプトとサンプルはこちらからダウンロードできます.
Usage
スクリプトを読み込めば, 下記のような形で要素を取得できるようになります.
TM.$id("hoge"); // id が hoge の要素を取得
TM.$class(foo); // class が foo の最少の要素を取得
TM.$class(foo, 4); // class が foo の要素の４番目を取得(index省略時は０番目)
TM.$classAll(foo); // class が foo の要素を配列として全て取得
TM.$query(".foo"); // class が foo の最初の要素を取得
TM.$query("section>p", 2); // section 直下の２番目の p 要素を取得(index省略時は０番目)
TM.$query("input[type='submit]"); // type が submit の要素を取得
TM.$queryAll(.foo); // class が foo の要素を配列として全て取得
TM.$queryAll(".foo, .bar"); // class が foo もしくは bar の要素を配列として全て取得
Code
tm.dom.js
tm.dom.js 全体のコードです.
/**
* @author phi
*/
var TM = TM || {};
(function(np){
np = np || window;
/**
* id の一致する要素を取得.
* document.getElementById の Alias.
* @param {String} id id.
*/
np.$id = function(id) {
return document.getElementById(id);
};
/**
* class 名の一致する要素リストの index(デフォルトは0) 番目の要素を取得.
* document.getElementsByClassName の Alias.
* @param {String} className class name.
* @param {Number} index element index.
*/
np.$class = function(className, index) {
return (index) ?
document.getElementsByClassName(className)[index] :
document.getElementsByClassName(className)[0];
};
/**
* class 名の一致する要素リストを取得.
* document.getElementsByClassName の Alias.
* @param {String} className class name.
*/
np.$classAll = function(className) {
return document.getElementsByClassName(className);
};
/**
* css セレクタの一致する要素リストの index 番目の要素を取得.
* document.querySelector の Alias.
*/
np.$query = function(query, index) {
return (index) ?
document.querySelectorAll(query)[index] :
document.querySelector(query);
};
/**
* css セレクタの一致する要素リストを取得.
* document.querySelectorAll の Alias.
*/
np.$queryAll = function(query) {
return document.querySelectorAll(query);
};
/**
* tagName 要素を生成する.
* document.createElement の Alias.
*/
np.$create = function(tagName)
{
return document.createElement(tagName);
};
/**
* ドキュメントに書き込む.
* document.write の Alias
*/
np.$write = function(str) {
document.write(str);
};
})(TM);
index.html
今回制作したサンプルのコードです.
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>『tm.dom.js』 サンプル</title>
<style>
body {
font-family: "Meiryo", "メイリオ", "ヒラギノ角ゴ Pro W3", sans-serif;
}
pre {
font-family: 10px 'Consolas', 'Monaco', 'ＭＳ ゴシック';
margin: 5px;
padding: 5px;
border: 1px solid black;
}
</style>
<script src="tm.dom.js"></script>
<script>
window.onload = function() {
// ヘッダー取得
var eH2 = TM.$query("h2.header");
log("【" + eH2.innerHTML + "】");
// class に blood-type がある要素ををすべて取得
var eBloodTypeList = TM.$queryAll(".blood-type");
var bloodTypeList = [];
for (var i=0,len=eBloodTypeList.length; i<len; ++i) {
bloodTypeList.push( "'" + eBloodTypeList[i].innerHTML + "'" );
}
log("赤血球の遺伝子に応じて" + bloodTypeList.join(",") + "に分類する方法.");
// blood-type-list の子供で my class がついている要素を取得
var eMyBloodType = TM.$query("#blood-type-list .my");
log("ちなみに私の血液型は '" + eMyBloodType.innerHTML + "' です.");
// id で取得
var eBType = TM.$id("B-type");
log("学生時代の友人は '" + eBType.innerHTML + "' が多かったです.");
var eOType = TM.$id("O-type");
log("職場の同僚は'" + eOType.innerHTML + "' が多いです.");
var eAType = TM.$id("A-type");
log("元恋人は'" + eAType.innerHTML + "' でした... はぁ...");
};
// ログ出力
var log = function(str) {
var eConsole = TM.$id("console");
eConsole.innerHTML += str;
eConsole.innerHTML += '\n';
};
</script>
</head>
<body>
<h1>『tm.dom.js』 サンプル</h1>
<section>
<h2 class="header">AOB式血液型</h2>
<ul id="blood-type-list">
<li id="A-type" class="blood-type">A 型</li>
<li id="B-type" class="blood-type">B 型</li>
<li id="O-type" class="blood-type my">O 型</li>
<li id="AB-type" class="blood-type">AB 型</li>
</ul>
</section>
<section>
<h2>Console</h2>
<pre id="console"></pre>
</section>
</body>
</html>
次回は何書こうかなぁ～
良く使うメソッドをutiｌ化する方法
getElementById や querySelector といったメソッドを使いやすくするスクリプト『tm.dom.js』の紹介 | TM Life http://t.co/1bw86kcM
ふむぅ。 Now Browsing: getElementById や querySelector といったメソッドを使いやすくするスクリプト『tm.dom.js』の紹介 | TM Life – http://t.co/A4bFsnmI