How do I traverse Execution Contexts with jQuery in Chrome Dev Tools?

Question

How do I traverse Execution Contexts with jQuery in Chrome Dev Tools?

Back story and goals: I could not find the answer anywhere I searched. I am new so I am probably asking this question incorrectly and so it might be very obvious. I have already tested the classes and their attributes that I would like to change using the styles and elements tab in the dev tools. I have made the classes I want to add to the DOM in cPanel and know what classes I can use to query their insertion point and remove the old classes. I am currently at the stage where I am testing the jQuery code I would like to put in the footer that will insert these classes into the DOM. My end goal is to change the size and alignment styles of a modal in WordPress.

Below you will see an image of me querying something that resides in the 'top' execution context. And then you will see an image of me unable to query it (value of null) while in the 'about:blank' context.

Querying class found in top in 'top' context

Querying class found in top in 'about:blank' context

Below you will see an image of me querying something that resides in the 'about;blank' execution context. And then you will see an image of me unable to query it (value of null) while in the 'top' context.

***see these two pictures below in comments, I lack reputation****

A line of jQuery to test and four lines of jQuery that will hopefully achieve my goals. They look like this at the moment:

<script>
jQuery(document).ready(function(){
alert('jQuery Ready!');

jQuery(function($){
$('.modalContent__content').addClass('modalContent__content-mod').removeClass('modalContent__content');
$('mc-layout__modalContent').addClass('mc-layout__modalContent-mod').removeClass('mc-layout__modalContent');
$('.mc-modal').addClass('mc-modal-mod').removeClass('mc-modal');
$('.modalContent__image').addClass('modalContent__image-mod').removeClass('modalContent__image');
)};
)};
</script>

If I can not query these in the console there is no chance of me doing so in the footer of the website. Please help. Any suggestions, articles, or whatever are all welcome. Thank you!

Answer 1

When you switch context in Chrome DevTools you can no longer access parent document DOM elements like this: $(".mc-modal') that's why you are seeing an error here: https://i.stack.imgur.com/QQmST.png

The second parameter in jQuery selector provides a context in which to search for:

jQuery( selector [, context ] )

To access .mc-modal from within the iframe (about:blank context) you would have to use:

$(".mc-modal", parent.document)

Now to access the iframe context from the parent using jquery you can use:

$('iframe').contents().find('.modalContent__content')