【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()を使うのが正統なんでしょうねぇ……