【JavaScript】HTML内のコメント要素をノードとして取得する

1. JavaScript
2023/06/21

やりたいこと

<div class="sample">
  <!-- サンプル1 -->
  <span>sample1</span>

  <!-- サンプル2 -->
  <span>sample2</span>

  <!-- サンプル3 -->
  <span>sample3</span>
</div>

上記のようなとあるHTML要素直下にあるコメントアウトを、js側で取得したい。

解決法

const sample = document.querySelector(".sample");
const nodes = [...sample.childNodes];

const commentNodes = nodes.filter(
  (node) => node.nodeType === document.COMMENT_NODE
);

対象のElementからchildNodesを取得
nodeTypeがdocument.COMMENT_NODEなノードのみを抽出

const sample = document.querySelector(".sample");
const nodes = [...sample.childNodes];

const commentNodes = nodes.filter(
   (node) => node.nodeType === document.COMMENT_NODE
);

const comments = commentNodes.map((commentNode) =>
  commentNode.nodeValue.trim()
 );
 console.log(comments); // ['サンプル1', 'サンプル2', 'サンプル3']

もしコメントのテキストそのものを取得したい場合はnodeValueを参照しtrim()で余計な空白を削除すればOK。