Y.A.M の雑記帳: TypeScript で DOM 操作

2012年12月2日日曜日

TypeScript で DOM 操作

helloworld1.html


<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>hello world 1</title>
 </head>
 <body>
  <h1>Hello World 1</h1>
  <input type="button" id="button1" value="pick h1 tag text" />
  <br />
  <br />
  <div id="authors">
   <div>芥川　竜之介</div>
   <div>夏目　漱石</div>
   <div></div>
   <div>江戸川　乱歩</div>
  </div>
  <input type="button" id="button2" value="pick all authors" />

  <script src="helloworld1.js"></script>

 </body>
</html>

helloworld1.ts


function helloworld1(e : MouseEvent) {
 var h1Elm : Node = document.getElementsByTagName('h1')[0];
 var textNode : Node = h1Elm.childNodes[0];
 var text : string = textNode.nodeValue;
 alert(text);
}

function helloworld2(e : MouseEvent) {
 var authorsElem : Node = document.getElementById('authors');
 var authors = new Array();
 for (var i = 0; i < authorsElem.childNodes.length; i++) {
  var node = authorsElem.childNodes.item(i);
  if(node.nodeType != 1) {
   continue;
  }
  if(!node.hasChildNodes()) {
   continue;
  }
  if(node.firstChild.nodeType != 3) {
   continue;
  }
  authors.push(node.firstChild.nodeValue);
 }
 alert(authors.join("\n"));
}

var btn1 : HTMLElement = document.getElementById("button1");
btn1.addEventListener("click", helloworld1, false);

var btn2 : HTMLElement = document.getElementById("button2");
btn2.addEventListener("click", helloworld2, false);

ノードの種類	nodeType	nodeName	nodeValue
要素ノード	1	タグ名	null
属性ノード	2	属性名	属性値
テキストノード	3	#text	テキストの内容
コメントノード	8	#comment	コメントの内容
ドキュメントノード	9	#document	null

Y.A.M の雑記帳

2012年12月2日日曜日

TypeScript で DOM 操作

0 件のコメント:

コメントを投稿