<img src="https://www.jb51.net/images/stack_heap.jpg" alt="内存堆栈" />
//..................若干代码之后
<script>
var img = document.getElementById("myImg");
//这个时候,由于script标签放置的位置处在img标签之后,加载到script时img标签肯定加载完成了
img.onclick = myFn;
function myFn() {
alert("图象加载完成了!");
}
</script>但标准仍然推荐将script放在head部分!那么,这就要用到另一个事件onload
window.onload = initAll;//将所有代码写在一个函数之中,然后注册到window对象的onload事件属性上
//window表示窗口对象,只要窗口打开,它就始终存在,当页面加载完成后,会触发window对象上的onload事件
function initAll() {
var img = document.getElementById("myImg");
img.onclick = myFn;
function myFn() {
alert("图象加载完成了!");
}
}这样,代码就不出错了,不管将脚本放在什么位置,initAll只有当页面加载完成后才会被执行
访问HTML页面:HTML DOM
HTML DOM将整个页面当成一个document对象,HTML里的标签都要通过document对象来访问.而文档中的每个标签,又会转换成一个对象
<p title="第一个段落:DOM树">我们用一个p标签来演示</p>它又会被转换成下面这个对象
//总该记得对象字面量语法吧
{
tagName:"p",
className:"demo",
title:"第一个段落:DOM树",
id:"p1",
innerHTML:"我们用一个p标签来演示"
}
//你也许会奇怪,为什么标签的class属性会变成对象的className属性而不是class.
//class是JavaScript保留字!!!
//tagName表示它的标签名,而innerHTML表示它里面的HTML代码浏览将HTML标签转换成这样的对象后,在JavaScript中访问该标签的属性或里面的内容就简单多了,但问题是如何访问到这个对象!!
//首先要给该标签加个ID,然后使用document.getElementById方法就能够访问到它了
window.onload = initAll;//注意,要将所要访问HTML页面的代码都放在window的onload事件处理上!
function initAll() {
var p = document.getElementById("p1");
alert(p.className);
alert(p.tagName);
alert(p.title);
alert(p.id);
alert(p.innerHTML);
}访问HTML页面就这么简单!获取一个元素之后,不但可以读取它的属性值,还可以设置它的属性值!
window.onload = initAll;
function initAll() {
var p = document.getElementById("p1");
p.title="JavaScript";
p.className="load";//我们可以更改它的样式
}利用这些,我们已经能做出一些激动人心的事了!
//一些CSS
.over {
color:red;
background:blue;
font-size:larger;
}
.out {
color:black;
background:white;
font-size:smaller;
}
.click {
color:yellow;
background:yellow;
font-size:12px;
}
//HTML代码
<p>一大行文字,它们都是普通的文字!</p>
//JavaScript代码
window.onload = initAll;
function initAll() {
var p = document.getElementById("p1");
p.onclick=clickFn;//这里的事件注册方式除了比行内注册方式少了括号,其它的是一样的
p.onmouseover = overFn;
p.onmouseout = outFn;
}
function clickFn() {
this.className="click";//这里,this也是可用的
//注意是className,而不是class
}
function overFn() {
this.className="over";
}
function outFn() {
this.className="out";
}当然,获取页面元素不止这一种方法.document.getElementsByTagName方法也能获取页面元素,顾名思意,它是通过HTML的标签来获取元素的,而不是ID. 因为一张HTML页面,一个ID名称是唯一的,而标签名则大多数是相同的,所以,getElementsByTagName方法只有一个参数,即一个字符串形式的标签名(tagName),而返回值则是一个类似数组的HTML元素列表