美文网首页程序员
JavaScript之文档的加载

JavaScript之文档的加载

作者: hi武林高手 | 来源:发表于2018-07-30 23:16 被阅读13次

浏览器在加载一个页面时,是按照自上向下的顺序加载的,读取到一行就运行一行,如果将script标签写到页面的上边,在代码执行时,页面还没有加载,页面没有加载DOM对象也没有加载,会导致无法获取到DOM对象。
将js代码编写到页面的下部就是为了,可以在页面加载完毕以后再执行js代码

onload事件会在整个页面加载完成之后才触发为window绑定一个onload事件
该事件对应的响应函数将会在页面加载完成之后执行,
这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了
解决方式一:
可以将js代码编写到body的下边

<body>
<button id="btn">按钮</button>
<script>
var btn = document.getElementById("btn");
btn.onclick = function(){
                };
</script>
</body>

解决方式二:
将js代码编写到window.onload = function(){}中
window.onload 对应的回调函数会在整个页面加载完毕以后才执行,
所以可以确保代码执行时,DOM对象已经加载完毕了

<script>
window.onload = function(){
var btn = document.getElementById("btn");
btn.onclick = function(){
    };
};
</script>                

相关文章

  • JavaScript之文档的加载

    浏览器在加载一个页面时,是按照自上向下的顺序加载的,读取到一行就运行一行,如果将script标签写到页面的上边,在...

  • JavaScript

    引用JavaScript 内部引用 通过HTML文档内的script标签加载JavaScript代码。 外部引用 ...

  • window.onload()

    load事件通常用于查看文档内容或者图片是否加载完全。 网页中某些javascript脚本均需要在文档内容加载完成...

  • # [$(function(){})和$(document).r

    document.ready和onload的区别——JavaScript文档加载完成事件 页面加载完成有两种事件 ...

  • JavaScript文档的加载过程

    1.浏览器在加载一个界面的时候, 是按照从上至下的顺序加载的 2.如果将script标签写在head标签中, 那么...

  • 2019-05-30

    Javascript之动态加载脚本和样式 //动态加载脚本 function loadScript(url){ ...

  • per-course如何引用JS

    内部引用 通过HTML文档内的script标签加载JavaScript代码。 示例: document.write...

  • js的事件

    javaScript HTML DOM HTML DOM(文档对象模型) 当网页被加载时,浏览器会创建页面的文档对...

  • 《JavaScript DOM编程艺术》读书笔记 --第1篇--

    JavaScript是个啥? JavaScript出现以前,web浏览器只是能够加载显示超文本文档的软件,Java...

  • script

    动态导入script JavaScript 代码: 上面的方法动态加载js资源,注意,默认 append 到文档中...

网友评论

    本文标题:JavaScript之文档的加载

    本文链接:https://www.haomeiwen.com/subject/wdiqvftx.html