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

    安装 下载Linux对应的MySQL https://dev.mysql.com/downloads/mysql/ CentOS选择Red Hat Enterprise Linux 在/usr/loc ...

  2. arcgis python 布局中所有元素信息报告

    # Author: ESRI # Date: July 5, 2010 # Version: ArcGIS 10.0 # Purpose: This script generates a report ...

  3. python下multiprocessing和gevent的组合使用

    python下multiprocessing和gevent的组合使用 对于有些人来说Gevent和multiprocessing组合在一起使用算是个又高大上又奇葩的工作模式. Python的多线程受制 ...

  4. Oracle存在则更新，不存在则插入应用-merge

    转: Oracle存在则更新,不存在则插入应用-merge 2017年01月11日 14:15:26 周星猩 阅读数 11354更多 分类专栏: Oracle   版权声明:本文为博主原创文章,遵循C ...

  5. Linux -- 如何减少IO过程中的CPU copy

    四种I/O方式的对比 1. Buffered I/O read(file, tmp_buf, len); write(socket, tmp_buf, len); 上下文切换:4次 CPU copy: ...

  6. 对Mysql数据表本身进行操作

    创建实验环境 mysql> create database test_db; Query OK, 1 row affected (0.00 sec) mysql> use test_db; ...

  7. python 中密码处理函数

    一个简单的对某字符串进行 MD5加密 import hashlib def md5_pwd(pwd): """ 为了防止解密,hashlib.md5时加入自己的字段 将密 ...

  8. oracle数据库死锁原因及分析

    定义: 当两个用户希望持有对方的资源时就会发生死锁. 即两个用户互相等待对方释放资源时,oracle认定为产生了死锁,在这种情况下,将以牺牲一个用户作为代价,另一个用户继续执行,牺牲的用户的事务将回滚 ...

  9. C#线程 BeginInvoke和EndInvoke使用方法

    一.C#线程概述 在操作系统中一个进程至少要包含一个线程,然后,在某些时候需要在同一个进程中同时执行多项任务,或是为了提供程序的性能,将要执行的任务分解成多个子任务执行.这就需要在同一个进程中开启多个 ...

  10. 【c# 学习笔记】析构函数

    析构函数 用于在类销毁之前释放类实例所使用的托管和非托管资源.对应c#应用程序所创建的大多数对象,可以依靠.net Framework的垃圾回收站(GC) 来隐式地执行内存管理任务.但若创建封装了非托 ...