zoukankan      html  css  js  c++  java
  • 怎样确保页面中的js代码一定是在DOM结构生成之后再调用

    有这样一类问题, 如下所示, 就是在dom结构没有生成时就在js代码中调用了, 此时就会报错: 

    <head>
        <script>
            console.log(document.body.nodeName);
        </script>
    </head>
    <body>
    </body>

    上图所示的代码表明, 如果js代码在页面DOM没有解析出来时, document无法获取body元素, 这样就会造成报错. 解决方法有下面两种: 

    1. 将操作dom的代码放到body标签底部: 

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
    </head>
    
    <body>
        <script>
            console.log(document.body.nodeName);
        </script>
    </body>
    
    </html>

    2. 使用 DOMContentLoaded 事件, 监听dom解析完成: 

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <script>
            document.addEventListener("DOMContentLoaded", function () {
                console.log(document.body.nodeName);
            })
        </script>
    </head>
    
    <body>
    </body>
    
    </html>

    3. 使用script标签的defer属性和async属性

    参考这篇博客: https://www.cnblogs.com/aisowe/p/11698983.html

  • 相关阅读:
    第四次博客
    第三次作业
    第二次作业
    入学的第一次作业
    第四次作业
    第三次作业
    第二次随笔作业
    第一次随笔
    第四次作业
    第三次作业
  • 原文地址:https://www.cnblogs.com/aisowe/p/11697863.html
Copyright © 2011-2022 走看看