2012年4月4日水曜日

Dart DOMを操作する

#import('dart:html'); void main() { document.query("#status").innerHTML = "Hello World!"; } Dart で DOM 操作をするには html ライブラリを使います。
SVG や WebGL のインタフェースなども用意されています。

Library html

Document クラスのオブジェクトを取得する getter が定義されていて、

html_dartium.dat #library('html'); ... Document get document() { if (__document == null) { _initialize(); } return __document; } main() のなかの document はこの getter を呼んでいる = Document のオブジェクトということです。

id でエレメントを見つける document.query('#selector');
class で最初のエレメントを1つ見つける document.query('.classname');
class で複数のエレメントを見つける document.queryAll('.classname');
tag で最初のエレメントを1つ見つける document.query('div');
tag で複数のエレメントを見つける document.queryAll('div');
name で最初のエレメントを1つ見つける document.query('[name="form"]');
name で複数のエレメントを見つける document.queryAll('[name="form"]');

最初の child node を取得する element.nodes[0];
最初の child element を取得する element.elements[0];

エレメントを tag から作成 Element element = new Element.tag('div');
エレメントを html から作成 Element element = new Element.html('

html string

');
* html の引数の html 文字が正しい文法になっていないといけない。


エレメントに子エレメントを追加 element.elements.add(newElement);

エレメントにイベントハンドラを追加 element.on.click.add(handleClick);
エレメントからイベントハンドラを削除 element.on.click.remove(handleClick); * element.on.hoge.add(handleEvent); / element.on.hoge.remove(handleEvent);
element.on は ElementEvents で例えば
  • click
  • doubleClick
  • drag
  • drop
  • focus
  • keyDown
  • mouseDown ...
などたくさんある。

#import('dart:html'); void main() { // id でエレメント取得 document.query("#status").innerHTML = "Find one element by id"; // class で最初のエレメント取得 document.query(".message").innerHTML = "Find one element by class"; // class で複数のエレメント取得 ElementList elements = document.queryAll(".message2"); for(Element e in elements) { e.innerHTML = "Find many elements by class"; } // tag で最初のエレメント取得 document.query('h2').style.background = "#9999ff"; // tag で複数のエレメント取得 document.queryAll('div').forEach((Element e) { e.style.background = "#ccccff"; }); // name で最初のエレメント取得 document.query('[name="form"]').style.background = "#ffeeee"; // name で複数のエレメント取得 document.queryAll('[name="form"]'); // child nodeを取得 Element elem = document.query("#main"); if(!elem.nodes.isEmpty()) { Node node = elem.nodes[0]; } // element を tag から作成 Element element = new Element.tag('div'); element.innerHTML = "create new an element from tag"; // element を html から作成 Element element2 = new Element.html('

create new an element from html

'); // element を追加 elem.elements.add(element); elem.elements.add(element2); // element を削除 elem.elements[0].remove(); // イベントハンドラ Element btn = document.query("#button"); btn.on.click.add((e) { btn.innerHTML = "Clicked!"; }); }
<!DOCTYPE html> <html> <head> <title>hellodart</title> </head> <body> <h2 id="status">dart is not running</h2> <div class="message"></div> <div class="message2"></div> <div class="message2"></div> <input name="form"></input> <div id="main"> <div>First</div> </div> <div id="button">Click here!</div> <script type="application/dart" src="hellodart.dart"></script> <script src="http://dart.googlecode.com/svn/branches/bleeding_edge/dart/client/dart.js"></script> </body> </html>

0 件のコメント:

コメントを投稿