有什么方法可以起到与 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 to fetch the web page, along with the 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);
}

Answer 2

我在寻求答案时找到了另一种方法。

let dom = new DOMParser();

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) => {
    let pageHtml = dom.parseFromString(resolve, "text/html");
    let element = pageHtml.querySelector("whatIWant");
    console.log(element);
  })
  .catch((reject) => {
    console.error(reject);
  });

这个答案和另一个答案都对我有用，我希望这些答案能帮助到别人。

有什么方法可以起到与 jquery 中的方法 .load() 相同的作用，以使用 vanilla Javascript 获取 html 页面的一部分

Is There any way to do the same role that the method .load() in jquery does to get part of html page with vanilla Javascript

javascript

ajax

jquery