##やりたいこと
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