JavaScript DOMプログラミングアート(第2版)読書ノート(8) 9167 ワード JavaScript 略語</a><br>このテキストにはたくさんの略語が含まれています.上にはもう<ab br/>ラベルで表示されています.<br>いくつかのブラウザでは、ドキュメント中の略語(<abbr/>ラベルを下線または下線のあるテキストとして表示し、他のブラウザでは略語を斜体字として表示します.<br>略語(<abbr>タグ)のtitle属性はブラウザに隠れています.一部のブラウザでは、マウスポインタを略語にぶら下げて、そのtitle属性をポップアップ式のヒントメッセージとして表示します.ブラウザで使うデフォルトのスタイルのように、ブラウザーの略語に対するデフォルトの表現もそれぞれのやり方があります.<br>私たちはDOMを使ってブラウザのデフォルト行動を変えることができます.<br>これらのラベルに含まれるテキストとtitle属性を一つの定義リスト要素でまとめて表示するには最適です.コードは以下の通りです<pre><code><span style="color: #0000ff;"><</span><span style="color: #800000;">dl</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">dt</span><span style="color: #0000ff;">></span>W3C<span style="color: #0000ff;"></</span><span style="color: #800000;">dt</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">dd</span><span style="color: #0000ff;">></span>World Wide Web Consortium<span style="color: #0000ff;"></</span><span style="color: #800000;">dd</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">dt</span><span style="color: #0000ff;">></span>DOM<span style="color: #0000ff;"></</span><span style="color: #800000;">dt</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">dd</span><span style="color: #0000ff;">></span>Document Object Model<span style="color: #0000ff;"></</span><span style="color: #800000;">dd</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">dt</span><span style="color: #0000ff;">></span>API<span style="color: #0000ff;"></</span><span style="color: #800000;">dt</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">dd</span><span style="color: #0000ff;">></span>Application Programming Interface<span style="color: #0000ff;"></</span><span style="color: #800000;">dd</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">dt</span><span style="color: #0000ff;">></span>HTML<span style="color: #0000ff;"></</span><span style="color: #800000;">dt</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">dd</span><span style="color: #0000ff;">></span>HyperText Markup Language<span style="color: #0000ff;"></</span><span style="color: #800000;">dd</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">dt</span><span style="color: #0000ff;">></span>XML<span style="color: #0000ff;"></</span><span style="color: #800000;">dt</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">dd</span><span style="color: #0000ff;">></span>eXtensible Markup Language<span style="color: #0000ff;"></</span><span style="color: #800000;">dd</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">dl</span><span style="color: #0000ff;">></span></code></pre> DOMを使ってこの定義リストを作成できます.<br></p><br>＜h 2＞ブラウザ「地雷」(/h 2)<br>＜p＞displayAbreviations関数は確かによく働いていますが、もしあなたが使っているブラウザがIE 6またはもっと前のWindowsバージョンであれば、JavaScriptエラーメッセージが表示される可能性が高いです.p><br>＜p＞本の第1章で言及したブラウザ大戦から話が始まります.その大戦中、ネットスケープとマイクロソフトは<abragt;と<acronymgt;ラベルは彼らの武器の一つです.競争が最も激しい時、マイクロソフトは自分のブラウザにabbr元素を実現しないと決めました.p><br><p>そのブラウザは大戦中に雲散霧消してしまいました.最終的にはマイクロソフトがネットスケープを倒しましたが、マイクロソフトのIEブラウザはIE 7までabbr元素をサポートしています.displayAbreviations関数が初期バージョンで失敗したのは、一部のabbr要素ノードから属性ノードとテキストノードを抽出しようとしたが、IEブラウザはそれらのabbrノードの「要素」位置を承認しなかったからである.p><br><p>選択可能なソリューションは三つあります.<br><p>1,abbr元素を統一してacronym元素に置換します.私はこのような解決策には興味がありません.頑固なブラウザーに譲歩するために、「犠牲」という批判的な正しい表記をしたくないからです.p><br>＜p＞2は、要素の中でhtml名前空間(<)abragt;abbreviation/)を使用すると、IEがこれらの要素を認識することができます.このスキームは、他のドキュメントでdisplayAbreviations関数を使用する場合、問題は解決されません.<br>＜p＞3は、displayAbreviations関数がIEにおいて安定的に退化することを保証します.このスキームが実現されるのは最も簡単で、最も受け入れられやすいです.何行かのコードを書くと、IE(または他のブラウザがabbr要素を識別できない場合)は早期に終了できます.<br>＜p＞ですから、私達は第三種類を選びます.<br><p>まず、abbr元素からtitle属性値を抽出する責任があります.テキストはforループに価値があります.<br>＜div class=「cnblogs ucode」＞<pre><code> <span style="color: #0000ff;">for</span>(<span style="color: #0000ff;">var</span> i=0; i<abbreviations.length;i++<span style="color: #000000;">){ </span><span style="color: #0000ff;">var</span> current_abbr =<span style="color: #000000;"> abbreviations[i]; </span><span style="color: #0000ff;">if</span>(current_abbr .childNodes.length<1) <span style="color: #0000ff;">continue</span><span style="color: #000000;">; </span><span style="color: #0000ff;">var</span> definition = current_abbr.getAttribute("title"<span style="color: #000000;">); </span><span style="color: #0000ff;">var</span> key =<span style="color: #000000;"> current_abbr.lastChild.nodeValue; defs[key] </span>=<span style="color: #000000;"> definition; }</span></code></pre></div><br><p>この新しいステートメントは、「現在の要素がサブノードがない場合は、すぐに次のループを開始する」という意味です.IEブラウザは、abbr要素のサブノードの個数を統計すると、いつもエラーの値を返します.ゼロです.この新しいステートメントは、IEブラウザがこのサイクルの後続コードを実行しないようにします.<br>＜p＞次に、「略語リスト」の作成を担当するそのforサイクルの後に、このような語句を追加します.<br>＜div class=「cnblogs ucode」＞<pre><code> <span style="color: #008000;">//</span><span style="color: #008000;">遍历定义</span> <span style="color: #0000ff;">for</span>(key <span style="color: #0000ff;">in</span><span style="color: #000000;"> defs){ </span><span style="color: #0000ff;">var</span> definition =<span style="color: #000000;"> defs[key]; </span><span style="color: #008000;">//</span><span style="color: #008000;">创建定义列表</span> <span style="color: #0000ff;">var</span> dtitle = document.createElement("dt"<span style="color: #000000;">); </span><span style="color: #0000ff;">var</span> dtitle_text =<span style="color: #000000;"> document.createTextNode(key); dtitle.appendChild(dtitle_text); </span><span style="color: #008000;">//</span><span style="color: #008000;">创建定义描述</span> <span style="color: #0000ff;">var</span> ddesc = document.createElement("dd"<span style="color: #000000;">); </span><span style="color: #0000ff;">var</span> ddesc_text =<span style="color: #000000;"> document.createTextNode(definition); ddesc.appendChild(ddesc_text); </span><span style="color: #008000;">//</span><span style="color: #008000;">把它们添加到定义列表</span> <span style="color: #000000;"> dlist.appendChild(dtitle); dlist.appendChild(ddesc); } </span><span style="color: #0000ff;">if</span>(dlist.childNodes.length<1) <span style="color: #0000ff;">return</span> <span style="color: #0000ff;">false</span>;</code></pre></div><br><p>IEブラウザがこのforループを実行すると、defs配列が空ですので、dtとdd要素は作成されません.forループの後に追加されたこの新しいステートメントは、プログラムを直ちにdisplayAbreviations関数から終了させます.このif文を新たに追加したが、再度構造化プログラムの設計原則に違反しました.(一つの関数は入り口と出口しかないはずです.これは関数の中間に出口を追加したものです.しかし、これはIEブラウザの問題を解決することができますし、既存の関数コードに対して大きな戦争をする必要がない一番簡単な方法です.<br>＜h 2＞文献ソースリンク表</h 2><br>＜p＞＜iframe src=”http://jsfiddle.net/k72zrrsy/2/embedded/html%2Cjs%2Cresult“frame border=”0“width=”100%“height=”300"/></p><br><p>blockquot;要素にはcite属性が含まれています.これはオプションの属性です.URLアドレスを与えて、blockquot te要素の内容をどこから引用するかを教えてください.理論的には、文献資料と関連ウェブページをリンクするいい方法です.しかし、実際にはブラウザはcite属性の存在を全く無視しています.情報はそこにありますが、ユーザーはできません.それらを見ます.JavaScriptとDOMを利用して、私達はそれらの情報を集めて、sup元素を利用して文書に挿入できます.<br>＜h 2＞ショートカットリスト</h 2><br><p>accesskey属性は、キーボード上の特定のボタンと一つの要素を関連付けることができます.これらはマウスを使ってウェブページを閲覧することができないか、あるいは好きでないかに役立ちます.<br>＜p＞一般的に、Windowsシステムに適用されるブラウザでは、ショートカットキーはキーボードでAltキーと特定のボタンを同時に押します.Macシステムに適用されるブラウザでは、ショートカットキーはCtrlキーと特定のボタンを同時に押します.<br>＜p＞次はaccesskey属性の一例です.<br><p><a href="index]"accesskey="1"Home</agt;</p><br>＜p＞いくつかの基本的なショートカットキーには、概ね決まった設定方法があり、興味のある読者は<a href="http://www.clagnut.com/blog/193/" target="_blank">http://www.clagnut.com/blog/193/</a>を閲覧することができる.<br>＜p＞accesskey=「1」は、「当サイトのホームページに戻る」というリンクに対応しています.<br>＜p＞accesskey=「2」は「前のページに後退する」というリンクに対応しています.<br>＜p＞accesskey=「4」は、「当サイトの検索フォーム/ページを開く」というリンクに対応しています.<br>＜p＞accesskey=「9」は、「当サイト連絡先」へのリンクに対応しています.<br>＜p＞accesskey=「0」は、「当サイトのショートカットリストを見る」というリンクに対応しています.<br><p>多くのサイトがショートカットリストのページにどのようなショートカットキーをサポートしているかを明記しています.<br><p> </p><br><p><!</p><br><p>作者:<a href="http://home.cnblogs.com/u/beginner2014/" target="_blank">纤锐</a><br/>出所:<a href="http://www.cnblogs.com/beginner2014/p/4176730.html" target="_blank">http://www.cnblogs.com/beginner2014/p/4176730.html</a><br/>本著作権は著者とブログパークに共有されています.転載を歓迎します.しかし、作者の同意なしにこの声明を保留し、文章のページの明確な位置で原文の接続を提供しなければなりません.ありがとうございます.<br><p><></p><br></div><br></div> javascriptのMap代替サイクル