1. Qiita
  2. 投稿
  3. JavaScript

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

  • 0
    いいね
  • 0
    コメント

    やりたいこと

    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