こんにちは。キャスレーコンサルティングSI部の秦（はた）です。
前回、Chrome拡張機能についてご紹介させて頂きましたが、
拡張機能を作るにあたりDOM操作が必要な場面が出てきます。
そこで今回はJavaScriptでのDOM操作についてご説明します。
DOMとは？
DOM（Document Object Model）とは、W3Cから勧告されているHTML文書やXML文書を
アプリケーションから利用するためのAPIです。
対象となるドキュメントはDOMによってツリー構造を持ったオブジェクトへとパースされます。
DOM操作というのは、このツリー状のオブジェクトを操作する、ということになります。
DOMが参照するドキュメントは妥当性が保証された整形式である必要があります。
従って、タグが正しく閉じられていなかったり、無効な文字が入っていたりすると、
DOM利用時にエラーが発生してしまいます。
DOM操作をしてみよう
それでは、早速JavaScriptでDOM操作をしてみましょう。
今回は簡単なサンプルを使ってご説明します。
Sample1.html
<html> <head> <script type="text/javascript" src="Sample1.js"></script> </head> <body> <p> <form id="frmMain"> <input type="button" id="btnReplace" value="置換" onClick="replace();" /> </form> </p> <div id="e1">ここを置換</div> </body> </html>
このようなHTMLがあったとします。
divタグ内の「ここを置換」という文字列を置換してみましょう。
トリガとなるのは置換ボタンのonClickイベントです。
要素の取得
まず、getElementByIdメソッドでid属性に「e1」と付けられた要素を取得します。
今回の場合は「ここを置換」という文字列が書かれたdivタグを取得することになります。
var e1 = document.getElementById('e1');
これで変数e1にe1要素のdivタグがオブジェクトとして格納されました。
要素内のテキストを置換
要素内のテキストを置換するにはinnerTextプロパティを使います。
e1要素のinnerTextに置換する文字列を代入します。
e1.innerText = '置換しました';
replace関数
置換ボタンのonClickイベントで呼ばれるreplace関数のソースです。
Sample1.js
function replace() {
// e1要素のテキストを置換
var e1 = document.getElementById('e1');
e1.innerText = '置換しました';
}
実行結果
置換ボタン押下で文字列が変わります。
before
after
要素を追加してみよう
次に、このドキュメントに新しく要素を追加してみましょう。
要素を追加するためには、まず要素のオブジェクトを作成します。
e2というdiv要素を作成しましょう。
要素の作成
まず、createElementメソッドで要素を作成します。
var e2 = document.createElement('div');
属性の付与
次に、作成したdiv要素に「e2」というidを付けます。
e2.setAttribute("id", "e2");
子要素の追加
親要素（今回はbody）に作成した要素e2を子要素として追加します。
document.body.appendChild(e2);
replace関数
先ほど作成したreplace関数に処理を追加しましょう。
Sample1.js
function replace() {
// e1要素のテキストを置換
var e1 = document.getElementById('e1');
e1.innerText = '置換しました';
// e2要素を作成
var e2 = document.createElement('div');
e2.setAttribute("id", "e2");
e2.innerText = 'e2要素を作成しました';
// e2要素をbodyに追加
document.body.appendChild(e2);
}
実行結果
置換ボタン押下でe2要素が追加されます。
before
after
要素を削除してみよう
最後に、ドキュメントから要素を削除してみましょう。
要素の削除
削除したい要素を取得し、取得した要素を削除します。
子要素を削除するにはremoveChildメソッドを使います。
var btnReplace = document.getElementById('btnReplace');
var frmMain = document.getElementById('frmMain');
frmMain.removeChild(btnReplace);
replace関数
replace関数に処理を追加しましょう。
Sample1.js
function replace() {
// e1要素のテキストを置換
var e1 = document.getElementById('e1');
e1.innerText = '置換しました';
// e2要素を作成
var e2 = document.createElement('div');
e2.setAttribute("id", "e2");
e2.innerText = 'e2要素を作成しました';
// e2要素をbodyに追加
document.body.appendChild(e2);
// 要素の削除
var btnReplace = document.getElementById('btnReplace');
var frmMain = document.getElementById('frmMain');
frmMain.removeChild(btnReplace);
}
実行結果
置換ボタン押下で置換ボタンが削除されます。
before
after
まとめ
今回のまとめです。
要素の取得(id名)
document.getElementById('id名');
要素のテキストを変更
element.innerText = 'テキスト';
要素の作成
document.createElement('要素名');
属性の付与
element.setAttribute('属性名', '値');
属性の追加
element.appencChild(childElement);
属性の削除
element.removeChild(childElement);
以上でDOM操作の第1回目を終わります。今回は基本的な操作についてご紹介しました。
DOMについては昔から存在するものですので、Web上にもたくさんの情報が載っています。
次回はツリー構造の操作をご紹介したいと思います。
それでは、また次回。失礼します。
参考リンク
W3C
World Wide Web Consortium（ワールド・ワイド・ウェブ・コンソーシアム）の日本語サイトです。
http://www.w3c.jp/
JavaScript DOM リファレンス
JavaScriptでHTML/XMLドキュメントを操作するサンプルを掲載しています。
http://www.openspc2.org/JavaScript/JavaScript_DOM/
