Fetch APIレスポンスに対してDOMクエリメソッドを使用できますか？

Question

私は、現在のところユーザー主導型のフォームしか公開していない古いWebインターフェイスとのやりとりを自動化しようとしているので、動的リクエストを使ってWebページからいくつかの情報を抜き取る必要があります。

XHRを使用している場合は、Documentという応答を扱うことができ、querySelectorのようなメソッドを使用して特定のノードから情報を取得できます。私はBodyを与えるだけで、フェッチAPIを使用しようとしたいと思います。これはblob、formData、json、およびtextですが、Documentとして扱うことはできません。

何か不足していますか？ fetchから直接問い合わせできるドキュメントなどを入手できますか？そうでない場合は、文字列（Body.text()）を取得してドキュメントに変換する簡単な方法はありますか？

Answer 1

フェッチからドキュメントやその他のクエリを直接取得できますか？そうでない場合は、Body.text（）から文字列を取り出してDocumentに変換する簡単な方法はありますか？

DocumentをFetch API自体から直接取得することはできません。しかし、DOMParserを使用して、そのparseFromStringメソッドに、Fetch Body.text()約束が解決するテキストを渡すことができます。

fetch("https://enable-cors.org/") 
 
    .then(response => response.text()) 
 
    .then(text => { 
 
    const parser = new DOMParser(); 
 
    const htmlDocument = parser.parseFromString(text, "text/html"); 
 
    const section = htmlDocument.documentElement.querySelector("section"); 
 
    document.querySelector("div").appendChild(section); 
 
    })

<div></div>