今日も上記の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)');
