有这样一类问题, 如下所示, 就是在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

怎样确保页面中的js代码一定是在DOM结构生成之后再调用的更多相关文章

  1. MVC学习随笔----如何在页面中添加JS和CSS文件

    http://blog.csdn.net/xxjoy_777/article/details/39050011 1.如何在页面中添加Js和CSS文件. 我们只需要在模板页中添加JS和CSS文件,然后子 ...

  2. 系统管理模块_部门管理_改进_抽取添加与修改JSP页面中的公共代码_在显示层抽取BaseAction_合并Service层与Dao层

    系统管理模块_部门管理_改进1:抽取添加与修改JSP页面中的公共代码 commons.jspf <%@ page language="java" import="j ...

  3. jsp页面中的java代码

    jsp页面中的java代码 1.jsp表达式  <%= ....%>  只能放置一个变量常量 2. jsp小脚本 <% .... %>  java语句,可以插入一些语句 3. ...

  4. java中执行js代码

    要在java中执行js代码,首先明白,java不支持浏览器本身的方法.支持自定义的js方法,否则会报错 先新建一个js文件:jsss.js 内容如下: function aa(a,b){ return ...

  5. pyv8的安装和使用：python中执行js代码

    pyv8 的作用是在python中执行js代码,然后可以使用js里的变量等内容.python取得javascript里面的值.javascript取得python里面的值.python和javascr ...

  6. JSF页面中使用js函数回调后台bean方法并获取返回值的方法

    由于primefaces在国内使用的并不是太多,因此,国内对jsf做系统.详细的介绍的资料很少,即使有一些资料,也仅仅是对国外资料的简单翻译或者是仅仅讲表面现象(皮毛而已),它们的语句甚至还是错误的, ...

  7. 在页面中使用js

    JavaScript:用来在页面编写特效的,和HTML\CSS一样当都是由浏览器解析 JavaScript语言 一.JS如何运行(JavaScript,jscript,VbScript,applet ...

  8. 页面中引入js的几种方法

    通常大家最为熟悉的是一下两种方法: 在页面中直接写入<script type="text/javascript">js代码</script>. 在页面中引入 ...

  9. JSF页面中使用js函数回调后台action方法

    最近遇到了一个问题就是在JSF页面中嵌入html页面,这个html页面中很多功能是使用js动态生成的,现在需要在js函数里想去调用JSF中action类method()方法并动态传送数据给后台进行处理 ...

随机推荐

  1. Wireshark过滤命令总结

    1.表达式1 (tcp.flags.reset == )&&(tcp.seq == ) 2.表达式2 (tcp.flags.syn == )&&(tcp.analysi ...

  2. deepin 删除文件后目录不刷新解决方案

    调整最大文件监控数量 sudo vim /etc/sysctl.conf 添加参数 fs.inotify.max_user_watches = 运行使配置生效 sudo /sbin/sysctl -p ...

  3. linux日常---3、linux常用操作

    linux日常---3.linux常用操作 一.总结 一句话总结: 状态的确是非常之好,享受这种状态. 1.linux删除文件夹和文件? rm -rf *:删文件和文件夹 rm -rf *.*:只能删 ...

  4. Flutter移动电商实战 --（52）购物车_数据模型建立和Provide修改

    根据json数据生成模型类 {"goodsId":"2171c20d77c340729d5d7ebc2039c08d","goodsName" ...

  5. python 设计模式之享元(Flyweight)模式

    #写在前面 这个设计模式理解起来很容易.百度百科上说的有点绕口. #享元模式的定义 运用共享技术来有効地支持大量细粒度对象的复用. 它通过共享已经存在的对橡大幅度减少需要创建的对象数量.避免大量相似类 ...

  6. Java面试之http知识点（必问）

    Java面试之http知识点(必问)   版权声明:本文为博主原创文章,遵循CC 4.0 by-sa版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/q ...

  7. 简易的CRM系统案例之SpringMVC+JSP+MySQL+hibernate框架版本

    继续对上一版本进行改版,变成SpringMVC框架 简易的CRM系统案例之易的CRM系统案例之JSP+MySQL+SSH框架版本 src/spring.xml <?xml version=&qu ...

  8. 几种主流浏览器内置http抓包工具软件使用方

    对于学习网站的人或者相关编程人员,经常需要用到http抓包工具来跟踪网页,但主流抓包软件如httpwatch.httpanalyzerstdv都是收费的,破解版往往也不稳定.实际上现在很多浏览器都内置 ...

  9. Hibernate 自动更新表出错 More than one table found in namespace

    报错:Caused by: org.hibernate.tool.schema.extract.spi.SchemaExtractionException: More than one table f ...

  10. 算法习题---3.01猜数字游戏提示（UVa340）

    一.题目 实现一个经典“猜数字”游戏.给定答案序列和用户猜的序列,统计有多少数字位置正确(A),有多少数字在两个序列都出现过但位置不对(B). 输入包含多组数据.每组输入第一行为序列长度n,第二行是答 ...