blockquote要素のcite属性・title属性を抜き出し引用文後に表示するjavascriptの紹介です。
今回紹介するスクリプトは、blockquote要素の属性cite要素とtitle要素を抜き出し、引用文の後に表示するjavascriptです。前回のエントリー簡単に引用マークアップ(blockquote要素)を生成できる-javascriptとセットで使うといいです。
このスクリプトは、Enhancing Structural Markup with JavaScript [JavaScript & AJAX Tutorials]のエントリーで紹介されているものをカスタマイズしてみました。
blockquote要素のcite属性・title属性を抜き出し表示するjavascript
blockquote要素の引用文後に新たに<p></p>要素を作り、cite属性・title属性をその中に流し込むようにしています。
同一ページに複数blockquote要素があっても各要素毎での属性値を抜き出します。
このスクリプトは、Enhancing Structural Markup with JavaScript [JavaScript & AJAX Tutorials]のエントリーで紹介されているものをカスタマイズしたものです。
上記のコードをページ<head></head>の間に追加することでページが読み込まれた後に処理が実行されます。
新しく生成する<p></p>要素には、CSSのクラス指定を設定してあります。適宜ご自分の好きな設定に変えてください。
正直なところ、コードが長すぎるような気がします。もう少しスマートにできる方是非アドバイスください。トラックバック・コメントお待ちしています。
p.blockquotetitle--参照元タイトル名p.blockquoteurl--参照元URIリンク
サンプル
どんな感じで抜き出し表示されるかのサンプルページを用意しました。ボタンをクリックしてください。
blockquote要素の属性を抜き出し表示するjavascript
Enhancing Structural Markup with JavaScriptのスクリプトコード
Enhancing Structural Markup with JavaScript [JavaScript & AJAX Tutorials]のエントリーで紹介されているスクリプトは以下の通り
上記のコードはblockquote要素の属性cite要素を抜き出して"Source"というアンカーテキストリンクとして引用文の後に表示するjavascriptです。
p要素のclass指定もされていますので、スタイルシートでp.blockquotesourceを自分で設定することで表示変更することができます。
イベント処理に関しては、二つのパターンが紹介されています。javascriptが正しく機能するように後者のイベント処理（addEventListener、attachEvent）をするように設定します。
前者は、スクリプトにwindow.onload =イベントを追加するかbody onload=とbody要素にイベント追加することで実行する方法です。
body要素に追加する場合は、
<body onload="extractBlockquoteCitations();">
上記のwindow.onload =イベントを追加した場合は以下のようになります。
window.onload =ページの読み込みが完了した時に発生するイベントハンドラ
イベントの追加
同一ページで複数のイベント処理が設定されている場合、以前からのデータを変更することなくイベント追加するようにすることが望ましいので、こちらのスクリプトでイベント処理をすることを推奨しています。
addEventListenerイベントはIEでは機能しないのでattachEventで処理を実行するよに命令設定されています。
- addEventListener()
同一のイベントに複数のイベントハンドラ（処理する関数、命令）を追加できる。
このaddEventListener・addEventListenerイベント処理に関して参考になるページは第五章 クライアントサイドの技術：各種イベントについてです。
カスタマイズ
上記のEnhancing Structural Markup with JavaScript [JavaScript & AJAX Tutorials]のエントリーで紹介されているコードだと"Source"というパターンで表示されてしまいますので、カスタマイズします。
a.appendChild(document.createTextNode('Source'));
の行を以下の通りにします。
a.appendChild(document.createTextNode(a));
これでアドレス(URI)がアンカーテキストとして表示されるようになります。
引用元のページタイトル指定も表示させるために以下のコードを追加しています。（blockquote要素にtitle属性が指定してある場合）
title属性に値がある場合は、引用元：「title属性値」で表示されます。
値が無い場合は、引用元：で表示されるようにしています。
javascriptコード解説
- var 任意ネーム = 識別子
- 変数（値が変わる）を設定する。コード参照へ戻る
- document.getElementsByTagName()
- （）内に指定する要素名を参照するメソッド
- 今回の場合、blockquote要素を参照している
- for (初期値;条件;変化式){命令文....}
- 条件の間処理を繰り返し実行する。コード参照へ戻る
今回の場合、変数iは0であると設定し、quotes.length（blockquote要素の数）の数まで条件を設定、i++で変数iに1ずつ加算してゆく設定になっているので、0からblockquote要素の数まで{命令文....}を1回ずつ実行する
- length
引数（ひきすう、argument＝実引数 または parameter＝仮引数）とは、プログラミング言語において関数やメソッドを呼び出すときに、その関数やメソッドを実行するために渡す値のこと。
要素.lengthで要素数の値となります。
- 要素.getAttribute('属性')
- 指定する要素の属性を取得するメソッド。コード参照へ戻る
今回の場合は、quotes[i]で各blockquote要素毎のcite属性を取得しています。
- if(条件式)命令1{;else命令2;}
- 条件式に合致した場合、命令1を実行し、合致しない場合はelse文以下の命令2を実行します。
今回の場合は、
cite属性が取得できた場合に指定する命令を実行する条件式となっています。- document.createElement('要素')
指定タグ名で新しい要素を作るメソッドコード参照へ戻る
今回の場合は、a要素を新しく生成し、変数aと設定しています。
- 要素.setAttribute('属性', 値);
指定する要素の属性値を変更するメソッド
今回の場合は、新しく生成する
a要素の属性（hrefとtitle)にcite要素（var citeで設定された値）に変更するようになっています。- 要素.appendChild()
- 指定する要素に()内に指定する子ノードを追加するメソッドコード参照へ戻る
今回の場合は、a要素にdocument.createTextNode('Source')での値を追加します。
ノード：DOM(Document Object Model)のwindow要素を頂点としたツリー構造でのの各要素や属性の一つ一つをノードといいます。今回はDOMのツリー構造でいうと、window>document>a>herfということになります。window要素の孫ノードaの子ノードherfという解釈になります。
例えば、img要素から見るとはimg要素が親ノードでimg要素の持つ属性（src,title,width....)が子ノードということになります。
- document.createTextNode()
新しくテキストノードを追加するメソッド
今回の場合は、a要素の子ノードに"Source"というテキストを追加するようになっています。
今回のjavascript参照元
- Enhancing Structural Markup with JavaScript [JavaScript & AJAX Tutorials]
- http://www.sitepoint.com/article/structural-markup-javascript
参考サイト
- Ajaxを勉強しよう
- http://www.openspc2.org/JavaScript/Ajax/Ajax_study/index.html
- JavaScript DOM リファレンス
- http://www.openspc2.org/JavaScript/JavaScript_DOM/index.html
- JavaScript リファレンス
- http://www.openspc2.org/JavaScript/reference4/index.html
