Was ist der effektivste Weg, einen Verweis auf dieses HTML-Element mit Normalpapier JavaScript erstellen?

https://stackoverflow.com/questions/1714088

19-09-2019
|

Frage

Wenn ich die folgende HTML:

<div id="container">
  <iframe></iframe>
</div>

Was ist der effektivste Weg, (vor allem in Bezug auf die Leistung) einen Verweis auf das DOM-Element zu schaffen? Ich verwende etwas wie folgt aus: </p> <pre><code>var element = document.getElementById('container').getElementsByTagName('iframe')[0]; </code></pre> <P> IIRC, aber kann getElementsByTagName ein langsamer Darsteller sein. Ist das kein Thema, da es nur ein Element innerhalb der <div id = „container“> eigentlich? </P> <P> Gibt es eine prägnanten und / oder leistungsfähigere Art und Weise die <iframe> hier zu bekommen? Es ist sicher zu sagen, dass es immer das einzige Kind sein wird <div id = „container“>, aber nicht immer das einzige <iframe> auf der Seite. </P> </div> </div> </div> <div id="boxRight" class="tab-content col-xl-6"> <div id="boxSoluzioneDescrizione" class="boxArticolo"> <div class="row"> <div class="col-md-6"> <div class="row justify-content-start"> <div class="col-md-12"> <form id="feedback" action="/de/articolo/feedback" method="post"> <input type="hidden" name="_csrf" value="NL-AbUKxfQd87dJS59lEofd01RzZhCUTbMioaUnDhohg1_kYLdM1Xja-5jaA6ROZkwCBfavsd2c1hsI7caT00A=="> <div class="hidden" style="display:none;"> <div class="form-group field-feedbackform-pagina required"> <input type="hidden" id="feedbackform-pagina" class="pagina" name="FeedbackForm[pagina]" value="/articolo/details"> <p class="help-block help-block-error"></p> </div> <div class="form-group field-feedbackform-idargomento"> <input type="hidden" id="feedbackform-idargomento" class="idArgomento" name="FeedbackForm[idArgomento]" value="356916"> <p class="help-block help-block-error"></p> </div> </div> <div> War es hilfreich? <div class="example-block text-center"> <label class="radio-inline" for="happy" style="font-size:1.5em;cursor:pointer;color:green;"> <i class="far fa-thumbs-up" title="This answer is useful"></i>   </label> <input type="radio" id="happy" class="voto input-hidden" name="FeedbackForm[voto]" value="10"> </div> <div class="example-block text-center"> <label class="radio-inline" for="sad" style="font-size:1.5em;cursor:pointer;color:red;"> <i class="far fa-thumbs-down" title="This answer is not useful"></i>   </label> <input type="radio" id="sad" class="voto input-hidden" name="FeedbackForm[voto]" value="0"> </div>  </div> <div class="row footer justify-content-between"> <div class="col"> <button type="button" class="btn btn-primary" data-dismiss="modal">einreichen</button> </div> </div> </form> </div> </div> </div> <div class="col-md-6"> </div> </div> <div class="row "> <div class="col-md-12"> <p class="title" style="background-color:green;"> <i class="far fa-thumbs-up"></i> Lösung </p> <div class="testo"> <P> Setzen Sie eine ID auf dem iframe und verweisen Sie mit <code>gEBI</code>. Wenn Sie keine Latenz mit <code>gEBTN</code> zu bemerken, dann schlage ich den Code gleich bleibt wie sie ist, und ja die Bereitstellung eines Kontextes für <code>gEBTN</code> hilft. </P> </div> </div> </div> </div> </div> </div> <div class="row mt-4 adv"> <div class="col-12 text-center"> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-5108424997424987" data-ad-slot="1879801491"></ins> <script defer async crossorigin="anonymous"> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="row mt-4 adv"> <div class="col-12 text-center"> </div> </div> <div class="row mt-4"> <div class="col-12"> <div id="boxSoluzioniAvanzate" class="boxArticolo soluzioni"> <p class="title" style="background-color:black;"><i class="fas fa-file-alt"></i> Andere Tipps</p> <div class="testo"> <div id="alt1438805" class="boxBorderTop row noMargin pt-4"> <div class="col-md-12 text-left"> <i class="far fa-newspaper fa-2x mb-2" style="display:block;color:gray;"></i> </div> <div class="col-md-12"> <P> In diesem Fall bemerken Sie nicht die Leistung. Wenn Sie jedoch tun <code>document.getElementsByTagName</code> Sie es wahrscheinlich bemerken würde, wie es die gesamte DOM-Baum zu gehen hat. </P> <P> Beachten Sie, dass es ist nicht immer über die Leistung, in vielen Fällen ist es besser klar lesbaren Code zu haben, dann ein <em> Perl-Einzeiler </em>, die wie jibberish jedem aussehen wird, auch Sie, wenn sie erneut es nach 2 Wochen. </p> <P> Wenn Sie ein <code>id</code> Attribut auf das <code>iframe</code> Element hinzufügen können, die beste Lösung wäre natürlich, wie Meder sagt. </P> </div> </div> <div id="alt1438806" class="boxBorderTop row noMargin pt-4"> <div class="col-md-12 text-left"> <i class="far fa-newspaper fa-2x mb-2" style="display:block;color:gray;"></i> </div> <div class="col-md-12"> <P> Hmm es scheint alles in Ordnung mit Code. Ich glaube, Sie können für solche einfachen JavaScript-Code über die Leistung vergessen. </P> </div> </div> </div> </div> </div> </div> <div class="row mt-4"> <div class="col-12"> <div class="attribution"> <div>Lizenziert unter: <a href="https://creativecommons.org/licenses/by-sa/3.0/" target="_blank">CC-BY-SA</a> mit <a href="https://stackoverflow.blog/2009/06/25/attribution-required/" target="_blank">Zuschreibung</a></div> <div>Nicht verbunden mit <a href="https://stackoverflow.com/" target="_blank">StackOverflow</a></div> </div> </div> </div> <div id="share"></div> </div> <div class="row mb-4 adv"> <div class="col-md-12 text-center">  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5108424997424987" data-ad-slot="5412049179" data-ad-format="auto" data-full-width-responsive="true"></ins> <script defer async crossorigin="anonymous"> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> </div> <aside id="bannerRight" class="col-xs-12 col-md-4 col-lg-3 text-center" > <div class="container mt-4"> <div class="row mb-4 adv"> <div class="col-md-12">  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5108424997424987" data-ad-slot="1592207755" data-ad-format="auto" data-full-width-responsive="true"></ins> <script defer async crossorigin="anonymous"> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="row adv"> <div class="col-md-12">  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5108424997424987" data-ad-slot="8889943968" data-ad-format="auto" data-full-width-responsive="true"></ins> <script defer async crossorigin="anonymous"> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="row topArticoli justify-content-center"> <div class="col-md-12 col-lg-10 pt-4"> </div> </div> </div> </aside> </div> </section>  <footer class="site-footer"> <div class="section-free d-block d-md-flex"> <div class="section-newsletter col"> </div> <div class="col content-free-projects mb-2"> <div> <p class="my-3">Nützliche Links</p> </div> <div class="d-flex justify-content-around"> <div></div> <div> <a class="nav-link" href="https://www.generacodice.com/de/tag">Stichworte</a> <a class="nav-link" href="https://www.generacodice.com/de/site/aboutus">Über uns</a> <a class="nav-link" href="https://www.generacodice.com/de/site/contacts">Kontakte</a> <a class="nav-link" href="https://www.generacodice.com/de/site/privacy">Privatsphäre</a> </div> <div> <a class="nav-link social fb" href="https://www.facebook.com/generacodice" target="_blank"><i class="fab fa-facebook"></i> Facebook</a> <a class="nav-link social instagram" href="https://www.instagram.com/genera_codice" target="_blank"><i class="fab fa-instagram"></i> Instagram</a> </div> <div></div> </div> <div class="small-footer-link d-flex align-items-center justify-content-center"> <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top"> <input type="hidden" name="cmd" value="_s-xclick" /> <input type="hidden" name="hosted_button_id" value="42ZKUPRLM66J2" /> <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif" border="0" name="submit" title="PayPal - The safer, easier way to pay online!" alt="Donate with PayPal button" /> </form> </div> </div> </div> <div class="row m-0 justify-content-center text-center p-2"> <div class="col-md-5"> <p>Der Inhalt ist unter Creative Commons lizenziert.</p> <p class="mb-0">Wenn Sie Urheberrechtsverletzungen finden, können Sie uns unter uns kontaktieren <a href="mailto:info@generacodice.com"> info@generacodice.com </a> um die Entfernung des Inhalts zu beantragen.</p> </div> </div> </footer> <div id="scroll-to-top" style="display: block;background:none;"> <img src="https://www.generacodice.com/img/icone/scroll-top.svg" alt="scroll top" style="width:48px;height:48px;background-color:#fff;" /> </div>   <script src="https://www.googletagmanager.com/gtag/js?id=G-PNYLV6VWJG" async crossorigin="anonymous"></script> <script crossorigin="anonymous" defer> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-PNYLV6VWJG'); </script>  <script type="application/ld+json" crossorigin="anonymous"> { "@context": "https://schema.org", "@type": "WebSite", "url": "https://www.generacodice.com/", "potentialAction": { "@type": "SearchAction", "target": "https://www.generacodice.com/articolo?ricerca={search_term_string}", "query-input": "required name=search_term_string" } } </script>  <script>var lingua = "https://www.generacodice.com/de";</script> <script src="/lib/wow.min.js" preload></script> <script src="/lib/js.cookie.min.js" preload></script> <script src="https://cdn.jsdelivr.net/npm/cookie-bar/cookiebar-latest.min.js?customize=1&tracking=1&thirdparty=1&always=1&noGeoIp=1&showNoConsent=1&showPolicyLink=1&privacyPage=https%3A%2F%2Fwww.generacodice.com%2Fsite%2Fprivacy" preload></script> <script src="/js/form_ricerca.js" preload></script> <script src="https://kit.fontawesome.com/99a60a9345.js" preload></script> <script src="/js/ads.js" defer="defer" preload></script> <script src="/js/main.js?timestamp=20221207" defer="defer" preload></script> <script src="/assets/44258436/yii.js"></script> <script src="/assets/44258436/yii.validation.js"></script> <script src="/assets/44258436/yii.activeForm.js"></script> <script src="/js/feedback.js" defer></script> <script src="/js/articulate.min.js"></script> <script src="/js/playerTesto.js?202310021220"></script> <script src="/lib/jssocials/jssocials.min.js"></script> <script src="/js/sceditor/minified/sceditor.min.js"></script> <script src="/js/sceditor/minified/formats/xhtml.js"></script> <script src="/js/articolo/details.js?202309292139"></script> <script>jQuery(function ($) { jQuery('#feedback').yiiActiveForm([{"id":"feedbackform-pagina","name":"pagina","container":".field-feedbackform-pagina","input":"#feedbackform-pagina","error":".help-block.help-block-error","validate":function (attribute, value, messages, deferred, $form) {yii.validation.required(value, messages, {"message":"Pagina darf nicht leer sein."});}},{"id":"feedbackform-idargomento","name":"idArgomento","container":".field-feedbackform-idargomento","input":"#feedbackform-idargomento","error":".help-block.help-block-error","validate":function (attribute, value, messages, deferred, $form) {yii.validation.number(value, messages, {"pattern":/^[+-]?\d+$/,"message":"Id Argomento muss eine Ganzzahl sein.","skipOnEmpty":1});}}], []); });</script> <script> window.addEventListener('load', function() { var is_adsense_load = 0 window.addEventListener('scroll', function() { if (is_adsense_load == 0) { is_adsense_load = 1; var ele = document.createElement('script'); ele.async = true; ele.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js' var sc = document.getElementsByTagName('script')[0] sc.parentNode.insertBefore(ele, sc); (adsbygoogle = window.adsbygoogle || []).push({ google_ad_client: "ca-pub-5108424997424987", enable_page_level_ads: true }); } }) }) </script> </body> </html>