一个简单的创建节点插入节点的代码。
若把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);
}