[jQuery] コメント要素を取得する方法 new

jQuery の強力なセレクタでも、唯一、選択できない要素があります。
それが <!-- コメント --> こんな感じのコメント要素です。

取得方法とサンプルコード

コメント要素は jQuery オブジェクトとしては取得できませんが、
DOMオブジェクトとしては存在していますので、
jQuery の get(0) を使って、以下のように参照して取得することができます。

html:
<div id="commentParent"><!--
コメント
--></div>
JavaScript:
var c = $('#commentParent').get(0).firstChild.nodeValue;
これで div の子要素であるコメント要素の nodeValue を取得でき、
c は「\nコメント\n」という文字列になります。(\n は改行を意味します)

注意点

注意しなければならないのは、

html:
<div id="commentParent">
<!-- コメント -->
</div>
このようにマークアップして同じように c を取得すると、
div 要素の firstChild は「\n」というテキストノードとなるので、
(div 開始タグ直後に改行されていることに注目してください)
c は「\n」という、おそらく意図しない結果となってしまいます。

使い方の例

コメント要素にデータを書き込んでおいてプログラムから読み出す、
という使い方はあまりスマートとはいえませんが、場合によっては有効と思います。

こじょblogでは、繰り返し必要となる html 文をコメント要素としておき、
JavaScript で複製してページ全体をビルドする、という使い方をしています。
具体的には、トップページの「コメントする」内の要素です。
ScreenShot

トップページには、最新から順に5つの記事が表示されるようになっています。
「コメントする」をクリックすると、各記事にコメントを投稿するためのフォームが現れるのですが、
このフォーム内の入力項目を構成するテーブル要素は、各記事に対して共通で使用できます。

コードは以下のようになっています。

html:
<form class="postCom" method="post" action="./" name="comment_form" target="_blank">
	<input type="hidden" name="mode" value="regist" />
	<input type="hidden" name="comment[no]" value="xx" />
</form>

...

<div id="formTemp"><!--
	<table width="500" border="0" cellpadding="0" cellspacing="0">
		<tr>
			<td width="100">名前</td>
			<td width="400"><input type="text" name="comment[name]" size="30" value="" /></td>
		</tr>
		<tr>
		...
		</tr>
	</table>
--></div>
JavaScript:
var t = $('#formTemp').get(0).firstChild.nodeValue;
$('form.postCom').each(function(){ $(this).append(t) });
t は html を表す文字列となりますので、jQuery の append() メソッドでそのまま追加できます。
これくらいのサイズだと、データ転送のオーバーヘッドを気にすることもないのですが、
やはり同じデータが5回も繰り返し送受信されているかと思うと気持ち悪いですよね(´Д`)
この記事をツイツイする tweetSearch
2010/04/18 Sun 13:15

Commentあなたのコメントをぜひ書き残してください!

ナイスファイトです
利用するケースはあり得ますね
読み出しだけでなくDOM操作できるともっといいいんだけど
さすがにむりですね
2010/09/28 Tue 11:22 [編集]
こじょ
このような豆テクにコメントありがとうございます><
JavaScript で体裁を整えるのが前提のコンテンツをコメントアウトしておくと、JavaScript が動かない環境で邪魔にならない、という利点があったりします。意外に使えるなー と我ながら思いましたw
2010/09/29 Wed 00:48 [編集]
新しいコメント

※設定しておくとあとからコメントを編集できます
管理者にだけ表示を許可する
※公開されません

Trackback あなたのウェブページをリンク!

Trackback URL

© こじょらぼ all rights reserved.

旧 すぐへこたれるこじょblog

Guild Wars 2 © 2010-2014 ArenaNet, LLC. and NC Interactive, LLC. All rights reserved. Guild Wars, Guild Wars 2, ArenaNet, NCSOFT, the Interlocking NC Logo, and all associated logos and designs are trademarks or registered trademarks of NCSOFT Corporation. All other trademarks are the property of their respective owners.

Back to Top