JavaScriptのFetch APIで返ってきたものをDOMとして扱う

結論から

fetch(url)
    .then(res => res.text())
    .then(text => new DOMParser().parseFromString(text, "text/html"))

返ってきた値にnew DOMParser().parseFromString(text, "text/html"))する!!

経緯

XMLHttpRequestと似たものにFetchAPIがある。

developer.mozilla.org

Promiseを返してくれるので.thenであれこれしやすくて便利なのだけど、使ってみたところ返ってきたレスポンスの中身をDOMとして扱えなくて困った。

Body - Web API インターフェイス | MDN

FetchAPIにはリクエスト/レスポンスのBodyを決めるやつが実装されている

これにDOMとしてくれるやつがなくて素直に扱えなくてハマった。

XMLHttpRequestだったなら……

takuya-1st.hatenablog.jp

こちらにある通り

xhr = new XMLHttpRequest()
xhr.responseType  = "document"

こうすればDOMとして扱えるのだが…

document.querySelectorしたい問題

欲求としては返ってきたものに対して、そこからさらにdocument.querySelectorして特定のDOMを抜き出したいと思っていた。

とりあえずDOMとして扱えないかダメ元でテキストとして扱ってみた(response.text()した)。

f:id:hitonatsu:20171209005418p:plain
Fetchしてレスポンスを見てみた様子

見ての通りテキストデータとなっていてダメ。当然このあとにquerySelectorしてみたけどNG。

DOMparser()や!

stackoverflow.com

ありがとうstackoverflow…

f:id:hitonatsu:20171209010337p:plain
DOMparser()してみた様子

DOMとして扱えている!

助かった。