山傘のプログラミング勉強日記

プログラミングに関する日記とどうでもよい雑記からなるブログです。

改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで その9

Chapter 6 HTML や XML の文書を操作する - DOM (Document Object Model) -

前回に引き続き、HTML や XML について扱います。

ノードウォーキン

特定のノードから相対的な位置関係を利用して、効率よく要素を取得するためにノードウォーキングを行います。

<html>
<head>
  <title></title>
</head>
<body>

  <form>
    <label for="food">一番好きな麺類は?</label>
    <select id="food">
      <option value="ラーメン">ラーメン</option>
      <option value="そば">そば</option>
      <option value="うどん">うどん</option>
    </select>
    <input type="submit" value="送信"/>
  </form>
  <script type="text/javascript" src="../js/sample4.js"></script>
</body>
</html>

food という id を持つノードを取り出して子ノードの要素を表示させます。

var s = document.getElementById('food');
var opts = s.childNodes;
for (var i = 0, len = opts.length; i < len; i++) {
  var opt = opts.item(i);
  if (opt.nodeType === 1) {
    console.log(opt.value);
  }
}

イベントハンドラ

<html>
<head>
  <title></title>
</head>
<body>
  <script type="text/javascript" src="../js/sample5.js"></script>
  <input id="btn" type="button" value="ダイアログ表示" onclick="btn_click()"/>
</body>
</html> 
function btn_click() {
  window.alert('ボタンがクリックされました');
}