エレメントを操作する (1/5)
作成:2010-04-02 17:02
更新:2010-05-11 18:57
更新:2010-05-11 18:57
■エレメントを作成し組み込む
HTMLにはさまざまなタグが使われており、それらを扱うためのDOMオブジェクトも多くの種類が用意されています。これらは「エレメント」というオブジェクトです。
HTMLのDOMオブジェクトは、「Element（エレメント）」というオブジェクトをベースとして、それを継承して作成されています。例えば、<p>タグならば、HTMLParagraphElementというオブジェクトですし、<div>タグならば、HTMLDivElementというオブジェクト、といった具合です。これらのエレメントは、すべてElementを継承していますから、基本的なプロパティやメソッドは共通しています。ベースとなるElementに、それぞれのタグ特有の機能を追加してあるわけです。
JavaScriptでWebページを操作するということは、この「さまざまなエレメントをいかにして操作するか」ということだ、といってよいでしょう。エレメントを自在に扱えるようになれば、WebページをJavaScriptで自由に操作できるようになるのです。
○createElementによるエレメントの作成○
では、まず「エレメントの作成と追加」からやってみましょう。エレメントを新たに作成するには、documentオブジェクトの「createElement」メソッドを利用します。これは引数に、作成するタグの名前を指定して呼び出します。これで、そのタグに対応するエレメントが作成され返されます。
作成されたエレメントは、何のプロパティも設定されていない、まっさらな状態のものです。これに、プロパティの設定などをして独自の表示を組み立てていくわけです。例えば、<div>タグのエレメントならば、innerHTMLで表示するテキストを設定するなどするわけですね。
○appendChildによるエレメントの組み込み○
作成したエレメントは、表示したいエレメントの中に「appendChild」メソッドで組み込みます。このappendChildは、エレメントに用意されているメソッドで、引数に指定したエレメントを自身の内部に組み込みます。
HTMLでは、すべてのタグは別のタグの内部に組み込まれる形で記述されています。ドキュメントのエレメントも同様で、エレメントをドキュメントに表示させるには、それを表示させたいエレメントの中に組み込まないといけないのです。
簡単なサンプルを下のリスト部分に掲載しておきましょう。ボタンをクリックすると、doActionが呼び出され、<div id="target">の中に<div>タグが追加されていきます。
document.createElement("div")として<div>タグのエレメントを作成し、そのinnerHTMLで表示するテキストを設定します。それを、<div id="target">のエレメントのappendChildを呼び出して内部に組み込みます。実際にやってみるとわかりますが、エレメントの内部に既に他のエレメントが組み込まれている場合、appendChildするとその一番最後（つまり一番下）にエレメントは追加されます。
HTMLのDOMオブジェクトは、「Element（エレメント）」というオブジェクトをベースとして、それを継承して作成されています。例えば、<p>タグならば、HTMLParagraphElementというオブジェクトですし、<div>タグならば、HTMLDivElementというオブジェクト、といった具合です。これらのエレメントは、すべてElementを継承していますから、基本的なプロパティやメソッドは共通しています。ベースとなるElementに、それぞれのタグ特有の機能を追加してあるわけです。
JavaScriptでWebページを操作するということは、この「さまざまなエレメントをいかにして操作するか」ということだ、といってよいでしょう。エレメントを自在に扱えるようになれば、WebページをJavaScriptで自由に操作できるようになるのです。
○createElementによるエレメントの作成○
では、まず「エレメントの作成と追加」からやってみましょう。エレメントを新たに作成するには、documentオブジェクトの「createElement」メソッドを利用します。これは引数に、作成するタグの名前を指定して呼び出します。これで、そのタグに対応するエレメントが作成され返されます。
作成されたエレメントは、何のプロパティも設定されていない、まっさらな状態のものです。これに、プロパティの設定などをして独自の表示を組み立てていくわけです。例えば、<div>タグのエレメントならば、innerHTMLで表示するテキストを設定するなどするわけですね。
○appendChildによるエレメントの組み込み○
作成したエレメントは、表示したいエレメントの中に「appendChild」メソッドで組み込みます。このappendChildは、エレメントに用意されているメソッドで、引数に指定したエレメントを自身の内部に組み込みます。
HTMLでは、すべてのタグは別のタグの内部に組み込まれる形で記述されています。ドキュメントのエレメントも同様で、エレメントをドキュメントに表示させるには、それを表示させたいエレメントの中に組み込まないといけないのです。
※利用例
簡単なサンプルを下のリスト部分に掲載しておきましょう。ボタンをクリックすると、doActionが呼び出され、<div id="target">の中に<div>タグが追加されていきます。
document.createElement("div")として<div>タグのエレメントを作成し、そのinnerHTMLで表示するテキストを設定します。それを、<div id="target">のエレメントのappendChildを呼び出して内部に組み込みます。実際にやってみるとわかりますが、エレメントの内部に既に他のエレメントが組み込まれている場合、appendChildするとその一番最後（つまり一番下）にエレメントは追加されます。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
・エレメントを作る
変数 = document.createElement( タグ名 );
・エレメントを組み込む
《エレメント》.appendChild(《エレメント》);
※サンプルスクリプト
<html>
<head>
<script type="text/javascript">
<!--
var counter = 1;
function doAction(){
var newobj = document.createElement("div");
newobj.innerHTML = counter + "つ目";
counter++;
var select = document.getElementById("target");
select.appendChild(newobj);
}
//-->
</script>
</head>
<body>
<H1>TEST.</H1>
<div id="target">※エレメントの追加</div>
<input type="button" onclick="doAction();" value="追加">
</body>
</html>
※関連コンテンツ
「初心者のためのJavaScriptプログラミング入門」に戻る