【JavaScript】HTML内のコメント要素をノードとして取得する
やりたいこと
<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。