外部引入js文件,获取dom全为null (Cannot read properties of null) 外部引入的js文件失效.

在外部引入js文件时,js获取的dom全为null.

 报错:Cannot read properties of null

window对象是JS访问浏览器窗口的一个接口,由于js文件时由外部引入,因此直接引入js文件时,文档内容并未加载(包括图像,脚本文件,CSS文件等),因此此时js获取的dom全为空.

解决办法:

1.将外部引入的js封装在

window.onload = function(){ }

或者

window.addEventListener('load',function(){})

也可以使用document.addEventListener('DOMContentLoaded',function(){})

DOMContentLoaded事件触发时,仅当DOM加载完成,不包括样式表,图片,flash等等,如果页面的图片很多的话,从用户访问到onload触发可能需要较长的时间,交互效果不能实现,影响用户体验,此时用DOMContentLoaded事件比较合适.

load 是等页面内容全部加载完毕,包含页面dom元素 图片 flash css等等,才会去执行

DOMContentLoaded 是DOM加载完毕,不包含图片 falsh css等就可以执行 加载速度比load更快

2.也可以将js的引入放在最下面,即</body>之后,当DOM加载完成之后,才引入js 的文件.