JavaScriptでHTMLコメント要素を取得する

スポンサーリンク

JavaScript を書いていて HTML のコメント要素を取得したいケースに遭遇しました。HTML のコメント要素とは…

のような HTML 中のコメントタグ要素のこと。これまで JavaScript でコメントタグを取得したいという機会がなく、知らなかったので調べました。特定要素配下のノード一覧を取得した後に、nodeType を 8(COMMENT_NODE)と指定して抽出することで、取得したノード一覧のうちコメントのノードのみを取得することができます。

【お知らせ】 英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください!
画像付き英語辞書 Imagict | 英単語をイメージで暗記
【開発記録】
英単語を画像イメージで暗記できる英語辞書サービスを作って公開しました
スポンサーリンク

JS で HTML のコメント要素を取得する例

以下のような HTML&JavaScript を作成して検証。

get_comment_nodes.html

上記のように書くことで、JavaScript で HTML 中のコメントノードを取得できます。

実行結果

実行結果を、Chrome デベロッパーツールで確認します。

Screen Shot 2016-12-21 at 17.02.26

Chrome デベロッパーツールのコンソールで確認すると、コメント要素を取得できていることが確認できます。comment1 が2回出力されています。② は2回繰り返しの意味の出力です。

今年もよろしくお願いいたします

以上2017年最初の記事でした、だいぶ出遅れました…。遅ればせながら、あけましておめでとうございます。今年もどうぞよろしくお願いいたします。最後にちょこっと昨年の振り返りおよび今年の抱負など。

昨年(2016年)は、とりあえず地震…な年でした。4月〜7月あたりの記憶が朧気で、地震のことしか覚えていません。頻繁に続く余震や受けたショックのせいか頭が働きにくかったし、しばらくは常にそわそわしてて集中力皆無だった。地に足がついて元の生活に戻れつつあるな〜と実感できるようになったのは9月〜10月くらいでしょうか。家族が無事だったことが本当に幸いで、家内安全、健康第一で過ごせるのが何よりです。

熊本地震で自宅に住めなくなってやったことの記録 | EasyRamble

家内安全の他に、今年(2017年)の抱負、というか一言テーマを随分考えたのですが、「開発&リリース」で行きます!昨年は地震で翻弄されたせいもあり(言い訳ですが)、途中まで作って放置のものが多かったので。もちろん受託の仕事と並行しつつではあるのですが、自分のプロジェクトで開発・作成した物をしっかりと公開まで持っていく!このブログも4月以降ガクンと書く記事数が減ってしまったので、もう少し更新頻度を上げていきたいです。

では、今年もよろしくお願いいたします!

スポンサーリンク
オライリーのJavaScritp本(通称サイ本)は、昔かなり読み込みました。
 
スポンサーリンク

Leave Your Message!