How to get another html file as if getting it by document without using jquery

Question

How to get another html file as if getting it by document

Basically, the same 'document' instance type used for document.getElementsByClassName(), but instead of getting the document the javascript code is in, it gets another .html file in the same domain. For example, "blog.html".

Here's what I want it to hypothetically look like

var blogdocument = getDocument("blog.html");
var blogposts = blogdocument.getElementsByClassName("blogpost");

Answer 1

Just wanted to add some suggestions to the answer

const doc = new DOMParser();

You may not want to use const

Because you should use

doc = null;

to actively release memory after you done with it

DOMParser is very expensive

I have encountered serious performance issues because I didn't do it

DOM Parser Chrome extension memory leak

Answer 2

If it's on the same domain, you can make a network request to get the text of the response back, then send it through DOMParser to construct a document from the text:

fetch('./blog.html')
  .then(res => res.text())
  .then((result) => {
    const doc = new DOMParser().parseFromString(result, 'text/html');
    const posts = doc.querySelectorAll('.blogpost');
    // ...
  })
  // .catch(handleErrors);

Answer 3

An alternative to a fetch or AJAX request is to load an iframe with the source set to the URL, then read from its contentWindow, and then remove it from the DOM.

var desiredPage = "www.google.com";
var ifrm = document.createElement("iframe");
ifrm.setAttribute("src", desiredPage);
document.body.appendChild(ifrm);
setTimeout(function() {
  console.log(ifrm.contentWindow.document.getElementsByTagName("somestuff"));
  ifrm.remove();
}, 100);