JavaScript 在浏览器里面运行,它需要这个环境给它提供一个根对象。在浏览器的根对象就是 window,window 代表了浏览器的窗口。
在窗口下面一个层次就是 document,document 代表了在浏览器窗口里面打开来的 HTML 页面,本身也是具有层次的。
HTML 页面里面有各种各样元素:段落,图片,表单(form),表格,链接。可通过一定手段在 JavaScript 中访问,访问有的可能是只读的,有的就是可写的。可写意味着在 JavaScript 里面可以动态的改变页面上显示的内容。
1.Document Object Model
文档对象模型
document 对象的成员提供了 HTML 文档的信息。
images 是 document 对象成员,是一个数组。它代表了在这个页面当中所有的图片,把图片组合起来组成一个数组,可以访问。
alert(document.images); // [object HTMLCollection] 是一种集合(容器)
alert(document.images[0]); //[object HTMLImageElement] 第一个元素是 HTML 图片元素
alert(document.images[0].src); // 显示路径
不是所有元素都像 images 一样通过一个数组直接访问到所有图片,只有像 images / form 这样本身有提供数组的才可以用 document.images 直接访问。
<img name="mama" src="01.jpg"> 通过 alert(document.mama); 可以访问
对于段落 <p id="p1" name="dancing"> name 和 id 是所有 HTML 标记都可以有的属性,name 不能重复,id 可重复。
alert(document.getElementsByName("dancing")); // [object NodeList]
alert(document.getElementById("p1")); // [object HTMLParagraphElement]
通过这些手段可以访问到 HTML 中所有元素。
我们在做 HTML 页面时,如果不是做静态的东西,需要在页面有所动作,应该事先给所有可能用到的东西加上 name 或 class / id (类)。
2.document 的成员
anchors[] forms[] images[] cookie title
bgColor fgColor linkColor alinkColor vlinkColor
在 JavaScript 里,不同浏览器具体实现不同,不是所有浏览器支持 bgColor 可写。
3.图像
image 对象的 src 可以改写以装入一副新的图片。
可以创建 Image() 对象来提前装载图片。
onLoad 事件表明图片装载完成。
images[i]=new Image();
Image() 是一个构造器,你可以用它去制造一个对象出来,用来表达一个 image。
images[i].src=i+".jpg"; 把 6 个图装载进来。
document.anm.src=images[index].src;
用数组里面已经装载的 6 个图片的 src 替换现在显示在页面的图片的 src 。
index=(index+1)%6; 每调用一次换一个图片,实现图片动态变化
4.事件
onLoad / onUnload
onMouseOver / onMouseOut
onClick / onDblClick
onSubmit