Y.A.M の雑記帳: 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>

Y.A.M の雑記帳

2012年4月4日水曜日

Dart　DOMを操作する

0 件のコメント:

コメントを投稿

2012年4月4日水曜日

Dart DOMを操作する

0 件のコメント:

コメントを投稿

Dart　DOMを操作する