Can't find Element inside HTML <object>

Question

We're using an <object>-Tag to embed an SVG-Graphic. Now I would like to find an element inside this SVG-XML-Text using document.querySelector.

The call always returns null. Interestingly enough, if I use F12-DevTools (Chrome) and try to select the element with the same call in the console, it also returns null unless I expand the DOM in the Element-Hierarchy-View of the DevTools (by clicking). After I did that, the document.querySelector returns the Element I'm looking for.

Is there a way to "expand" the object from JavaScript so it is searchable with a querySelector?

NoRyb · Accepted Answer · 2021-06-09 07:53:13Z

1

I've found that if I first try to find the object and use it's contentWindow.document, then it will work:

document.querySelector('object').contentDocument.querySelector('[objId="xyz"]');

edited Jun 9, 2021 at 7:53

answered Jun 9, 2021 at 7:35

NoRyb

1,5541 gold badge14 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Can't find Element inside HTML <object>

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related