背景
HTML要素を文字列htmlString
として取得し、querySelectorAll
を使おうとすると、うまくいかなかった。
原因
querySelectorAll()などのメソッドはHTMLに対して機能するが、HTML文字列に対して直接使うことはできない。
HTML文字列に対してquerySelectorAllを使用したい場合は、まず以下のように文字列をDOMに変換する必要がある。
//HTML文字列をDOMに変換
const parser = new DOMParser();
const doc = parser.parseFromString(htmlString, 'text/html');
//変換したDOMに対してquerySelectorAllを使用、例えば「tr」
const trElements = doc.querySelectorAll('tr');
//filterなどを使用
const filteredTrs = [...trElements].filter(tr => /*条件*/);