YUI!DOM編

Javascript

久々にyuiの勉強。今回はDOM。
Domを扱うにはYAHOO.util.Domを利用します。インスタンス化不要のシングルトンクラスとあります。
yuiのページには以下の章立てで説明がありますので、訳しながら適当にまとめます。

  • Positioning HTML Elements
  • Getting and Setting Styles
  • Getting the Viewport Size
  • Managing Class Names

■Positioning HTML Elements
要素の位置情報を取得もしくは設定するようなメソッドがあるよ、ということです。

var position = YAHOO.util.Dom.getXY('hoge');
console.log('x : ' + position[0] + ', y : ' + position[1]);

こんな感じで取得できます。引数はidの値です。逆に要素の位置を設定するには以下。

YAHOO.util.Dom.setXY('hoge', [10,10]);

このメソッドかなーり使えるかも、です。確かこの位置取得ってかなーり面倒くさかったと記憶してます。ブラウザによって動きが異なるとかなんとか。定期的にblogとかで話題になっているのも見たことあります。yuiがその辺の面倒くさいところを吸収してくれているかも!?実際のソースを見ても泥臭そうな事をしてそうでした。


■Getting and Setting Styles
CSSに関するメソッドもあるぞー。

YAHOO.util.Dom.setStyle(['hoge', 'fuga'], 'width', '200px');

おぉこれは便利。一度に複数の要素に対して同一のスタイルを設定することが出来ます。


■Getting the Viewport Size
現在表示されている幅や高さを取得できる。

var position = {
  w:YAHOO.util.Dom.getViewportWidth(),
  h:YAHOO.util.Dom.getViewportHeight()
};

yuiのapiドキュメントを読むとこれ関連のメソッドはいくつかあることが分かる。
getClientWidth/Height
getDocumentWidth/Height
getDocumentScrollLeft/Top


■Managing Class Names
html要素のclass属性に関するメソッドの紹介。

  var elems = YAHOO.util.getElementsByClassName('container');

そういや意外となかったんやね、classで要素を取得するっての。第二引数も追加できて、'div'とかやると「div要素のclass属性にcontainerが指定されているもの」っていう更なる絞込みが出来る。
あと、getElementByIdも拡張されていて、引数にidの配列が渡せる。すると結果はそのidに対応した要素の配列。


■その他
DOMっていうだけあって、apiドキュメントを見てたら大半は子要素を取得したり孫要素を取得したり、次の要素や前の要素を取得する・・・（以下略）です。
Dom関連の操作は結構利用することが多いので、yuiによって拡張されているってことを知っておくといざと言う時に役立ちそうです。


ただYAHOO.util.Domって打つのが嫌だ。長くてだるい。ちなみにyuiのソース内部では「Y.Dom」って略されてた。やっぱ面倒臭いんじゃん！!