什么是创建使用普通的JavaScript这个HTML元素的引用的最有效方法是什么？

https://stackoverflow.com/questions/1714088

19-09-2019
|

题

如果我有以下HTML：

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

什么是最有效的方法（主要是在性能方面）来创建到 DOM元素的引用？我使用的是类似以下内容：</P> <pre><code>var element = document.getElementById('container').getElementsByTagName('iframe')[0]; </code></pre> <P> IIRC，虽然，的getElementsByTagName可能是一个缓慢的表演者。这难道不是一个问题，因为那里只有一个<DIV ID =“容器”>呢？</p>元素中的 <P>有没有更简洁，和/或效果更好的办法让这里<IFRAME>？可以肯定地说，这将永远是<DIV ID =“容器”>唯一的孩子，但并不总是唯一的<IFRAME>在页面上。</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="/cn/articolo/feedback" method="post"> <input type="hidden" name="_csrf" value="rBc4w_rOIYFGh_T7qWatD8rY3PBEH41COBKhGDQ5XYfmfEGUgoZQw3_0vsP4FsNXhomohg5Z2XALQskubG8x0g=="> <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> 有帮助吗？ <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">提交</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> 解决方案 </p> <div class="testo"> <P>穿戴的IFRAME的ID，并与<code>gEBI</code>引用它。如果你没有注意到有<code>gEBTN</code>任何延迟那么我建议保持代码一样的是，和是提供上下文<code>gEBTN</code>帮助。</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> 其他提示</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>在这种情况下，你不会注意到性能。如果你会做但你<code>document.getElementsByTagName</code>可能会注意到它，因为它必须遍历整个DOM树。</P> <P>请记住，it's并不总是表现，在很多情况下it's最好有清晰可读的代码，然后的<em> Perl的一个班轮</em>的会看起来像jibberish给任何人，包括你，当他们2周后重新访问它。</p> <p>如果可以的<code>id</code>属性添加到当然，这将是最好的解决方案作为梅德说<code>iframe</code>元件。</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>嗯似乎它是所有权利的代码。我觉得你可以有关这种简单的JavaScript代码的性能忘了。</P> </div> </div> </div> </div> </div> </div> <div class="row mt-4"> <div class="col-12"> <div class="attribution"> <div>许可以下： <a href="https://creativecommons.org/licenses/by-sa/3.0/" target="_blank">CC-BY-SA</a> 和 <a href="https://stackoverflow.blog/2009/06/25/attribution-required/" target="_blank">归因</a></div> <div>不隶属于 <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">有用的链接</p> </div> <div class="d-flex justify-content-around"> <div></div> <div> <a class="nav-link" href="https://www.generacodice.com/cn/tag">标签</a> <a class="nav-link" href="https://www.generacodice.com/cn/site/aboutus">关于我们</a> <a class="nav-link" href="https://www.generacodice.com/cn/site/contacts">联系人</a> <a class="nav-link" href="https://www.generacodice.com/cn/site/privacy">隐私</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>内容是在创意共享下获得许可的。</p> <p class="mb-0">如果您发现侵犯版权，可以通过 <a href="mailto:info@generacodice.com"> info@generacodice.com </a> 要求删除内容。</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/cn";</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 cannot be blank."});}},{"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 must be an integer.","skipOnEmpty":1});}}], []); jQuery('#w0').yiiActiveForm([], []); });</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>