javascript - 是否有任何方法可以完成与 jquery 中的 .load() 方法相同的作用，以使用 vanilla Javascript 获取 html 页面的一部分

Question

我现在正在学习 Ajax，但在查找仅使用 javascript 来完成 jquery 所做的事情的视频或文章时遇到问题。 要从 HTML 页面加载并将其放在页面上，使用 jquery 就像这样:

   $(function () {
      $("#showData").load("pageName.html #whatIWant");
    });

#whatIWant 中的数据将位于具有 #showData id 的元素中。 我不知道如何用 Vanilla Js 做同样的事情 感谢您的参与。

注意: 如果我使用下面的方法，我会从其他页面获取所有数据，并且我想控制响应。

const getData = (url) => {
  return new Promise((resolve, reject) => {
    let request = new XMLHttpRequest();
    request.onload = function () {
      if (this.readyState === 4 && this.status === 200) {
        resolve(this.responseText);
      } else {
        reject(this.responseText);
      }
    };
    request.open("get", url, true);
    request.send();
  });
};

getData("test.html")
  .then((resolve) => {
    console.log(resolve);
  })
  .catch((reject) => {
    console.error(reject);
  });

Answer 1

您可以使用内置的 XMLHttpRequest 来获取 HTML 文档。

function fetchElement(url, selector) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.onload = function() {
      if (!this.responseXML || !this.responseXML.querySelector) reject("No HTML Document found");
      else resolve(this.responseXML.querySelector(selector));
    }
    xhr.open('GET', url);
    xhr.responseType = 'document';
    xhr.send();
  });
}

const myElement = await fetchElement("pageName.html", "#whatIWant");
document.querySelector("#showData").innerHTML = "";
document.querySelector("#showData").appendChild(myElement);

---

或者，您也可以使用 Fetch API获取网页以及 DOMParser来解析它。

async function fetchElement(url, selector) {
    const data = await fetch(url).then(res => res.text());
    const parsed = new DOMParser().parseFromString(data, 'text/html');
    return parsed.querySelector(selector);
}