Dart DOMを操作する

view plainprint?

1. #import('dart:html');  
2.   
3. void main() {  
4.   document.query("#status").innerHTML = "Hello World!";  
5. }  

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

Library html

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

html_dartium.dat

view plainprint?

1. #library('html');  
2. ...  
3. Document get document() {  
4.   if (__document == null) {  
5.     _initialize();  
6.   }  
7.   return __document;  
8. }  

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

id でエレメントを見つける

view plainprint?

1. document.query('#selector');  

document.query('#selector');
class で最初のエレメントを1つ見つける

view plainprint?

1. document.query('.classname');  

document.query('.classname');
class で複数のエレメントを見つける

view plainprint?

1. document.queryAll('.classname');  

document.queryAll('.classname');
tag で最初のエレメントを1つ見つける

view plainprint?

1. document.query('div');  

document.query('div');
tag で複数のエレメントを見つける

view plainprint?

1. document.queryAll('div');  

document.queryAll('div');
name で最初のエレメントを1つ見つける

view plainprint?

1. document.query('[name="form"]');  

document.query('[name="form"]');
name で複数のエレメントを見つける

view plainprint?

1. document.queryAll('[name="form"]');  

document.queryAll('[name="form"]');

最初の child node を取得する

view plainprint?

1. element.nodes[0];  

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

view plainprint?

1. element.elements[0];  

element.elements[0];

エレメントを tag から作成

view plainprint?

1. Element element = new Element.tag('div');  

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

view plainprint?

1. Element element = new Element.html('<p>html string</p>');  

Element element = new Element.html('

html string

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


エレメントに子エレメントを追加

view plainprint?

1. element.elements.add(newElement);  

element.elements.add(newElement);

エレメントにイベントハンドラを追加

view plainprint?

1. element.on.click.add(handleClick);  

element.on.click.add(handleClick);
エレメントからイベントハンドラを削除

view plainprint?

1. element.on.click.remove(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 ...

などたくさんある。

view plainprint?

1. #import('dart:html');  
2.   
3. void main() {  
4.   
5.   // id でエレメント取得  
6.   document.query("#status").innerHTML = "Find one element by id";  
7.     
8.   // class で最初のエレメント取得  
9.   document.query(".message").innerHTML = "Find one element by class";  
10.   
11.   // class で複数のエレメント取得  
12.   ElementList elements = document.queryAll(".message2");  
13.   for(Element e in elements) {  
14.     e.innerHTML = "Find many elements by class";  
15.   }  
16.     
17.   // tag で最初のエレメント取得  
18.   document.query('h2').style.background = "#9999ff";  
19.     
20.   // tag で複数のエレメント取得  
21.   document.queryAll('div').forEach((Element e) {  
22.     e.style.background = "#ccccff";  
23.   });  
24.     
25.   // name で最初のエレメント取得  
26.   document.query('[name="form"]').style.background = "#ffeeee";  
27.     
28.   // name で複数のエレメント取得  
29.   document.queryAll('[name="form"]');  
30.     
31.   // child nodeを取得  
32.   Element elem = document.query("#main");  
33.   if(!elem.nodes.isEmpty()) {  
34.     Node node = elem.nodes[0];  
35.   }  
36.   
37.   // element を tag から作成  
38.   Element element = new Element.tag('div');  
39.   element.innerHTML = "create new an element from tag";  
40.     
41.   // element を html から作成  
42.   Element element2 = new Element.html('<p>create new an element from html</p>');  
43.     
44.   // element を追加  
45.   elem.elements.add(element);  
46.   elem.elements.add(element2);  
47.     
48.   // element を削除  
49.   elem.elements[0].remove();  
50.     
51.   // イベントハンドラ  
52.   Element btn = document.query("#button");  
53.   btn.on.click.add((e) {  
54.     btn.innerHTML = "Clicked!";  
55.   });  
56. }  

#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!"; }); }

view plainprint?

1. <!DOCTYPE html>  
2.   
3. <html>  
4.   <head>  
5.     <title>hellodart</title>  
6.   </head>  
7.   <body>  
8.     <h2 id="status">dart is not running</h2>  
9.       
10.     <div class="message"></div>  
11.     <div class="message2"></div>  
12.     <div class="message2"></div>  
13.       
14.     <input name="form"></input>  
15.       
16.     <div id="main">  
17.       <div>First</div>  
18.     </div>  
19.       
20.     <div id="button">Click here!</div>  
21.   
22.   
23.     <script type="application/dart" src="hellodart.dart"></script>  
24.     <script src="http://dart.googlecode.com/svn/branches/bleeding_edge/dart/client/dart.js"></script>  
25.   </body>  
26. </html>  

<!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>