« 【Web】リンクの有効無効を切替えるブックマークレット | トップページ | 自分のPCが使えないと何かと不便 »

2006/06/13

【Web】JavaScriptでリンクタグに属性を設定する際の動作覚え書き

先のブックマークレットの内容をJavaScriptの関数として書き下して見てみると、妙な感じがすると思います。

手を抜いて冗長になってるな、とかそういうのは置いておいて(^^;(ループの中で逐一判断してるので効率が悪いと言うのは重々承知)
function    switchLinks()
{
  var ls = document.getElementsByTagName('a') ;   
    for ( var ci=0; ci < ls.length; ci++ ) {
        if ( ls[ci].href ) {
              ls[ci].hrefBK = ls[ci].href ;           
              ls[ci].removeAttribute('href') ;        
        }
        else if ( ls[ci].hrefBK ) {
              ls[ci].href = ls[ci].hrefBK ;           
              ls[ci].hrefBK = '' ;                    
        }
    }
}   //  end of switchLinks()
要は、
  • リンク無効化:属性 href が有効なら、これを属性 hrefBK にバックアップしてから消す。
  • リンク有効化:属性 hrefBK が有効なら、これを属性 href に書き戻してから消す。
という極めて単純なことをやっているだけなのに、ぱっと見ただけでも、hrefはremoveAttribute()で消し、hrefBKは''を代入して消す、という非対称なことをやっています。

実はこれ、IE6とFirefoxの両方に対応するためにいろいろ試行錯誤してみた結果なんですね。
試行錯誤の詳細をまとめたものは→こちら

この結果、リンクタグ(<a>)の属性に関しては、以下のようになるのかな、と。

  1. ユーザサイドで新規に属性を作成する場合、IE6では代入して作成しても(例: ~.hrefBK=... )、setAttribute()で作成しても(例: ~.setAttribute('hrefBK', ...) )同等に扱われるのに対して、Firefoxではこれらは別物として扱われる。その結果、Firefoxでは手法を統一しておかないと誤動作する。
  2. href属性に関しては、IE6でもFirefoxでも、~.href で参照するものと、.xxxAttribute()で参照するものは、同等に扱われている(~.href=...で変更して~.getAttribute('href')で参照可能だし、また~.setAttribute('href', ...)で変更したものも、~.hrefで参照可能)。
  3. href属性に関しては、~.href=''のようにnull文字を代入することでリンク(参照)先を無効化することは出来ない。無効化したい場合には、~.removeAttribute('href')を使用する。
  4. ユーザサイドで新規に作成した属性は、removeAttribute()によりundefinedとなるのに対し、hrefではundefinedとはならない。
  5. hrefをremoveAttribute()でリンクを無効化した場合、リンクオブジェクト数(document.links.length)も一つ減る(このとき、リンクタグ数(document.getElementsByTagName('a').length)の方は変化しない)。このため、リンクオブジェクト(document.links[n])を利用してコードを書いている場合は注意を要する。
うーむ、奥が深いと言うか……それに、本当ならaddEventListener()を使うのが正統なんでしょうねぇ……

« 【Web】リンクの有効無効を切替えるブックマークレット | トップページ | 自分のPCが使えないと何かと不便 »

パソコン・インターネット」カテゴリの記事

覚書」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック


この記事へのトラックバック一覧です: 【Web】JavaScriptでリンクタグに属性を設定する際の動作覚え書き:

« 【Web】リンクの有効無効を切替えるブックマークレット | トップページ | 自分のPCが使えないと何かと不便 »

戻るリンク追加

カレンダー

2020年3月
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31        

ココログカレンダーPlus(旧2)

検索


    • Web全体 サイト内
    • 蔵書のISBNを入力して下さい
    • はじめる前
      初級者向け
      上級者向け
      ブログ紹介
      結果を表示

コメントリストツリー化

無料ブログはココログ