Google API Expertが解説するClosure-libraryプログラミングガイドを読む（2）

今日も上記のClosure-library本を読み進めているのですが、
少し、DOM操作のコードを動かしてみたので、
DOM操作についてのメモを残しておきたいと思います。

まず、base.jsとdeps.jsを取り込むコードを入れておきます。

  <link rel="stylesheet" href="closure-library/closure/goog/css/common.css" />
  <link rel="stylesheet" href="closure-library/closure/goog/css/hsvpalette.css" />
  <script src="closure-library/closure/goog/base.js"></script>
  <script src="deps.js"></script>

で、最初にDOMのモジュールを読み込みます。

<script>
    // DOMの追加モジュールの読み込み
    goog.require('goog.dom');
    goog.require('goog.dom.DomHelper');
</script>

次に実際にDOMの追加です。

<script>
    // iframeをbodyに追加する。
    var iframe = goog.dom.createDom('IFRAME', {'src': 'about:blank'});
    goog.dom.appendChild(document.body, iframe);

    var fdoc = goog.dom.getFrameContentDocument(iframe);
    var helper = goog.dom.getDomHelper(ifdoc);

    // iframeの中にdivとspanを追加
    var node = helper.createDom(
          'DIV', null,
          helper.createDom('SPAN', { 'style': 'color: red;' }, 'Hello '),
          helper.createDom('SPAN', { 'style': 'color: blue;'}, 'World!'));
    helper.appendChild(ifdoc.body, node);
</script>

ソースコードを見ていただくと分かりますが、 bodyにiframeを追加して、iframeの中にHello World!が追加されます。 createDom()が要素の生成で、appendChild()が要素の追加。 getDomHelper()でhelperを取得して、helperを通じて、 要素の子要素を追加するという感じになっています。

CSSセレクタを使った要素の取得もできるようなのですが、
どうやら、closure-libraryと違うライセンスが適用されるようで、
商用利用の場合は、気をつけたほうが良いようです。

使い方は、こんな感じだそうです。

var hoge = goog.dom.query('#list > li:nth-child(hoge)');