JavaScriptを勉強するときのモヤモヤ
一般的にJavaScriptはブラウザで簡単に表示して使用できるイベントドリブンな言語だと説明されます。
確かにコンパイルの必要もないし、初心者に優しい言語にまちがいないようです。
さっそく初心者用の本を開いて学習を始めると変数や関数そして演算子や制御命令の書き方、その後に配列や簡単なオブジェクト指向の説明があったりします。
けれどもその多くはJavaScriptを実行した結果をアラートで確認したり、せいぜいdocument.write()を使用して確認する程度です。
一体全体body要素の中の指定した場所に書き出すにはどうしたらいいのでしょうか？
JavaScriptを勉強する際に、なにかモヤモヤした気持ちになるのはそのあたりがはっきりしないことが原因しているように思えます。
ここでは、アラートなど（普通はアラートなど使用しない！）使わずに結果をスマートに表示させる手段を確認してみます。
DOMレガシーの頃のdocument.write()メソッド
一昔前のDOMレガシーが一般的な頃にbody要素内にJavaScriptの実行結果を表示させる方法としてdocument.write()メソッドが使用されていました。
document.write(‘表示したい内容’)
ただし、document.write()メソッドを使用する場合はHTMLがすべての要素を読み込む前にJavaScriptを実行する必要があります。
もし、すべての要素を読み込んだ後にJavaScriptを実行したならHTMLの文章はすべて消去されてJavaScriptの実行内容のみが表示される結果になります。下記の例はどちらも同じHTMLの内容ですが、2の例はfunctionを使用してHTMLの読み込みが終了したあとにJavaScriptを実行しています。
このようなことからdocument.write()メソッドは簡単に利用できますが、ちょっと困ったことになる一面があります。そもそもイベントハンドラに関数を使用できないスクリプトはあまり意味がありません。
これを解決するために別ウィンドウを開いてJavaScriptを実行するなどの方法もありますが、根本的な解決にはなりません。
DOM標準らしきものを使用した方法
近頃ではDOM標準の対応も一般的に成りつつあります。
DOM標準を利用すると思い通りの場所にJavaScriptの実行結果を記述することができます。
特定ノードの取得
ID名やタグ名、クラス名などで目的の要素を取得するダイレクトアクセスと相対的な位置関係をたよりにノードを取得するノードウォーキングの２つの方法で特定のノードを取得することができます。
- document.getElementBuID(‘ID値’)
- document.getElementByTagName(‘タグ名’)
- document.getElementByClassName(‘クラス名’)
これらは引数に指定した要素をオブジェクトで返します。
そしてそのオブジェクトが持つプロパティを使用して書き込みをすることができます。
例えば次のようにして特定のIDの要素を取得します。
その後にそのオブジェクトが持つinnerHTMLプロパティの値を書きかえることで指定したIDの要素を書きかえます。
var answer = document.getElementById('ans');
answer.innerHTML = 'Hello';
innerHTMLプロパティは便利なプロパティですが、DOM標準ではありません。これはDOM0です。
DOM標準とレガシーDOMが入り混ざっている。この辺が非常にJavaScriptのわかりずらいところ。。。。
DOM標準な書き方
document.createTextNode()メソッドやdocument.createElement()メソッドを使用して新たなテキストや要素を生成することができます。
そしてそれぞれのノードを組み立てるにはappendChild()メソッドを利用します。
要素ノード.appendChild(追加するノード)
属性ノードを追加するにはdocument.createAttribute(‘属性名’)メソッドを使います。
function myfruits(){
var answer = document.getElementById('ans');
var fruits = new Array('バナナ','リンゴ','オレンジ');
for(var i = 0; i<fruits.length; i++){
var fl = document.createTextNode(fruits[i]);
answer.appendChild(fl);
}
}
DOM標準な書き方の詳細は別途説明します。
