How to access an element from an external HTML document?

I’m trying to build a small project where I create a new HTML document (which would be an individual page of an e-commerce product) and another document takes the information from that created document. However, I have no idea how to extract information from an external document without having to embed the entire page with <iframe>.

If I use document.querySelector() or any other similar function I can get a reference from the elements that have id and class. However, this function will get the element from the HTML document that is in the JS code I’m working on.

To exemplify my problem let’s support that I have <div id="p1"></div> inside the products.html document to work with the #p1 element I would have to do this: let p1 = document.querySelector("#p1").

But what if I have an index.html document and I want to use the <div id="p1"></div> element of products.html how would I do that?

Answer

You can fetch the html file as text, parse it, and run the querySelector

fetch("products.html").then(r=>r.text()).then((html)=>{ // get the content of products.html
  let element = document.createElement("html");
  element.innerHTML = html; // parse the html
  let p1 = element.querySelector("#p1");
});

Keep in mind that both documents have to be on the same origin (see: CORS), so you cannot use this for scraping third party websites