JS: select class inside of </a></h1> </div> <div class="grid fw-wrap pb8 mb16 bb bc-black-075"> <div class="grid--cell ws-nowrap mr16 mb8" title="2016-01-12 19:07:53Z"> <span class="fc-light mr2">Asked</span> <time itemprop="dateCreated" datetime="2022-03-13T16:49:19.567" class="fromnow">Mar 13 '22 at 16:49</time> </div> <div class="grid--cell ws-nowrap mr16 mb8"> <span class="fc-light mr2">Active</span> <time class="fromnow" title="2022-03-13T19:53:10.637" datetime="2022-03-13T19:53:10.637">Mar 13 '22 at 19:53</a> </div> <div class="grid--cell ws-nowrap mb8" title="Viewed 309 times"> <span class="fc-light mr2">Viewed</span> 309 times </div> </div> <div id="mainbar" role="main" aria-label="questions and answers"> <div id="question" class="question" data-questionid="71458868" data-ownerid="14796345" data-score="-1"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="71458868"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="-1">-1</div> <button class="js-bookmark-btn s-btn s-btnunset c-pointer py4"> <svg aria-hidden="true" class="svg-icon iconBookmark" width="18" height="18" viewBox="0 0 18 18"><path d="M6 1a2 2 0 00-2 2v14l5-4 5 4V3a2 2 0 00-2-2H6zm3.9 3.83h2.9l-2.35 1.7.9 2.77L9 7.59l-2.35 1.7.9-2.76-2.35-1.7h2.9L9 2.06l.9 2.77z"></path></svg> <div class="js-bookmark-count mt4" data-value=""></div> </button> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>I have an <code><iframe></code> on my page.</p> <p>Inside of the page, that is loaded in the iframe, is this: <code><span class="test">TEST</span></code></p> <p>I would like to change the color of <strong>TEST</strong> to <code>red</code>.</p> <hr/> <p>This is what I wrote:</p> <pre><code>var test = document.querySelector("iframe").contentWindow.document.querySelector(".test"); test.style.color = "red"; </code></pre> <hr/> <p>Seems logical, but it doesn't work. – What's going on?</p> <p>This is the error message that I'm getting: <a class="external-link" href="https://i.stack.imgur.com/B9mhe.png" rel="nofollow noreferrer"><img alt="Error" src="../../images/3819965583.webp"/></a></p></div> <div class="mt24 mb12"> <div class="post-taglist grid gs4 gsy fd-column"> <div class="grid ps-relative"> <a href="../../questions/tagged/javascript" class="post-tag js-gps-track" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/iframe" class="post-tag js-gps-track" title="show questions tagged 'iframe'" rel="tag">iframe</a> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="user-info "> <div class="user-action-time">edited <span title="2022-03-13T19:00:51.667" class="relativetime">Mar 13 '22 at 19:00</span></div> <div class="user-gravatar32"></div> <div class="user-details" itemprop="author" itemscope="" itemtype="http://schema.org/Person"> <span class="d-none" itemprop="name">Simon R.</span> <div class="-flair"></div> </div> </div> </div> <div class="post-signature owner grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Mar 13 '22 at 16:49">asked Mar 13 '22 at 16:49</time> <a href="../../users/14796345/simon-r" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/14796345.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Simon R." /> </a> <div class="s-user-card--info"> <a href="../../users/14796345/simon-r" class="s-user-card--link">Simon R.</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">151</li> <li class="s-award-bling s-award-blingbronze" title="10 bronze badges">10</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-71458868" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="71458868" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-126305651" class="comment js-comment " data-comment-id="126305651" data-comment-owner-id="14796345" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment126305651_71458868"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">@Quentin Thank you, for your comment! Could you be so kind, as to maybe show me how I can use this postMessage-thing in my example?– I don't really understand it. – I tried implementing it, but I keep getting errors telling me that my code is basically just wrong…</span> – <a href="../../users/14796345/simon-r" title="151 reputation" class="comment-user owner">Simon R.</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/71458868/js-select-class-inside-of-iframe#comment126305651_71458868"><span title="2022-03-13T19:14:37.117 License: CC BY-SA 4.0" class="relativetime-clean">Mar 13 '22 at 19:14</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <div id="answers"> <a name="tab-top"></a> <div id="answers-header"> <div class="answers-subheader grid ai-center mb8"> <div class="grid--cell fl1"> <h2 class="mb0" data-answercount="9">1 Answers<span style="display:none;" itemprop="answerCount">1</span></h2> </div> </div> </div> <a name="71459349"></a> <div id="answer-71459349" class="answer " data-answerid="71459349" data-ownerid="13826319" data-score="1" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="71459349"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="1">1</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>I have tried this and it seems to work for me. Perhaps its some other issue?</p> <p>Things to keep in mind:</p> <ol> <li><p>You cant modify a page from a domain that isnt your own (so if the code is running on localhost, you can only modify other loaded files on localhost) This is a CORS issue</p> </li> <li><p>You need to wait for the IFrame to load the document before modifying it.</p> </li> </ol> <p>Other than that I took a look at your code, and the code on the link below and I tested using querySelector in an iframe and it seemed to work.</p> <p>Take a look at this if you need more help: <a class="external-link" href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/contentWindow" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/contentWindow</a></p></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="edited Mar 13 '22 at 19:53">edited Mar 13 '22 at 19:53</time> <a href="../../users/383904/roko-c-buljan" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/383904.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Roko C. Buljan" /> </a> <div class="s-user-card--info"> <a href="../../users/383904/roko-c-buljan" class="s-user-card--link">Roko C. Buljan</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">196,159</li> <li class="s-award-bling s-award-blinggold" title="39 gold badges">39</li> <li class="s-award-bling s-award-blingsilver" title="305 silver badges">305</li> <li class="s-award-bling s-award-blingbronze" title="313 bronze badges">313</li> </ul> </div> </div> </div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Mar 13 '22 at 17:52">answered Mar 13 '22 at 17:52</time> <a href="../../users/13826319/kevin-who" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/13826319.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Kevin Who" /> </a> <div class="s-user-card--info"> <a href="../../users/13826319/kevin-who" class="s-user-card--link">Kevin Who</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">33</li> <li class="s-award-bling s-award-blinggold" title="1 gold badge">1</li> <li class="s-award-bling s-award-blingsilver" title="1 silver badge">1</li> <li class="s-award-bling s-award-bling__bronze" title="7 bronze badge">7</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-71459349" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="71459349" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-126305555" class="comment js-comment " data-comment-id="126305555" data-comment-owner-id="14796345" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment126305555_71459349"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Hello! – Thank you for your great answer, but I was unfortunately not able to solve it. – 1. I'm just working with local files. 2. I added a timeout to make sure that that's not the problem, but it didn't change anything. – But, I found an error message in my console and added it to my question, maybe you have an idea on what this could mean? Kind Regards,</span> – <a href="../../users/14796345/simon-r" title="151 reputation" class="comment-user owner">Simon R.</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/71458868/js-select-class-inside-of-iframe#comment126305555_71459349"><span title="2022-03-13T19:05:39.120 License: CC BY-SA 4.0" class="relativetime-clean">Mar 13 '22 at 19:05</span></a></span> </div> </div> </li> <li id="comment-126306159" class="comment js-comment " data-comment-id="126306159" data-comment-owner-id="383904" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment126306159_71459349"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Edit: Removed link with threat website. Added a better resource. MDN. (w3schools is still at this date (2022.) one of the worst resources to go learn development from. Outdated and bad examples teaching just the worst practices. And it's not even a community-driven site.)</span> – <a href="../../users/383904/roko-c-buljan" title="196,159 reputation" class="comment-user ">Roko C. Buljan</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/71458868/js-select-class-inside-of-iframe#comment126306159_71459349"><span title="2022-03-13T19:53:37.217 License: CC BY-SA 4.0" class="relativetime-clean">Mar 13 '22 at 19:53</span></a></span> </div> </div> </li> <li id="comment-126306966" class="comment js-comment " data-comment-id="126306966" data-comment-owner-id="13826319" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment126306966_71459349"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">According to that screenshot this is a CORS issue. I suggest you read over this: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin</span> – <a href="../../users/13826319/kevin-who" title="33 reputation" class="comment-user ">Kevin Who</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/71458868/js-select-class-inside-of-iframe#comment126306966_71459349"><span title="2022-03-13T20:59:53.830 License: CC BY-SA 4.0" class="relativetime-clean">Mar 13 '22 at 20:59</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script src="../../static/js/fromnow.js"></script> </body> </html>