JavaScript/MochiKit/DOM
DOMを簡単に操作するためのライブラリ。
基本的MochiKit1.3.1
最新の環境は1.4系だと思う。
$(id[,...]):
例のやつ。指定したIDを持つノードを取得。
カンマ区切りで複数指定した場合は複数のノードを配列として取得する。
例
<div id="name" value="taro" />
<div id="age" value="10" />
<script>
alert($("name","age"));
alert($("name","age")[0].id);
alert($("name","age")[0].value);
</script></body></html>
結果
name
taro
-てっきりMochiKit.Baseに存在するのかと思ってた。
addElementClass(element,className):
エレメントにClass属性を追加する
例
<div id="name" class="Humen" />
<script>
addElementClass($("name"), "Women");
alert($("name").className);
</script></body></html>
結果
-通常は、指定したエレメントに対してクラス名を追加する。
-指定したクラスがエレメントで追加済みだったときは何も処理を行わない。
-他のクラスがエレメントに存在した場合は、そのクラス指定はそのまま残し、指定したクラスを追加する。
addLoadEvent(func)
ウィンドウがロードされたときの処理を指定する。（window.onloadイベントに処理を追加する）
<script>
addLoadEvent(function(){alert("onLoad!")});
</script>
</head><body></body></html>
結果
addToCallStack(target,path,func[,once]):
targetで渡されたノードのpathプロパティに関数を追加する。
4つ目の引数onceにtrueを指定した場合、ファンクションのコールスタック実行が完了した時点でtargetのpathプロパティにはnullが設定される。
例
<div id="button" style="width:30px;height:30px;background-color:#ccc;" />
<script>
addToCallStack($("button"), "onclick", function(){alert("onclick!")});
</script>
</body></html>
結果
appendChildNodes(node[,childNode[,...]]):
指定したノードに子要素を追加する。
例（※LIは後述。createDOMの部分で登場する）
<ul id="country"></ul>
<script>
appendChildNodes($(country), LI("Japan"));
appendChildNodes($(country), LI("China"));
appendChildNodes($(country), LI("Korea"));
</script>
</body></html>
結果
・China
・Korea
-子ノードの追加が超簡単！
insertSiblingNodesBefore(node[,siblingNode[,...]]):
sibling???
sibling
【名】
兄弟｛きょうだい｝、姉妹｛しまい｝
・Ken took his younger siblings to the park. : ケンは弟たちを公園へ連れていった。
・Do you have any siblings? : きょうだいはいますか？
《siblings》兄弟姉妹｛きょうだい しまい｝たち
《siblings》《生物》同胞種｛どうほうしゅ｝
【レベル】9、【変化】《複》siblings、【＠】シブリング、【分節】sib・ling
なるほど。
…と思ったら、MochiKit1.4+だった。パス。
insertSiblingNodesAfter(node[,siblingNode[,...]]):
MochiKit1.4+。パス。
createDOM(name[,attrs[,node[,...]]]):
エレメントの作成。
例
<script>
appendChildNodes(currentDocument().body, createDOM("A", {"href":"http://www.yahoo.co.jp/"}, "Yahoo!Japan"));
</script>
</body></html>
結果
[[Yahoo!Japan>http://www.yahoo.co.jp/]]
上記の例では、3つの引数に文字列を渡しているのでテキストノードが作成されている（リンクのラベル）。
ULに対するLIやSelectに対するOptionのような、いわゆる子ノードも作成できる。
便利なエイリアス
HTML用に以下のエイリアスが用意されている。
-A
-BUTTON
-BR
-CANVAS
-DD
-DIV
-DL
-DT
-FIELDSET
-FORM
-H1
-H2
-H3
-H4
-H5
-H6
-HR
-IMG
-INPUT
-LABEL
-LEGEND
-LI
-OL
-OPTGROUP
-OPTION
-P
-PRE
-SELECT
-SPAN
-STRONG
-TABLE
-TBODY
-TD
-TEXTAREA
-TFOOT
-TH
-THEAD
-TR
-TT
-UL
たとえばAの場合、以下は同義
A({"href":"http://www.yahoo.co.jp/"}, "Yahoo!Japan");
createDOMFunc(tag[,attrs[,node[,...]]]):
createDOMのエイリアス関数を作るための関数
例
ITEM({"price":"10"});
-最初よくわからなかったんだけど、ソース見て納得。
実装
var m=MochiKit.Base;
return m.partial.apply(this,m.extend([MochiKit.DOM.createDOM],arguments));
}
currentDocument():
一般的なDOMでいうdocumentオブジェクトの取得
例
currentWindow():
一般的なDOMでいうwindowオブジェクトの取得
例
emitHTML(dom[,lst]):
http://eow.alc.co.jp/emit/
【他動】
〔におい・光などを〕放つ、出す、放射｛ほうしゃ｝する
・The sun constantly emits light and heat into space. : 太陽は常に光と熱を宇宙に放っている。
〜を発令｛はつれい｝する、発する、発行｛はっこう｝する
〜を立てる、口に出す
《化》揮散｛きさん｝する
受け取ったノードを、HTML文字列として配列に分割する。
例
<script>
var doc = emitHTML(currentDocument().body);
alert(doc.join(""));
</script>
</body></html>
結果
bottomMargin="15" dataFld="null" dataFormatAs="null" dataSrc="null"
leftMargin="10" link="" noWrap="false" onafterprint="null" onbeforeprint="null"
onbeforeunload="null" onload="null" onselect="null" onunload="null"
rightMargin="10" scroll="" text="" topMargin="15" vLink="">
<script charset="" dataFld="null" dataFormatAs="null" dataSrc="null" defer="false"
event="" for="" onerror="null" src="" type=""/>
</body>
-すべての属性が出力される
escapeHTML
HTML特殊文字のエスケープ処理を実行
< → <
& → &
" → "
例
<script>
alert(escapeHTML(‘<"hello"&"bye">’));
</script>
</body></html>
結果
focusOnLoad(element):
ロード時にフォーカスを有効にするエレメントを指定します。
例
<input type="text" name="name" />
<script>
focusOnLoad($("name"));
</script>
</body></html>
-onLoad()時のonFocus()を簡単に実現
formContents(elem=document.body):
指定したエレメントのDOMツリーを走査して、フォームエレメント名と値をカンマ区切りで取得する。
引数を省略すると、document.bodyが対象となる。
例
<input type="text" name="name" value="なまえ" />
<input type="hidden" name="age" value="10" />
<input type="password" name="memo" value="あかさたな" />
<script>
alert(formContents());
</script>
</body></html>
結果
getElement(id[,...]):
指定したIDを持つノードを取得。
引数が複数の場合はエレメントを配列として取得する。
$()と等価。
例
<input id="name" type="text" name="name" value="なまえ" />
<input id="age" type="hidden" name="age" value="10" />
<script>
alert(getElement("name"));
alert(getElement("name", "age"));
</script>
</body></html>
getElementsByTagAndClassName(tagName,className,parent=document):
指定したタグ、クラス（両方またはどちらか一方）に一致したエレメントを取得する。
例
<span class="text" />
<span class="text" />
<div class="text" />
<span class="document" />
<span class="document" />
<script>
alert(getElementsByTagAndClassName("span", null));
alert(getElementsByTagAndClassName("span", "text"));
alert(getElementsByTagAndClassName(null, "text"));
</script>
</body></html>
結果
[object],[object]←spanタグのtextクラスのエレメントを取得
[object],[object],[object]←textクラスのエレメントを取得
getFirstElementByTagAndClassName(tagName,className,parent=document):
MochiKit 1.4+ パス
getFirstParentByTagAndClassName(elem,tagName=”,className=null):
MochiKit 1.4+ パス
getNodeAttribute(node,attr):
受け取ったノードの属性を値を取得？
その際に、例外を発生させない。（例外発生時にはnullを返却する）
JavaScript/MochiKit/Iter
実験中
code
/*
alert(operator.gt(1, 10));
theSum = sum(takewhile(
imap(
partial(operator.mul, 2),
count()
)
));
//ok( theSum == (0 + 2 + 4 + 6 + 8) );
var s = sum([2, 4, 6]);
alert(s);
//ok( s == 12 );
var c = counter();
alert( c());
alert(c() );
var r = range(1, 10);
// var r = [0,1,2,3,4,5,6,7,8,9];
//alert(r.next());
//alert(list(r));
/*
function(i){
alert(i);
});
//var a = cycle(r);
//alert(a.next());
//alert(a.next());
//alert(a.next());
//alert(a.next());
//var a = range(5, 7);
//var b = range(1, 3);
//var c = chain(a, b);
//alert(c.next());
//alert(c.next());
//alert(c.next());
//alert(c.next());
// starting
//var d = dropwhile(function(i){
// if(i != 5){return true;}else{return false;}
//}, r);
//
//alert(d.next());
//alert(d.next());
//alert(d.next());
//
//var e = every(r, function(i){return i > 10});
//alert(e);//bool
// todo
//exhaust
//applymap
//(?)
//r = new Array(1,1,1,2,2,3,4,5);
//alert(r);
//var g = groupby(r);
//alert(g.next());
//alert(g.next());
//alert(g.next());
//(?)
//r = new Array(1,1,1,2,2,3,4,5);
//alert(r);
//var g = groupby_as_array(r);
//alert(g);
//var i = ifilter(function(i){if(i%2==0){return true;}else{return false;}}, r);
//alert(i.next());
//alert(i.next());
//alert(i.next());
//alert(i.next());
//alert(i.next());
//var i = ifilterfalse(function(i){if(i%2==0){return true;}else{return false;}}, r);
//alert(i.next());
//alert(i.next());
//alert(i.next());
//alert(i.next());
//alert(i.next());
//var i = imap(function(v){return v}, r);
//alert(i.next());
//alert(i.next());
//alert(i.next());
//var is = islice(r, 1, 4, 1);
//alert(is.next());
//alert(is.next());
//alert(is.next());
//var it = iter(r);
//var it = iter([3,5,7,9]);
//alert(it.next());
//alert(it.next());
//alert(it.next());
//var r2 = range(2, 11);
//var iz = izip(r, r2);
//alert(iz.next());
//alert(iz.next());
//var a = list(r); // a = array
//alert(a);
//var it = iter(r);
//alert(next(it));
//alert(next(it));
//alert(next(it));
// a = range(1,10);
JavaScript/MochiKit/ライブラリ一覧
-MochiKit.Async – manage asynchronous
–非同期管理
-MochiKit.Base – functional programming and useful comparisons
–関数プログラミングと比較
-MochiKit.DOM – painless DOM manipulation API
–易しいDOM操作
-MochiKit.DragAndDrop – drag and drop
–ドラッグアンドドロップ
-MochiKit.Color – color abstraction with CSS3 support
–MochiKit.ColorCSS3 でサポートされる色抽象概念
-MochiKit.DateTime – "what time is it anyway?"
–日時関連
-MochiKit.Format – string formatting goes here
–フォーマット
-MochiKit.Iter – itertools for JavaScript; iteration made HARD, and then easy
–イテレーション
-MochiKit.Logging – we’re all tired of alert()
–ロギング
-MochiKit.LoggingPane – interactive MochiKit.Logging pane
–ログ表示用のパネル
-MochiKit.Selector – selecting elements by CSS selector syntax
–CSSセレクタ
-MochiKit.Signal – simple universal event handling
–簡単で万能ななイベントハンドリング
-MochiKit.Style – painless CSS manipulation API
–易しいCSS操作
-MochiKit.Sortable – sortable
–ソート
-MochiKit.Visual – visual effects
–ヴィジュアル効果
プロフィール
@hacker634
へなちょこシステムエンジニア。Java,PHP,C#,JS,Objective-C,DB,なんでも好きです。ヘビーな言語もLLも全部好き。SIer→受託屋→フリーランス→ちびっこWEB開発会社勤務（いまココ）担当は、ディレクション、アーキテクト、設計、開発、テスト、保守、研究、雑用、デザイン。つまり、なんでも屋。 Follow @hacker634-
リンク
