MIS2000Lab.的「HTML5 認證考試，從零開始」#9-- DOM簡介

DAY 9

MIS2000Lab.的「HTML5 認證考試，從零開始」--菜鳥的30天馬拉松系列第 9 篇

html 網頁設計網頁 dom 鐵人賽 html5 事件 mis2000lab 動態加入 listener html

mis2000lab

2014-10-04 19:20:57

2777 瀏覽

分享至

上兩篇文章講到 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. 周棟祥/吳進魯