プログラミング学習の記録 325 『初めてのJavaScript 第2版』(シェリー・パワーズ著、武舎広幸+武舎るみ訳、オライリー・ジャパン、2009年、ISBN978-4-84311-425-5)の11章(ドキュメントオブジェクトモデル)

開発環境

• Microsoft Windows 7 Home Premium (OS)
• Internet Explorer 9 Beta(プラウザ)
• Microsoft Visual Web Developer 2010 Express Edition (IDE)
• Script言語:JavaScript

『初めてのJavaScript 第2版』(シェリー・パワーズ著、武舎広幸+武舎るみ訳、オライリー・ジャパン、2009年、ISBN978-4-84311-425-5)の11章(ドキュメントオブジェクトモデル)の練習問題を解いてみる。

11-1.

すべてのHTML要素がサポートしている属性はid属性、title属性、lang属性、className属性の4つ。

 

11-2.

要素の周囲はtagNameプロパティに保持されている。

 

11-3.

childNodesでtargetNodeの子ノードのリストを取得し、forループ等で各子ノードの種類をnodeTypeで取得すればよい。

例:

for (var i = 0; i < targetNode.childNodes.length; i++) { document.writeln("<p>" + targetNode.childNodes[i].nodeType + "</p>"); }

 

11-4.

以下のコードでこのページのすべてのdiv要素のid属性を取得、表示できる。

var divs = document.getElementsByTagName("div"); var str = "<p><a href='javascript:history.go(-1)'>戻る</a></p>"; for (var i = 0; i < divs.length; i++) { str += "<p>" + (i + 1) + " : " + divs[i].id + "</p>"; } str += "<p><a href='javascript:history.go(-1)'>戻る</a></p>" document.writeln(str);

 

11-5.

<div id="elem1" class="thediv">...</div>にアクセスするのに使えるメソッドは

1. document.getElementById("elem1");
2. document.getElementsByTagName("div")[0];
3. document.getElementsByClassName("thediv")[0];

の3つ。

 

11-6.

var elem1 = document.getElementById("elem "); var h1 = elem1.getElementsByTagName("h1")[0]; var p = document.createElement("p"); var text = document.createTextNode("パラグラフ"); p.appendChild(text); elem1.replaceChild(p, h1);

見出し