XMLHttpRequestで取得したHTMLにDOMでアクセスしたい

やりたいこと

JavascriptでXMLHttpRequestを使って、サイト内の別ページに存在するHTML要素にDOMでアクセスしたい。

XMLHttpRequest

別ページにあるid="hoge"のタグのinnerTextを取得する例

var url = "/otherpage";
var request = new XMLHttpRequest();
request.open("GET", url, true);
request.responseType = "document";
request.send("");
request.onreadystatechange = function() {
  if (request.readyState == 4 && request.status == 200) {
    var target = request.response.getElementById("hoge").innerText;
    console.log(target);
  }
}

• 非同期モード限定なので、明示的にXMLHttpRequest.open()メソッドのasyncプロパティをtrueにしておく
• XMLHttpRequest.open()をコールしたあと、.send()をコールする前にresponseTypeプロパティに"document"を指定しておく

以上でresponseオブジェクトに対してDOMでアクセスできるようになる。
（responseTextオブジェクトではないので注意）

参考

XMLHttpRequest の HTML パース処理
https://developer.mozilla.org/ja/docs/HTML_in_XMLHttpRequest
XMLHttpRequest で レスポンスを dom として html をパースする
http://takuya-1st.hatenablog.jp/entry/2016/05/30/194801