前回は主に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
--------------------------------------------------------------------