How is that I can not investigate part of HTML in browser inspector?

Issue

I have here this seating layout: https://www.jegy.hu/program/kabare-121948/713631

If I investigate one available seat in Chrome, inspector does not show coordinates of the div for that particular seat. Why? Maybe because seat coordinates loaded with Javascipt later, directly to DOM?

Is it a way to extract part of the HTML if they are loaded via Javascipt to DOM?

enter image description here

Solution

You can not really investigate one available seat, at least not as you would expect.

The first thing is that the website lays a <div> over the actual image, that looks like it is used to collect all user interaction (events) with the image (e.g. scrolling, navigating). This is the div you have selected in your screenshot. You can go ahead and just delete it.

Then you’ll notice that there are <canvas> elements that create a 4×4 grid of tiles. The actual seats are painted into these canvas elements. They are not even real DOM objects.

But there are elements you can investigate: the <text>s like "JOBB KARZAT". Just search for that string in the DOM and you’ll find some interesting elements.

Answered By – Dominik Schreiber

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published