どうもisamです。
今日はjavascriptな気分って言う事で自分用のユーティリティライブラリを作ってみます。
いい悪いは取り敢えず別にして簡潔にかけるものというテーマで作っていきます。
ではコード!
var $ = {
id : function(id) {
return document.getElementById(id);
},
name : function(name) {
return document.getElementsByName(name);
},
tag : function(tag) {
return document.getElementsByTagName(tag);
},
event : function(obj, func, type) {
if (obj.addEventListener) {
//Netscape等
obj.addEventListener(type, func, false);
} else if (obj.attachEvent) {
//IE
obj.attachEvent('on'+type, func);
}
},
create : function(tag, obj, text) {
var t = document.createElement(tag);
for(var o in obj) {
t.setAttribute(o, obj[o]);
}
if(text != "") {
t.appendChild(document.createTextNode(text));
}
return t;
},
add : function(obj, child) {
obj.appendChild(child);
}
}
使い方はこんな感じ
<form name="test_ie" action="./" method="get"> <select name="pull"> <option value="test1">テスト①</option> <option value="test2">テスト②</option> <option value="test3">テスト③</option> <option value="test4">テスト④</option> <option value="test5">テスト⑤</option> <option value="test6">テスト⑥</option> </select> <input type="button" value="選択" id="pull_b"/> </form> <div id="tt"></div>
<script type="text/javascript">
//プルダウンの4番目を選択する
function funcs() {
document.test_ie.pull.selectedIndex = 3;
}
//span要素へ代入するテキスト
var val = "追加されたspan要素";
//span要素に追加する属性
var attr = {
id : 'span_id',
class : 'span_style'
};
//id="tt"の要素へspan要素を追加
$.add($.id("tt"), $.create('span', attr, val));
//イベントの追加
$.event($.id('pull_b'), funcs, 'click');
</script>
まだ中途半端だけど直ちょく機能追加していきます。
ではまた!