javascript - 解析和访问通过 Ajax XHR Get 请求获取的 HTML 页面中的 Dom 元素

Question

我们正在尝试从通过 XHR GET 请求远程获取的完整 HTML 页面访问各种 DOM 元素。

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://www.example.com/test.html", true);

xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) {
    var newdom = xhr.responseText;
    var val_result = newdom.a_div.innerText;
    // we want to access the text within this div, from the fetched html page?
  }
}

xhr.send();

有什么想法吗？

Answer 1

你可以很容易地做到这一点:

var xhr = new XMLHttpRequest()
xhr.open('GET', 'https://stackoverflow.com/questions/53661013/parsing-and-accessing-dom-elements-from-html-page-fetched-via-ajax-xhr-get-reque/53661204', true)

xhr.onreadystatechange = function () {
  if (xhr.readyState === 4) {
    var dom = new DOMParser().parseFromString(xhr.responseText, 'text/html')
    console.log(dom.querySelector('#question-header h1').innerText)
  }
}

xhr.send()

如果您在浏览器控制台中按原样复制此代码，它将打印您的 StackOverflow 问题的标题!只需使用 dom 变量来查询您要查找的元素。