自分戦略研究所 | 自分戦略研究室 | キャリア実現研究室 | スキル創造研究室 | 生活向上研究室 | 組み込みキャリア研究室 | コミュニティ活動支援室 | エンジニアライフ | IT業界就職ラボ |
スラッシュドット    はてなブックマーク  Yahoo!ブックマークに登録  印刷

DOMの基本を学ぼう

第7回　JavaScriptでHTMLをダイナミックに書き換える　後編

羽田野太巳
2008/8/4

第6回｜1　2　3｜次のページ

旧来のDHTMLの手法では、JavaScriptから操作できるHTML要素に限りがありましたが、DOMでは、HTML上のありとあらゆる要素を自由自在に読み取ったり、書き換えることができるようになります。本連載では、主にDOM Level 1で規定されている手法を使い、JavaScriptでどのようにHTML上の要素へアクセスするのか、そして、それをどうやって書き換えるのかを詳しく解説します。これにより、JavaScriptからHTML要素を手に取るように操れるようになります。

　前回の「JavaScriptでHTMLをダイナミックに書き換える　前編」では、タグ要素を追加するテクニックを解説しました。今回はその続きで、要素の削除、複製などの取り扱いを解説します。

◆今回学ぶこと
・要素を削除する（removeChild）
・要素を置き換える（replaceChild）
・要素を複製する（cloneNode）
・まとめて更新を行う（DocumentFragment）

本連載は、ソフトバンククリエイティブ刊行の『標準DOMスクリプティング』のうち「第2章 DOMの基本」を、同社の許可を得て転載するものです。

本書は、DOM（Document Object Model）とJavaScriptの関係を分かりやすく解説しています。さらに、JavaScriptからDOMを介して、いかにしてHTMLやXMLの操作ができるのかを紹介しています。またこれらのことを学びながら、クロスブラウザ対策の重要性も理解できるようになると思います。

なお、 Webでの連載として転載するに当たり、若干表現を変更している点があります（例えば「本書は」としている部分は「本連載は」としていることや図版などの省略など）。その点ご了承ください。

■要素を削除する（removeChild）

　すでにHTML内に存在している要素を削除する場合には、removeChildメソッドを使います。メソッド名を見ておわかりかと思いますが、子要素を削除するメソッドですので、先ほどのinsertBeforeメソッドと同様に削除対象の要素の親要素が必要になります。

　removeChildメソッドには、削除したい要素のノードオブジェクトを引数に与えます。

removeChild.html
<div id="toc">
　 <div id="chapter1">DOM</div>
　 <div id="chapter2">CSS</div>
　 <div id="chapter3">HTML</div>
</div>

<script type="text/javascript">
　 /*（1）chapter2のDIVタグの要素ノードオブジェクト*/
　 var targetNode = document.getElementById('chapter2');
　 /*（2）chapter2のDIVタグ要素を削除*/
　 targetNode.parentNode.removeChild(targetNode);
</script>

　要素の削除は、それを参照するノードオブジェクトさえ用意できれば、とても簡単に処理できます。

　（1）では、id属性値に"chapter2"がセットされたDIVタグの要素ノードオブジェクトを変数targetNodeに格納します。

　（2）で、removeChildメソッドの引数にtargetNodeを与えます。親要素はtargetNode.parentNodeで代用していますが、document.getElementById('toc')でも同様の結果が得られます。

　removeChildメソッドは、引数に与えた要素ノードオブジェクトを丸ごと削除します。末端のノードから順に削除する必要はありません。たとえば、サンプルのHTMLすべてを削除したい場合は、（1）を次のように書き換えるだけで実現できます。

　var targetNode = document.getElementById('toc');

■要素を置き換える（replaceChild）

　ある特定の要素をまったく別の要素に置き換えるには、replaceChildメソッドを使います。replaceChildメソッドは子要素を置き換えるメソッドですので、対象となる要素の親要素のノードオブジェクトが必要です。

　replaceChildメソッドは2つの引数を与えます。1つ目には新たに置き換える要素ノードオブジェクトで、2つ目には対象となる要素ノードオブジェクトです。

　サンプルで使い方を見ていきましょう。

replaceChild.html
<div id="toc">
<div id="chapter1">DOM</div>
<div id="chapter2">CSS</div>
<div id="chapter3">HTML</div>
</div>

<script type="text/javascript">
/*（1）chapter3のDIVタグ要素のノードオブジェクト*/
var targetNode = document.getElementById('chapter3');
/*（2）新たなDIVタグを作成*/
var newNode = document.createElement('div');
var textNode = document.createTextNode('付録A');
newNode.appendChild(textNode);
newNode.id = 'appendixa';
/*（3）chapter3のDIVタグを置き換える*/
targetNode.parentNode.replaceChild(newNode, targetNode);
</script>

　このサンプルでは、

　<div id="chapter3">HTML</div>

を、

　<div id="appendixa">付録A</div>

にそっくり置き換えます。

　（1）では、置き換えの対象となるDIVタグの要素ノードオブジェクトを、targetNodeに格納します。

　（2）では、新たに置き換える要素ノードオブジェクトを生成し、newNodeに格納します。

　（3）で、targetNodeをnewNodeにそっくり置き換えます。この段階で、HTMLが切り替わります。

要素を複製する

第6回｜1　2　3｜次のページ


＠IT Special 注目企業
【転職体験談】「もっと多くのユーザーに使って欲しい」⇒ mixiへの転職に成功！
8年間のSIer生活で得た経験とスキルを生かして転職活動。評価のポイントはどこ？
＠IT Special ラーニング
【経営戦略】⇒「いつか勉強しよう」ではなく「いまこそ勉強すべき」スキル
50％のユーザー企業が「戦略を立案できるIT技術者」と仕事をしたがっている
気になる「社会人大学院」という選択肢
仕事との両立は本当に可能？ 独学とは何が違う？ 実際の学生・卒業生6人に聞いた
関連キーワード
プログラマ・SE
プログラミングスキル

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード

＠IT自分戦略研究所 新着記事

スキルアップに役立つサービス
ITトレメ 1日1問、模擬試験問題をメールで届けます
ラーニングカレンダー ITスキル研修4000件、最新情報の検索できます

キャリアアップに役立つサービス
3分で診断→わたしは社外で通用するエンジニアか？
今の年収で納得できますか？ 匿名査定で適正年収を確認してみましょう
起業まではフリーエンジニアで　派遣エンジニア列伝8回目

スキルアップ／キャリアアップ（JOB@IT）

スポンサーからのお知らせ

･ｹ･ｭ･�ﾁﾏﾂ､ｸｦｵ貍ｼ･ｹ･ﾝ･ｵ｡ｼ

- PR -

お勧め求人情報


＠IT Special ラーニング
◆クライアント企業から求められる人材
⇒IT技術と経営戦略を併せ持つ「戦略家」
New！
◆気になる社会人大学院。興味はあるけど仕
事と両立可能？実際に通った6人に聞いた
→ インデックス


ITトレメ・今日の問題

基本情報技術者試験

エンドユーザーヘの障害対応窓口としてヘルプデスクを設置した。報告を受けた障害の根本的な原因は不明であるが、応急処置を必要としているとき、ヘルプデスクが対応する順番として、最も適切なものはどれか。＜13年秋FE問57＞

»出題ページへ