JavaScriptでローカルにあるHTMLファイルを取得し、その中身(要素)を取得したい

Question

JavaScriptでローカルにあるHTMLファイルを取得し、そのHTMLファイル内の要素にアクセスする、ということを行いたいです。

調べましたが有効そうな方法が見つからず、全く見当がつかないので質問させていただきます。

File APIでローカルのファイルを取得できるというのは分かったのですが、HTMLのファイルの場合、ファイルのMINEタイプがテキストと判定されるので、そこからdocument.getElementById()などを使って要素にアクセスするのは難しいのではないかと考えています。(知識不足でしたらすみません)

上記の方法、もしくは上記の方法以外にもJavaScriptでHTMLファイルの要素にアクセスできる方法がありましたら、ご教授願います。

VBAとJavaScriptを合わせて使う方法は見つかりましたが、できればJavaScript内だけの動作で完結させたいです。

よろしくお願い致します。

Answer 1

FileAPIで読み込んだテキストをDOMParserでhtmlにパースすればdocumentとして扱うことができます。

参考
DOMParser
https://developer.mozilla.org/ja/docs/Web/API/DOMParser

Comments

[marosu]

ありがとうございます。
大変助かります。
DOMParserを使用して試してみたいと思います。

Answer 2

Chromeだとローカルファイルはすべて別オリジン扱いなので、目的のHTMLファイルを<iframe src=...>で指定してもDOMにはアクセスできませんね。

File API を使うので良ければ、読み込んだソースを <iframe srcdoc=...> で表示してiframe.contentDocumentにアクセスしたり、new DOMParser().parseFromString(source, 'text/html')で非表示のDOMを作ることができます。

Comments

[marosu]

ありがとうございます。

いくつか方法があるのですね。
試してみたいと思います。