Fetching current DOM using Java API

[pradeepdubey82]

Hi All,

I could see a clear difference between html page source and current DOM structure of the same html page. I need to fetch current DOM structure (mouse right click and inspect option in browser) of the page. Would like to know if there is any API in java or FE js?

I tried making http call but all those are giving html source of the page. Any help is highly appreciated. 

Thanks,

Pradeep

[konstantyn_diachenko]

Hi @pradeepdubey82 ,

So, let me sum up difference between HTML page source and current DOM structure:

• HTML Source (what you see with View Page Source): raw file fetched from the server.
• Current DOM (what you see with Inspect Element): includes all runtime changes (JS modifications, injected elements, removed nodes, etc.).

I would recommend the following Java Script solution (inside a browser):

If you’re running code in the page itself (or in DevTools console):

// Get the entire live DOM structure as HTML
const domSnapshot = document.documentElement.outerHTML;
console.log(domSnapshot);

This will match what you see in Inspect Element.

You can also download it:

const blob = new Blob([document.documentElement.outerHTML], { type: "text/html" });
const link = document.createElement("a");
link.href = URL.createObjectURL(blob);
link.download = "dom_snapshot.html";
link.click();

[pradeepdubey82]

Hi Kostiantyn Diachenko,

Page is hosted on some other platform, I need to access the DOM in my local. Use case is 

1. Page is hosted let's say https://www.example.com/cotnent/en/aboutus.html

2. Page is opening fine in any browser

3. My sample js code is running in localhost:4502

4. Now I need a way to fetch the current DOM in my local running js(just plain js not using any react or angular framework).

Thanks,

Pradeep

[konstantyn_diachenko]

Hi @pradeepdubey82 ,

If you need the rendered DOM (with JS executed), then run a headless browser (e.g., Puppeteer or Playwright) locally to load the page and extract DOM.

const puppeteer = require("puppeteer");

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto("https://www.example.com/content/en/aboutus.html", { waitUntil: "networkidle0" });

  const dom = await page.evaluate(() => document.documentElement.outerHTML);
  console.log(dom);

  await browser.close();
})();