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

    sts是什么? sts是spring tool suite的缩写,是基于eclipse的.开发spring应用的定制的开发环境. 提供了什么? 实现.调试.运行.部署spring应用的现成的环境.包括 ...

  2. Mininet系列实验（五）：Mininet设置带宽之简单性能测试

    1.实验目的 该实验通过Mininet学习python自定义拓扑实现,可在python脚本文件中设计任意想要的拓扑,简单方便,并通过设置交换机和主机之间链路的带宽.延迟及丢包率,测试主机之间的性能.在 ...

  3. git sub module

    https://github.com/ViRb3/de4dot-cex/blob/master/.gitmodules git submodule sync command - what is it ...

  4. Vuex 通俗版教程告诉你Vuex怎么用

    写在文前: 最近一直在用vue开发项目,写来写去就是那么些方法,对于简单的项目一些常用的vue方法足以解决,但是涉及到页面状态,权限判断等一些复杂的传值,vuex是必须的.对于vuex也运用一段时间, ...

  5. mongo 导入import 导出 exprot操作

    .mongo export导出 /mongoexport /h [ip地址] /port [端口] /u [用户名] /p [密码] /d [数据库] -c [表名] /q [查询语句]  /o [保 ...

  6. Ionic4.x 项目结构简单分析

    新建项目 e2e:端对端测试文件 node_modules :项目所需要的依赖包 resources :android/ios 资源(更换图标和启动动画) src:开发工作目录,页面.样式.脚本和图片 ...

  7. angular组件数据

    import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-news', templateUrl: ' ...

  8. 字典学习（Dictionary Learning）

    0 - 背景 0.0 - 为什么需要字典学习? 这里引用这个博客的一段话,我觉得可以很好的解释这个问题. 回答这个问题实际上就是要回答“稀疏字典学习 ”中的字典是怎么来的.做一个比喻,句子是人类社会最 ...

  9. html js 遮罩层

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. 清空Redis缓存

    Redis缓存清理   1.访问redis根目录    cd  /usr/local/redis-2.8.19 2.登录redis:redis-cli -h 127.0.0.1 -p 6379 3.查 ...