改訂新版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('ボタンがクリックされました'); }
本
改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで
- 作者: 山田祥寛
- 出版社/メーカー: 技術評論社
- 発売日: 2016/09/30
- メディア: 大型本
- この商品を含むブログを見る