瀏覽器里的JavaScript—— document

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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 工廠模式類似于現(xiàn)實(shí)生活中的工廠可以產(chǎn)生大量相似的商品,去做同樣的事情,實(shí)現(xiàn)同樣的效果;這時(shí)候需要使用工廠模式。簡(jiǎn)單...
    舟漁行舟閱讀 8,131評(píng)論 2 17
  • 5 分享內(nèi)容到你的網(wǎng)站 上一章中,你在網(wǎng)站中構(gòu)建了用戶注冊(cè)和認(rèn)證。你學(xué)會(huì)了如何為用戶創(chuàng)建自定義的個(gè)人資料模型,并添...
    lakerszhy閱讀 1,728評(píng)論 5 16
  • 大學(xué)新生一個(gè)很明顯的特點(diǎn)就是迷茫。當(dāng)你沒(méi)有目標(biāo)沒(méi)有追求時(shí),日子就會(huì)變得貌似忙碌卻又著實(shí)空虛的樣子。按著課表循...
    丘山壑閱讀 222評(píng)論 0 1
  • 為期一個(gè)月的暑期培訓(xùn)結(jié)束了,在老師說(shuō)我們培訓(xùn)即將結(jié)束的時(shí)候還是有些不舍的,不過(guò)俗話說(shuō)得好“天下無(wú)不散之筵席”?,F(xiàn)在...
    笑祺祺閱讀 318評(píng)論 0 0
  • 陌生的城市遇到了熟悉的你,十個(gè)人,三輛出租車(chē),你我都不自覺(jué)地等到了最后一輛,然后不情愿地坐到了最后一排。 相識(shí)一笑...
    遠(yuǎn)方無(wú)風(fēng)閱讀 398評(píng)論 1 2

友情鏈接更多精彩內(nèi)容