iT邦幫忙

DAY 9
3

上兩篇文章講到 JavaScript入門
http://ithelp.ithome.com.tw/question/10157766

完成後,我才發現:我早就寫過兩篇更完整的文章了(也PO在網站上)

沒關係,這系列的文章,我依循微軟官方教材的大綱來做

現在講到DOM

為了避免您閱讀上產生困擾,
先跟您報告微軟的教材是怎麼「描述」的?他的教學流程如何?

例如:他會先講CSS,後面又會有一章講CSS3,後面可能有一章會出現HTML5+CSS3的混合應用

這種流程「乍看之下」有點重複,但實際學習起來卻很順暢

您會發現:自己永遠都不是從零開始,

都是在「已經會的」基礎上,補充一點新的(像是堆積木一樣)
無形之中,您學到很多,而且很輕鬆的學起來了!

這套教學流程,真的好厲害!由此可知微軟認證課程與考試的編排,極具慧心!!!

關於DOM,我建議您可以到維基百科簡單看一下
在此我就不贅述了。http://en.wikipedia.org/wiki/Document\_Object\_Model

我寧可用幾個範例讓您懂,也不要講解花時間講太多「理論」
(因為太無趣,怕您睡著)

-----文章開始--------------------------------------

==== 在DOM中找到元素 ====

DOM用一組「陣列」來展示一份網頁文件的各種部分,例如:
 forms陣列,表示網頁中的多份表單。
 images陣列,表示網頁中的多張圖片。
 links陣列,表示網頁中的多個超連結。
 anchors陣列,表示網頁中的多個錨點(放在<a>裡面,在同一個網頁上下快速移動與定位)。
 applets陣列,表示網頁中的多份applets小程式。

上述的集合全是document物件的子屬性,您可以透過Index數值或是name屬性來操縱,舉例如下:

<form name="contactForm">
<input type="text" name="nameBox" id="nameBoxId" />
</form>

=== 如何抓取表單?====

document.forms[0] 
   // 電腦從零算起,所以第一個表單的Index編號為0。
document.forms["contactForm"]
   //  您也可以透過「name屬性」來控制它。

document.forms.contactForm
document.contactForm    // 簡寫、縮寫。

假設我們有一個form表單,請參閱上面寫好的<form>

您可以撰寫這樣的程式來抓取文字輸入方塊的「輸入值」。
var userNameBox = document.getElementById("nameBoxId");
var username = userNameBox**.value**; //取得使用者輸入的數值與文字

==== 在DOM中新增、移除與操作元素 ====

本節將會動態新增、移除與操作表單內的元素。

如下圖。畫面上已經有一個<ul>項目清單,而且<ul>的id名為VenueList,
其下有A與B兩個”子項目” <li>。

我們將撰寫JavaScript動態加入第三個名為C的子項目<li>。

[img=415,306]http://ithelp.ithome.com.tw/upload/images/20141004/20141004191634542fd712cc85c\_resize\_600.jpg[/img]

上圖的範例使用 .appendChild(newNode)方法來新增一個子元素,

而且從子項目的末段進行新增(append、附加)。還有相關的作法如下:
 .insertBefore(newNode, existingNode)方法,在現有的節點之中,新增一個節點在前面。
 .replaceChild(newNode, existingNode)方法,用新的節點取代舊節點。
 .replaceData(offset, length, string)方法,修改文字長度。

==== 在DOM處理事件 ====

當我們在網頁上按下按鈕,就會觸發(fire)一個事件(如click),
例如 滑鼠經過就會觸發mouseover事件。

當一個事件被觸發,我們可以為這個事件設定一個listener,瀏覽器就會執行它。

通常我們會用**「on」搭配事件名稱,**例如按下按鈕就是onclick、滑鼠經過就是onmouseover。

[img=415,342]http://ithelp.ithome.com.tw/upload/images/20141004/20141004191857542fd7a14cb10\_resize\_600.jpg[/img]

加入或移除事件的listener,比較正式的寫法如下:

addEventListener(eventName, listenerFunction, bubbles),加入事件的listener。
removeEventListener(event, listenerFunction, bubbles),移除事件的listener。

下一篇文章就要介紹 jQuery囉

不要走開,馬上回來......http://ithelp.ithome.com.tw/question/10158237

===============================================
本系列文章已經集結出書
HTML5、CSS、JavaScript 網頁程式設計與 MCSD 70-480 認證教材

MIS2000 Lab. 周棟祥/吳進魯

出版商:碁峰
出版日期:2015-04-09

語言:繁體中文
ISBN:9863475750
ISBN-13:9789863475750

PChome http://24h.pchome.com.tw/books/prod/DJAV0S-A90060ASI
博客來 http://www.books.com.tw/products/0010671214
天瓏書局 https://www.tenlong.com.tw/items/9863475750?item\_id=1003110


上一篇
MIS2000Lab.的「HTML5 認證考試,從零開始」#8-- JavaScript入門 (II)
下一篇
MIS2000Lab.的「HTML5 認證考試,從零開始」#10--寫得少,做得多。jQuery簡介(I)
系列文
MIS2000Lab.的「HTML5 認證考試,從零開始」--菜鳥的30天馬拉松30

尚未有邦友留言

立即登入留言