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?
use one js file and call it in both products.html and index.html
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