window.onload使用时遇到的问题_1

最新推荐文章于 2023-05-27 11:03:24 发布

Dannii_

最新推荐文章于 2023-05-27 11:03:24 发布

阅读量5.7k

点赞数 4

分类专栏： JavaScript 文章标签： window.onload javascript 函数

本文链接：https://blog.csdn.net/qq_36748278/article/details/53289078

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一个简单的创建节点插入节点的代码。

若把window.onload函数这样写，运行会出现错误。

错误代码：

window.οnlοad=function()
{
	var para=document.createElement("p");
	var txt1=document.createTextNode("This is");
	para.appendChild(txt1);


	var emphasis=document.createElement("em");
	var txt2=document.createTextNode(" my ");
	emphasis.appendChild(txt2);

	para.appendChild(emphasis);

	var txt3=document.createTextNode("content. ");
	para.appendChild(txt3);

	var testdiv=document.getElementById("testdiv");
	testdiv.appendChild(para);
}

第一句在 js文件被加载时立即执行。
(1)若js文件是从HTML文档的<head>部分用<script>标签被调用的，它将在HTML文档之前加载到浏览器里。

(2)若<script>标签位于文档底部</body>之前，就不能保证那个文件先结束加载(浏览器可能一次加载多个).因为脚本加载时，文档可能不完整，模型也不完整。没有完整的DOM，createElement等方法就不能正常工作。

所以，必须让这些代码在HTML文档被加载到浏览器之后马上开始执行。

HTML文档全部加载完毕时将触发一个事件，这个事件有它自己的事件处理函数。

文档将被加载到一个浏览器窗口，document对象又是window对象的一个属性。当window对象触发onload事件时，document对象已经存在。

所以，可以将JS代码打包放在一个函数里，并把这个函数添加到window对象的onload事件上去就可以正常运行。

正确代码：

window.οnlοad=prepare;
function prepare()
{
	var para=document.createElement("p");
	var txt1=document.createTextNode("This is");
	para.appendChild(txt1);

	var emphasis=document.createElement("em");
	var txt2=document.createTextNode(" my ");
	emphasis.appendChild(txt2);

	para.appendChild(emphasis);

	var txt3=document.createTextNode("content. ");
	para.appendChild(txt3);

	var testdiv=document.getElementById("testdiv");
	testdiv.appendChild(para);
}

Dannii_

关注

4
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
window.onload使用时遇到的问题_1

一个简单的创建节点插入节点的代码。若把window.onload函数这样写，运行会出现错误。错误代码：window.onload=function(){ var para=document.createElement("p"); var txt1=document.createTextNode("This is"); para.appendChild(txt1); var
复制链接

扫一扫

专栏目录