見出し索引用Javascriptカスタムプログラム

Tweet

Pocket

ブログの見出しなどを一覧表示するJavascriptを作成しました。本ブログでも使っています(右上「記事見出し索引」にマウスを当てると見出しを表示)。まだまだ汎用的ではありませんが、ソースを公開します。

function HeadingIndex (parentid,headingtag) {

	/* プロパティ */
	this.parentId = parentid;
	this.headingTag = headingtag;
	this.textValue = '';

	/* インデックス処理 */
	this.setHeadingIndex = function(){
		// 親ノードを取得
		var parentElm = document.getElementById(this.parentId);
		// ul作成
		var unorderedListElm = document.createElement('ul');
		parentElm.appendChild(unorderedListElm);
		// 見出しノードの取得
		var h2Elms = document.getElementsByTagName(headingtag);
		// リスト配列
		var listElms = new Array();
		// 見出しの数ループ
		for(var i = 0;i<h2Elms.length;i++){
			// 取得したh2にid属性を設定
			var h2ElmsId = 'post' + i;
			h2Elms[i].id = h2ElmsId;
			// 文言の取得
			getTextValue(h2Elms[i]);
			// リストの作成
			var textElm = document.createTextNode(textValue);
			// リンクの設定
			var anchorElm = document.createElement('a');
			anchorElm.href = '#' + 'post' + i;
			anchorElm.appendChild(textElm);
			// 文言ノードをリストアイテムへ設定
			listElms[i] = document.createElement('li');
			listElms[i].appendChild(anchorElm);
			// リストアイテムをリストへ設定
			unorderedListElm.appendChild(listElms[i]);
		}
		// リストをindexAreaへ設定
		parentElm.appendChild(unorderedListElm);
		// リストスタイル
		unorderedListElm.style.position = 'absolute';
		unorderedListElm.style.top = '18px'
		unorderedListElm.style.right = '0px';
		// リストの非表示
		unorderedListElm.style.display = 'none';
		parentElm.onmouseover = function(){
			unorderedListElm.style.display = 'block';
		}

		unorderedListElm.onmouseout = function(){
			unorderedListElm.style.display = 'none';
		}
	}

	/* テキストノード取得 */
	function getTextValue(pNode){

		var i, cNode;

		var cNodes = pNode.childNodes;

		for(i=0; i<cNodes.length; i++) {
			cNode = cNodes[i];
			if(cNode.nodeType==1) {
				// 再帰
				getTextValue(cNode);
			}
			else if(cNode.nodeType==3) {
				this.textValue = cNode.nodeValue;
			}
			else if(cNode==8) {

			}

		}
	}

}

よびだし部分

window.onload = function(){
	// HeadingIndex　親要素のid,見出しタグを指定
	var index = new HeadingIndex('indexArea','h2');
	index.setHeadingIndex();
}