zoukankan      html  css  js  c++  java
  • Js引入问题Uncaught TypeError: Cannot read property 'appendChild' of undefined的分析与解决

    在这里插入图片描述
         <head>内引入外部Js ,报错出异常,显示Uncaught TypeError: Cannot read property 'appendChild' of undefined,属性未定义。为什么出现这种问题。查找很久发现这跟Js、DOM加载顺序有关,由于写在了<head>内,它会先执行,但是此时由于DOM还未加载完,而Js里有需要获取DOM中元素的语句要执行,这时就会出现异常,Js报错Uncaught TypeError: Cannot read property 'appendChild' of undefined,无法读取未定义的属性'appendChild'。

    在这里插入图片描述

         解决方法很简单,将Js的外部文件引入放在<body>中就行,让整个页面加载完后再执行Js就不会出现无法读取的问题了。(如果是内部Js的话,还可以使用window.onload = function(){} 代码包裹,也是在文档加载之后再执行)


    ---------------------------------------------------------------这是分割线------------------------------------------------------------

    这里再(复习)补充一下Js知识:

        <head>内的Js可能会阻塞页面的传输和页面的渲染,也就是在<head>内的Js一般要先执行完后,才开始渲染body页面。所以尽量不要将 JS 文件放在 head 内。可以选择在 DOM完成时,或者特定区块后引入和执行 JavaScript。

        所以为了避免<head>内引入的Js会阻塞页面的传输和页面的渲染,一般原则是,样式在前面,DOM文档,脚本在最后面。遵循先解析再渲染再执行Javascript这个顺序。

  • 相关阅读:
    [bzoj1613 Usaco2007 Jan]Running贝茜的晨练计划
    [bzoj1600][Usaco2008 Oct]建造栅栏
    [bzoj3208]花神的秒题计划I
    [vijos1011]滑雪
    [noip2007 pjt3] 守望者的逃离
    DP(1) 背包
    快速幂 模板及应用
    BZOJ1303: [CQOI2009]中位数图
    BZOJ1083: [SCOI2005]繁忙的都市
    Bzoj1084: [SCOI2005]最大子矩阵
  • 原文地址:https://www.cnblogs.com/dreamtown/p/14509531.html
Copyright © 2011-2022 走看看