JavaScript Examples
第28回 Elementインターフェイスを極める

 今回は前回に引き続きElementインターフェイスについ て調べてみよう。Elementとは<A>や<DIV>などのタグとそれ らに囲まれたひとくくりの要素のことであり、まさにHTMLの要ともいえる ものだ。このElementインターフェイスには属性をセットしたり ゲットしたり削除したりという操作を行うのに便利な命令 が用意されている。




 前回は主にAttrの解説が中心でElementインターフェイ
スに関しては、getAttributeNodeとsetAttributeについて
しか紹介できなかった。今回はこれら以外のメソッドとア
トリビュートについても、主にDOM1で定義されているもの
についてのみだが、サンプルに沿って説明していくことに
したい。

 ところで、Elementとは日本語では「要素」という意味
で、いままでこの連載でもわかりやすさを優先して
「Elementとはタグのことです(きっぱり)」という感じの
アバウトな説明のしかたをしてきた。しかし、ここで念
のために確認しておくと厳密には「Element==タグ」では
ない。

 たとえば、<a href=#>リンクです</a>というHTMコード
があった時、<a href=#>のタグ部分だけがElementなので
はなく、<a href...〜</a>までの一式をElementと呼ぶの
だ。

 したがって、Elementインターフェイスの各命令が扱う
対象はタグのみではなくこのElement一式に関する事柄で
あり、Elementノードといった時には開始タグから終了タ
グまでの1ブロックを丸ごと含んでいることになる。

 今回説明する命令の大半は、このElement内のタグの
属性を操作する方法だ。そして、HTMLはタグと文字列で
構成されているわけだから前々回までの文字列操作と
今回のタグ操作を利用してHTMLを自由に作り出すことも
可能というわけだ。


今回のテーマのポイント
 1.Elementインターフェイス内の命令を確かめる  2.いろいろある命令の中で使いやすい命令は?  3.同じインターフェイスでも各命令の実装状況は一律ではない。
tagNameをダイアログ表示する Elementインターフェイスで利用できるいくつかの命令について確認しておこう。 ■アトリビュートtagName  DOM1とDOM2までのElementインターフェイ スに含まれるアトリビュートはtagNameだけだ。 「tagName」は文字通り該当するタグの名前 を返してくれる。たとえば、aタグなら「A」、 divタグなら「DIV」という文字が大文字で返 ってくる。  試しに、tagNameを取り出す簡単なサンプル を作ってみよう。

<script type="text/javascript"> <!--
function chktagName() {
  //1 id名が'test0'のエレメントを変数t0へ入れる   var t0 = document.getElementById('test0')
  //2 t0のtagNameをダイアログ表示する   alert( t0.tagName )
}
//--> </script> <p id="test0">こんにちは</p> <form> <input type    = "button"          value   = "tagNameを調べる"        onclick = "chktagName()"> </form>

↑このスクリプトサンプル ./sample/f1.htm
 このサンプル(sample/f1.htm)は、ボタンを クリックするとid名が'test0'のエレメントの tagNameをダイアログ表示する。つまり、「P」 がダイアログ表示される。 【f1.htmの動作ブラウザ】 win mac linux n7 m1 e5 e6 o7 n7 m1 e5 s1 n7 m1 k3 ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ *win-e4も動作可。  動作ブラウザ表にある通りtagNameの実装具合 は優秀だ。主なブラウザすべてで動作してく れる。 ■setAttributeとsetAttributeNode  ElementインターフェイスのsetAttributeは これまで何度も利用してきたしWeb上の多くの スクリプトで見かけることも多いと思う。タグ の中の属性をセットするのに便利なメソッドだ。  しかし、このインターフェイスにはsetAttri buteNodeという似た名前のメソッドもある。 これは、何だろうか?  前回出てきたgetAttributeに対するgetAttri buteNodeと同様に前者が属性名でアクセスする のに対してsetAttributeNodeはノードベースで アクセスするというのがそれらの違いだ。  試しにサンプルをみてみよう。  このサンプルは、画像要素に生成したwith属 性のノードをセットするというものだ。ようは、 画像の横幅を変えようということだ。

