読者です 読者をやめる 読者になる 読者になる

鴨川にあこがれる日々

軽い技術っぽい記事かいてます

Jsと戯れる

JavaScript MacOSX HTML

女子小学生と合法的に?戯れていた小学生を懐かしく思えるようになってきた。

さて


を使ってajaxとかそういう辺をなんとか勉強してる最中。
とりあえず今日やった部分だけでも

javascriptででてくるDOMの話
こういうHTMLコードがあったとする

<!DOCTYPE html>
<html lang="ja">
<head>
	<title>exmaple</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="html5-doctor-reset-stylesheet.css">
	<link rel="stylesheet" type="text/css" href="screnn.css">
	<script type="text/javascript" src="d3.v3/d3.v3.js"></script>
</head>
<body>
	<script type="text/javascript" src="text.js">
	</script>
	<form name="f">
		<select id="food" name="hoge">
			<option value="1"></option>
			<option value="2"></option>
			<option value="3"></option>
			<option value="4"></option>
		</select>
	<label>name:
		<input type="text" id="name" size="15" /></label>
		<input type="button" value="submit" />
	</form>
</body>
</html>

でselectタグ下にあるvalueの値が欲しいと仮定。
それをjsで相対的に取得するのが今回のプログラム

window.onload = function () {
  result = [];
  var s = document.getElementById('food');
  var elements = s.childNodes;
  for (var i = 0; i < elements.length; i++) {
    element = elements.item(i);
    if (element.nodeType == 1){
      result.push(element.value);
    }
  };
  window.alert(result.join('\n'));
}

1~4が縦に並んだ形でアラートで表示される。
resultはvalueの値を格納する配列
get.documentByIdで id="food"の含まれるタグを取得
childNodesで取得したタグの子ノードを配列の形で取得(木構造を思い出そう)
あとはforでそれぞれの値にアクセスしてresultに格納
今回は関係ないが、子ノードは必ずしもタグだけでなく、要素も含まれるし、それはブラウザによって挙動は変わる。nodeTypeでノードの種類を判定している
最後にjoinしておわり。

Rubyと似てる書き方だったからそこそこ楽に出来たがチェインでつないでいくと長くなる感じがする。
d3.jsでグラフっぽいのが早く作りたい…