JavaScript 在瀏覽器里面運(yùn)行,它需要這個(gè)環(huán)境給它提供一個(gè)根對(duì)象。在瀏覽器的根對(duì)象就是 window,window 代表了瀏覽器的窗口。
在窗口下面一個(gè)層次就是 document,document 代表了在瀏覽器窗口里面打開(kāi)來(lái)的 HTML 頁(yè)面,本身也是具有層次的。
HTML 頁(yè)面里面有各種各樣元素:段落,圖片,表單(form),表格,鏈接??赏ㄟ^(guò)一定手段在 JavaScript 中訪問(wèn),訪問(wèn)有的可能是只讀的,有的就是可寫(xiě)的。可寫(xiě)意味著在 JavaScript 里面可以動(dòng)態(tài)的改變頁(yè)面上顯示的內(nèi)容。
1.Document Object Model
文檔對(duì)象模型
document 對(duì)象的成員提供了 HTML 文檔的信息。
images 是 document 對(duì)象成員,是一個(gè)數(shù)組。它代表了在這個(gè)頁(yè)面當(dāng)中所有的圖片,把圖片組合起來(lái)組成一個(gè)數(shù)組,可以訪問(wèn)。
alert(document.images); // [object HTMLCollection] 是一種集合(容器)
alert(document.images[0]); //[object HTMLImageElement] 第一個(gè)元素是 HTML 圖片元素
alert(document.images[0].src); ?// ?顯示路徑
不是所有元素都像 images 一樣通過(guò)一個(gè)數(shù)組直接訪問(wèn)到所有圖片,只有像 images ?/ form 這樣本身有提供數(shù)組的才可以用 document.images 直接訪問(wèn)。
<img name="mama" src="01.jpg"> 通過(guò) alert(document.mama); 可以訪問(wèn)?
對(duì)于段落 <p id="p1" name="dancing"> name 和 id 是所有 HTML 標(biāo)記都可以有的屬性,name 不能重復(fù),id 可重復(fù)。
alert(document.getElementsByName("dancing")); // [object NodeList]
alert(document.getElementById("p1")); // [object HTMLParagraphElement]
通過(guò)這些手段可以訪問(wèn)到 HTML 中所有元素。
我們?cè)谧?HTML 頁(yè)面時(shí),如果不是做靜態(tài)的東西,需要在頁(yè)面有所動(dòng)作,應(yīng)該事先給所有可能用到的東西加上 name 或 class / id (類)。
2.document 的成員
anchors[] ? ?forms[] ? ? images[] ? ? ? cookie ? ? ?title
bgColor ? ? ?fgColor ? ? linkColor ? ? ? alinkColor ? ? vlinkColor
在 JavaScript 里,不同瀏覽器具體實(shí)現(xiàn)不同,不是所有瀏覽器支持 bgColor 可寫(xiě)。
3.圖像
image 對(duì)象的 src 可以改寫(xiě)以裝入一副新的圖片。
可以創(chuàng)建 Image() 對(duì)象來(lái)提前裝載圖片。
onLoad 事件表明圖片裝載完成。
images[i]=new Image();?
Image() 是一個(gè)構(gòu)造器,你可以用它去制造一個(gè)對(duì)象出來(lái),用來(lái)表達(dá)一個(gè) image。
images[i].src=i+".jpg"; 把 6 個(gè)圖裝載進(jìn)來(lái)。
document.anm.src=images[index].src;
用數(shù)組里面已經(jīng)裝載的 6 個(gè)圖片的 src 替換現(xiàn)在顯示在頁(yè)面的圖片的 src 。
index=(index+1)%6; 每調(diào)用一次換一個(gè)圖片,實(shí)現(xiàn)圖片動(dòng)態(tài)變化
4.事件
onLoad / onUnload
onMouseOver / onMouseOut
onClick / onDblClick
onSubmit