<script type="text/javascript"> <!--
function setTest() {
  //1 id名がimg0のエレメントを変数imgへ入れる   img = document.getElementById('img0')
  //2 widthと言う名前の属性を生成し変数attriへ入れる   attri = document.createAttribute("width")
  //3 生成したwidth属性ノードの値に500を入れる   attri.nodeValue = 500
  //4 width属性ノードをimgへセットする   img.setAttributeNode(attri) 
}
//--> </script>
<form> <input type    = "button"          value   = "setAttributeNodeテスト"        onclick = "setTest()"> </form> <img   id      = "img0"        height  = "214"        src     = "./hosi.gif">


↑このスクリプトサンプル ./sample/f2.htm
【f2.htmの動作ブラウザ】 win mac linux n7 m1 e5 e6 o7 n7 m1 e5 s1 n7 m1 k3 ○ ○ × ○ ○ ○ ○ ○ ○ ○ ○ ○  このサンプルのようにノードベースで属性に アクセスするにはsetAttributeNodeが便利なの だが実はsetAttributeの方がサポートしている ブラウザが多い。また、setAttributeの方がソ ースもシンプルになる場合が多いので一般的な 用法ではsetAttributeの使用をお勧めする。  参考までに、次に同じ動作をするサンプルを setAttributeで書いてみよう。
<script type="text/javascript"> <!--
function setTest() {
  //1 id名がimg0のエレメントを変数imgへ入れる   img = document.getElementById('img0')
  //2 width属性と値500をimへセットする   img.setAttribute('width',500) }
//--> </script>
<form> <input type    = "button"          value   = "setAttributeテスト"        onclick = "setTest()"> </form> <img   id      = "img0"        height  = "214"        src     = "./hosi.gif">

↑このスクリプトサンプル ./sample/f2_1.htm
【f2_1.htmの動作ブラウザ】        win mac linux n7 m1 e5 e6 o7 n7 m1 e5 s1 n7 m1 k3 ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ *win-e4も動作可。 removeAttributeとremoveAttributNodeを比較する Elementインターフェイスにある良く似たメソッドの同士の違いを確認しておこう。 ■メソッドremoveAttribute  Attributeを削除するメソッドについても前 ページと同様に名前で指定するremoveAttribut とノードベースのメソッドremoveAttributNode が用意されている。  次のサンプルはボタンクリックでdivタグ内の align属性を削除するというものだ。  その結果、ボタンクリックすると最初右側に 表示されていた文字が左側へ移動する。  removeAttribute(属性名)という書式で該当属 性を削除し、デフォルトの属性値がある場合は 即座にそのデフォルト値を適用するという仕様 になっている。

<script type="text/javascript"> <!--
function removeAtt() {
  //1 id名が'test0'のエレメントを変数t0へ入れる   var t0 = document.getElementById('test0')
  //2 t0のalign属性を削除する   t0.removeAttribute('align')
  //3 o7バグ回避リフレッシュ代わりのノーマライズ   if(window.opera)t0.normalize()
}
//--> </script> <div id="test0" align="right">最初は右にありますが...</div> <form> <input type    = "button"          value   = "alignを削除する"        onclick = "removeAtt()"> </form>

↑このスクリプトサンプル ./sample/f3.htm
【f3.htmの動作ブラウザ】       ←動作ブラウザ表は記事に入れたい win mac linux n7 m1 e5 e6 o7 n7 m1 e5 s1 n7 m1 k3 ○ ○ ○ ○ ○ ○ ○ × ○ ○ ○ ○ *この表にはありませんがwin-e4も動作します。 *o7はnormalize()で強制リフレッシュすることで動作させています。

■removeAttributNodeを使ってみる  次に、removeAttributNodeについて確かめて みよう。結果は、動作確認表にあるとおり悲惨 な実装状況だ。

<script type="text/javascript"> <!--
function removeAttNode() {
  //1 id名が'test0'のエレメントを変数t0へ入れる   var t0  = document.getElementById('test0')
  //2 align属性ノードを変数alignNodeへ入れる   var alignNode = t0.getAttributeNode('align')
  //3 t0のalign属性ノードを削除する   t0.removeAttributeNode( alignNode )
  //4 o7バグ回避リフレッシュ代わりのノーマライズ   if(window.opera)t0.normalize()
}
//--> </script> <div id="test0" align="right">最初は右にありますが...</div> <form> <input type    = "button"          value   = "alignノードを削除する"        onclick = "removeAttNode()"> </form>

↑このスクリプトサンプル ./sample/f4.htm
【f4.htmの動作ブラウザ】        win mac linux n7 m1 e5 e6 o7 n7 m1 e5 s1 n7 m1 k3 ○ ○ × × ○ ○ ○ × × ○ ○ × *o7はnormalize()で強制リフレッシュすることで動作させています。  SafariやKonquerorで動かないのはご愛嬌だが、 Win版e5とe6で動かないのは致命傷と言わざるを 得ない。  実際に使ってみると、当たり前のことでは あるがこのように同じDOM1の同じインターフェ イス内のメソッドでもブラウザによる実装状況 が結構異なっていることがわかる。  使用する際には、この点に注意しつつターゲ ットブラウザに合わせたスクリプトの書き方を 考慮する必要がある。  誤解を恐れずざっくり言ってしまうなら、今 回のメソッドでは××AttributNodeよりも×× Attributタイプのメソッドの方がよりクロスブ ラウザで安心して使えるということは言えるだろう。 応用サンプル  今回のsetAttributeを使っていろいろなタグの属性を 動的に変更するサンプルを作ってみた ◎ ./sample/sample1.htm   ページボディ内のnodeValueとtagNameをすべて調べる   ボディ内のchildNodesを順に取り出しnodeNameとtagNameを調べて   ダイアログ表示する。Win版IE以外は行間の#textノードなども表示されるので   nodeNameとtagNameの違いがわかるだろう。 ◎ ./sample/sample2.htm   ページボディ内のチャイルドノードのtagNameがHRなら属性sizeを20にセットする   tagNameを順次調べて目的のタグ名を見つけたところで動作させるというサンプル。   getElementsByTagNameでいきなり検索をかける方法も簡単だが、たとえば、インタ   ラクティブな作業などを行っている時などにはイベントが拾ってきたタグ名を逐一   調べて判断するといったケースも決して少なくはない。 ◎ ./sample/sample3/sample3.htm   フレームへ読み込んだjsファイルのデータでHTMLを生成してみる      フレームを使うとページ構築後にも自由にjsファイルを   読み込むことが可能です。このロード処理を利用して、ダイナミックに   データを切り替えDOMでHTMLを生成しています。   参照:http://allabout.co.jp/computer/javascript/closeup/CU20030715/index.htm (Allabout [ JavaScript Tips ] [7] フレームでjsファイルを利用する) //////////////////////////////////////////////////////////////////// *上記サンプルの動作環境は各サンプルをご確認ください ==================================================================== 凡例 Win n3 -- NetscapeNavogator 3.x n4 -- NetscapeNavogator 4.x n6 -- NetscapeNavogator 6.x n7 -- NetscapeNavogator 7.x m1 -- Mozilla1.x e4 -- Internet Explorer 4.x e5 -- Internet Explorer 5.x e6 -- Internet Explorer 6.x o6 -- Opera 6.0 o7 -- Opera 7.0 Mac n3 -- NetscapeNavogator 3.x n4 -- NetscapeNavogator 4.x n6 -- NetscapeNavogator 6.x n7 -- NetscapeNavogator 7.x m1 -- Mozilla1.x e4.5 -- Internet Explorer 4.5 e5 -- Internet Explorer 5.0 または 5.1 s1 -- Safari Linux n3 -- NetscapeNavogator 3.x n4 -- NetscapeNavogator 4.x n6 -- NetscapeNavogator 6.x n7 -- NetscapeNavogator 7.x m1 -- Mozilla1.x k3 -- Konqueror 3.x --------------------------------------------------------------------




●JavaScript 資料




Toshirou Takahashi tato@fureai.or.jp