この章では「DOM」(Document Object Model)と呼ばれている機能について学習します。
DOMとはxmlやhtmlの各要素にアクセスするための機能のことです(JavaScriptからHTMLやXMLを操作するための機能)。
例えばhtmlの中の「文や画像」を取り変えたりすることが出来ます。
DOMを視覚化すると以下のような図で表すことが出来ます。
これをDOMツリーと言いますが、それぞれ各要素はノードと呼ばれるオブジェクトで構成されています。
例えば
「<p>」は要素ノード、「あいうえお」はテキストノードと言います。
「<div id=”a”>」の中のidなどの属性は属性ノードと言います。
次にHTMLの要素にアクセスする方法について説明します。
HTMLの要素にアクセスする方法は以下の4種類あります。
このメソッドは何回か説明しましたが、復習のつもりでもう一度説明します。
この例の場合はaです。
innerHTML はHTML内のテキストにアクセスできるプロパティですので
次の例をみてみましょう。
前の例の
結果は以下の「色埋め」をクリックすると
「いろは」が赤くなります。
他にもプロパティはたくさんあるので、以下のプロパティを参考にしてください。
では次の例をみてみましょう。
innerHTMLはHTML内の要素のテキスト部分にアクセスするプロパティですので
そしてこの文字に
結論から言うと
次はHTMLの要素にアクセスする方法の2つ目のgetElementsByTagNameメソッドについて説明します。
getElementsByTagName の引数にはid名の代りに要素名を指定します。
getElementsByTagNameの引数に要素名を書くと、その指定した要素にアクセスすることが出来ます。
この例で言いますと以下のinputタグのすべての要素にアクセス出来ます。
以下のようにitemメソッドを使います。
getElementsByTagNameメソッドは該当したリストを返すので(この例の場合はinput要素のリスト)、そのリストの中のいずれかの該当するノードを指し示すために
この例の場合はitem(0)なので
「push」をクリックすると以下のダイアログボックスが表示されます。
次に
また、
以下のvalueの値まで取得してしまうからです。
では例をみてみましょう。
この例の
この例ではaを指定していますが, aは以下の3か所あります。
最後にvalueを使って
このobjにはitemメソッドで指定したノードが入っています。
結果は以下の通りです。
次はHTMLの要素にアクセスする方法の4つ目の
getElementsByClassNameメソッドについて説明します。
getElementsByClassNameメソッドの引数にclass名を指定しますとそのクラス名を持つ要素を取得できます。
この例では
指定したクラス名を出力するにはclassNameを使って
このobjにはitemメソッドで指定したノードが入っています。
結果は以下の通りです。
この例は先ほどの例を変更したものです。
以下の箇所以外は同じプログラムです。
ここではitemメソッドの0番目の要素のテキストの色を赤に変更しています。
次はDOMを使ってHTMLの中身を書き替えます。
これまでの例でもinnerHTMLを使って、文章を書き替えていましたが、ここでは他の方法で文章を書き替えたり、新しい要素を作成する方法を紹介します。
この例では「宮本武蔵です」というテキストを作成しています。
createTextNodeメソッドだけでは実際には画面上には反映されません。
画面上に反映させるためにはappendChildメソッドを使って、
これは
この例では
結果は以下の通りです。
次は新しいタグをhtmlの中に作る方法について説明します。
「push」をクリックすると「あ」を表示します。
次はinsertBeforeについて説明します。
つまり、
では表示をみてみましょう。
以下の「push」をクリックします。
次は指定したノードを削除する例を見てみましょう。
そして、子要素をリストとして返します。
最初の要素は
以下の箇所でremoveChildメソッドに先ほど作成した子ノードを入れます。
これはpタグの間に空白のノードが入っているからです。
つまり、空白もノードとして設定されているのです。
また以前、Domツリーについて説明しましたが、ブラウザによりノードの配置は違います。
下の図の番号はitemメソッドの引数の番号を示しています。
子ノードがなければ null を返します。
whileの条件式にfirstchildプロパティが入っているので、子ノードがなくなればnullになり、while文が終了となります。
つまり、whileを使って
以下の状態で「push」をクリックします。
次はgetAttributeメソッドやsetAttributeメソッドについて説明します。
setAttributeメソッドは指定の要素ノードに新しい属性を追加したり、指定の要素ノードの属性の値を変更します。
属性が存在しなければ null もしくは
結果は以下の通りです。
次の例ではノードを置き替えるreplaceChildメソッドについて説明します。
次の例ではparentNodeプロパティについて説明します。
parentNodeプロパティは親ノードを取得するプロパティです。
では説明をしていきます。