Qual é a maneira mais eficaz de criar uma referência a esse elemento HTML usando plain JavaScript?

https://stackoverflow.com/questions/1714088

19-09-2019
|

Pergunta

Se eu tiver o seguinte HTML:

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

O que é a maneira mais eficaz (principalmente em termos de desempenho) para criar uma referência para o elemento DOM? Eu estou usando algo como o seguinte: </p> <pre><code>var element = document.getElementById('container').getElementsByTagName('iframe')[0]; </code></pre> <P> IIRC, porém, getElementsByTagName pode ser um performer lento. É que não é um problema uma vez que há apenas um elemento dentro do <div id = "container"> afinal? </P> <P> Existe uma forma mais concisa, e / ou melhor desempenho maneira de obter o <iframe> aqui? É seguro dizer que ele sempre será o único filho de <div id = "container">, mas nem sempre a única <iframe> na página. </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="/pt/articolo/feedback" method="post"> <input type="hidden" name="_csrf" value="mbaPriHAyyICpRTDMYv5UpBQjB6bljU6Q11nGt6Mgcf68MbGY62neHHCRpd-xcw_pyLjW9jJTXERcDFuluHr9g=="> <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> Foi útil? <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">Enviar</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> Solução </p> <div class="testo"> <P> Coloque um ID no iframe e referenciá-lo com <code>gEBI</code>. Se você não está percebendo qualquer latência com <code>gEBTN</code> então eu sugiro manter o código o mesmo que é, e sim fornecer um contexto para <code>gEBTN</code> ajuda. </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> Outras dicas</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> Neste caso, você não vai notar a performance. Se você iria, contudo, fazer <code>document.getElementsByTagName</code> você provavelmente notaria-lo como ele tem que andar toda a árvore DOM. </P> <P> Lembre-se que Ele'não é sempre sobre o desempenho, em muitos casos É melhor ter código legível claro, então, um <em> perl-one-liner </em> que será parecido com jibberish a ninguém, incluindo você, quando voltar a ele após 2 semanas. </p> <P> Se você pode adicionar um atributo <code>id</code> ao elemento <code>iframe</code> que seria, evidentemente, a melhor solução como diz Meder. </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, parece que está tudo bem com o código. Eu acho que você pode esquecer o desempenho para tal código javascript simples. </P> </div> </div> </div> </div> </div> </div> <div class="row mt-4"> <div class="col-12"> <div class="attribution"> <div>Licenciado em: <a href="https://creativecommons.org/licenses/by-sa/3.0/" target="_blank">CC-BY-SA</a> com <a href="https://stackoverflow.blog/2009/06/25/attribution-required/" target="_blank">atribuição</a></div> <div>Não afiliado a <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">Links Úteis</p> </div> <div class="d-flex justify-content-around"> <div></div> <div> <a class="nav-link" href="https://www.generacodice.com/pt/tag">Tag</a> <a class="nav-link" href="https://www.generacodice.com/pt/site/aboutus">Sobre nós</a> <a class="nav-link" href="https://www.generacodice.com/pt/site/contacts">Contatos</a> <a class="nav-link" href="https://www.generacodice.com/pt/site/privacy">Privacidade</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>O conteúdo é licenciado no Creative Commons.</p> <p class="mb-0">Se você encontrar violações de direitos autorais, poderá entrar em contato conosco em <a href="mailto:info@generacodice.com"> info@generacodice.com </a> para solicitar a remoção do conteúdo.</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/pt";</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” não pode ficar em branco."});}},{"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” deve ser um número inteiro.","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>