前回はNodeListインターフェイスについて調べてみたが、今回は NamedNodeMapだ。名前に同じNodeが付いているがアプローチの対象とその方法が違っている。 NodeListとは異なり「名前」を用いて属性ノードにアクセスするためのインターフェイスというのがそのポピュラーな使い道だ。
■NamedNodeMapの使い方 前回みたようにNodeListはchildNodesや getElementsByTagNameを使うことで得ること ができた。たとえば、ページの一番最初にあ るFORMに対しては、
<script type="text/javascript"> <!-- function removeTest() { //1 id名がtest3のエレメントを変数img3へ入れる img3 = document.getElementById('test3') //2 title属性をimg3のマップから取り除く img3.attributes.removeNamedItem("title") } function setTest() { //1 id名がtest3のエレメントを変数img3へ入れる img3 = document.getElementById('test3') //2 titleと言う名前の属性を生成し変数attriへ入れる attri = document.createAttribute("title") //3 title属性をimg3のマップにセットする img3.attributes.setNamedItem(attri) //4 セットされたtitle属性に値を書き込む img3.setAttribute("title","ティーカップでもあるよ") } //--> </script> <img id = "test3" title = "これはコーヒーカップです" src = "./cap.jpg"> <form> <input type = "button" value = "titleを除去" onclick = "removeTest()"> <input type = "button" value = "titleを追加" onclick = "setTest()"> </form> ↑このスクリプトサンプル ./sample/f3.htm
1.document.getElementById("a").id
2.document.getElementById("a").getAttribute("id")
3.document.getElementById("a").attributes.id.value
4.document.getElementById("a").attributes.id.nodeValue
5.document.getElementById("a").attributes.item("id").value
6.document.getElementById("a").attributes.getNamedItem("id").value
7.document.getElementById("a").attributes.getNamedItem("id").nodeValue
8.document.getElementsByTagName("div").item(0).id
9.document.getElementsByTagName("div").item(0).getAttribute("id")
10.document.all("a").getAttribute("id")
同じ機能にもかかわらず、ざっと並べただ
けでもこんなにあるのだ。しかし、問題はこ
れらすべてがDOM対応と言われるブラウザで
動作するというわけではないことだ。
ということは、どれがブラウザ依存し、ど
れが依存しない書き方なのかを知っておく必
要があるというわけだ。そこで、今回はとり
あえず、上記10種類の書き方についてW3C-DOM
対応と呼ばれているブラウザの動作について
確認してみたので参考にして欲しい。今回の
パターンでおそらく安全と思われるのは、
1,2,6,7,8,9だ。この結果をみる限りではやは
り、W3C-DOMの仕様に従ったものが安全という
ことのようだ。
win mac linux
n7 m1 e5 e6 o7 n7 m1 e5 s1 n7 m1 k3
1 ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○
2 ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○
3 ○ ○ ○ ○ × ○ ○ ○ × ○ ○ ×
4 ○ ○ ○ ○ × ○ ○ ○ × ○ ○ ×
5 ○ ○ ○ ○ ○ ○ ○ × × ○ ○ ×
6 ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○
7 ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○
8 ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○
9 ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○
10 × × ○ ○ ○ × × ○ × × × ○
■Sample
SELECTタグのマルチ表示を切り替える1
SELECTタグのマルチ表示を切り替える2
[+]印をクリックするとオプションリストが展開される。1と2は
同じ動作だが別の方法で実現している。NamedNodeMapを利用しているのは
2のサンプルだが、このケースの場合は1の方が多くのブラウザで動作する。
■Sample
OLタグのタイプ属性を切り替える
OLタグのナンバリングタイプをアトリビュートを生成し切り替えている。
■Sample
Aタグのターゲット先を切り替える
Aタグのターゲット先を切り替える
Aタグのターゲットは読み込むページをフレームやサブウインドウへ振り分ける
機能を持っているが、ここではそのtarget属性を取り替えることでリンクを
クリックした時の表示先を変更できるようになっている。
////////////////////////////////////////////////////////////////////
＊上記サンプルの動作環境は各サンプルをご確認ください
====================================================================
凡例
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
--------------------------------------------------------------------
凡例 Win n7 -- NetscapeNavogator 7.x m1 -- Mozilla1.x e5 -- Internet Explorer 5.x e6 -- Internet Explorer 6.x o7 -- Opera 7.0 Mac n7 -- NetscapeNavogator 7.x m1 -- Mozilla1.x e5 -- Internet Explorer 5.0 または 5.1 s1 -- Safari Linux n7 -- NetscapeNavogator 7.x m1 -- Mozilla1.x k3 -- Konqueror 3.x | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
●JavaScript 資料
