JavaScript DOMプログラミングアート(第2版)読書ノート(8)
略語
このテキストにはたくさんの略語が含まれています.上にはもう
いくつかのブラウザでは、ドキュメント中の略語(ラベルを下線または下線のあるテキストとして表示し、他のブラウザでは略語を斜体字として表示します.
略語(タグ)のtitle属性はブラウザに隠れています.一部のブラウザでは、マウスポインタを略語にぶら下げて、そのtitle属性をポップアップ式のヒントメッセージとして表示します.ブラウザで使うデフォルトのスタイルのように、ブラウザーの略語に対するデフォルトの表現もそれぞれのやり方があります.
私たちはDOMを使ってブラウザのデフォルト行動を変えることができます.
これらのラベルに含まれるテキストとtitle属性を一つの定義リスト要素でまとめて表示するには最適です.コードは以下の通りです
<dl>
<dt>W3C</dt>
<dd>World Wide Web Consortium</dd>
<dt>DOM</dt>
<dd>Document Object Model</dd>
<dt>API</dt>
<dd>Application Programming Interface</dd>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>XML</dt>
<dd>eXtensible Markup Language</dd>
</dl>
DOMを使ってこの定義リストを作成できます.<h 2>ブラウザ「地雷」(/h 2)
<p>displayAbreviations関数は確かによく働いていますが、もしあなたが使っているブラウザがIE 6またはもっと前のWindowsバージョンであれば、JavaScriptエラーメッセージが表示される可能性が高いです.p>
<p>本の第1章で言及したブラウザ大戦から話が始まります.その大戦中、ネットスケープとマイクロソフトは<abragt;と<acronymgt;ラベルは彼らの武器の一つです.競争が最も激しい時、マイクロソフトは自分のブラウザにabbr元素を実現しないと決めました.p>
そのブラウザは大戦中に雲散霧消してしまいました.最終的にはマイクロソフトがネットスケープを倒しましたが、マイクロソフトのIEブラウザはIE 7までabbr元素をサポートしています.displayAbreviations関数が初期バージョンで失敗したのは、一部のabbr要素ノードから属性ノードとテキストノードを抽出しようとしたが、IEブラウザはそれらのabbrノードの「要素」位置を承認しなかったからである.p>
選択可能なソリューションは三つあります.
1,abbr元素を統一してacronym元素に置換します.私はこのような解決策には興味がありません.頑固なブラウザーに譲歩するために、「犠牲」という批判的な正しい表記をしたくないからです.p>
<p>2は、要素の中でhtml名前空間(<)abragt;abbreviation/)を使用すると、IEがこれらの要素を認識することができます.このスキームは、他のドキュメントでdisplayAbreviations関数を使用する場合、問題は解決されません.
<p>3は、displayAbreviations関数がIEにおいて安定的に退化することを保証します.このスキームが実現されるのは最も簡単で、最も受け入れられやすいです.何行かのコードを書くと、IE(または他のブラウザがabbr要素を識別できない場合)は早期に終了できます.
<p>ですから、私達は第三種類を選びます.
まず、abbr元素からtitle属性値を抽出する責任があります.テキストはforループに価値があります.
<div class=「cnblogs ucode」>
for(var i=0; i<abbreviations.length;i++){
var current_abbr = abbreviations[i];
if(current_abbr .childNodes.length<1) continue;
var definition = current_abbr.getAttribute("title");
var key = current_abbr.lastChild.nodeValue;
defs[key] = definition;
}
この新しいステートメントは、「現在の要素がサブノードがない場合は、すぐに次のループを開始する」という意味です.IEブラウザは、abbr要素のサブノードの個数を統計すると、いつもエラーの値を返します.ゼロです.この新しいステートメントは、IEブラウザがこのサイクルの後続コードを実行しないようにします.
<p>次に、「略語リスト」の作成を担当するそのforサイクルの後に、このような語句を追加します.
<div class=「cnblogs ucode」>
//遍历定义
for(key in defs){
var definition = defs[key];
//创建定义列表
var dtitle = document.createElement("dt");
var dtitle_text = document.createTextNode(key);
dtitle.appendChild(dtitle_text);
//创建定义描述
var ddesc = document.createElement("dd");
var ddesc_text = document.createTextNode(definition);
ddesc.appendChild(ddesc_text);
//把它们添加到定义列表
dlist.appendChild(dtitle);
dlist.appendChild(ddesc);
}
if(dlist.childNodes.length<1) return false;