How to scroll to an HTML element without an ID

Question

im trying to scroll to a specific element inside a site which is embedded in a iframe component. I have tried with scrolling to a concrete possition with 'x' and 'y' but this is not a viable solution since its hardcoded and static, resulting in problems on lower or higher screen resolutions. I saw that there is a way to scroll to an element based on id:

document.getElementById("divFirst").scrollIntoView();

This is good and all but the elements which im trying to access do not have id and are not distinguishable by class either.

There are several other components looking exactly like this one, same classes, same structure and i cant modify them since they are from an outer source!

Is there any way to scroll to such an element?

Answer 1

With the help of all the answers posted in this thread i have managed to find how to fix it. The most important thing here was that the element was in a different DOM not my current, since im trying to locate an element in a embedded website (Website from the iframe html element). This is my solution:

//locate the frame
var iframe = document.getElementById("frameId");
//get the inner DOM
element = iframe.contentWindow.document.querySelector('#headerDiv > div.col-sm-4 > h1');
//and then just do a basic scroll
element.scrollIntoView({ behavior: 'smooth', block: 'end'});

Answer 2

You can try using the query selector and specifying the elements selector path as given to you by your browser:

resulting in something like this

#question > div > div.postcell.post-layout--right > div.mb0 > div > div.post-signature.owner.grid--cell > div > div.user-action-time > span