iT邦幫忙

DAY 2
2

Javascript 邊學邊做 - 三十個網頁小工具系列 第 2

Javascript-30天邊學邊做(2)Javascript & HTML DOM 操控簡介

  • 分享至 

  • xImage
  •  

Javascript & HTML DOM 簡介
Day2 – Javascript & HTML DOM 操控簡介

Javascript 可以透過設計好的方法自由地去操控 HTML DOM,這可是JS的精華之一阿!!XD
藉由改變HTML標籤的樣式,就能做出各種常見的網頁動畫效果。

何謂HTML DOM (Document Object Model):
『文件物件模型(Document Object Model,DOM)是給 HTML 與 XML 文件使用的一組 API。它提供了文件的結構表述(representation),讓你可以更動其中的內容及可見物。其本質是建立網頁與 Script 或程式語言溝通的橋樑。 』
資料來源:
http://moztw.org/docs/gecko/aboutdom/
Wiki的解釋:
http://en.wikipedia.org/wiki/Document_Object_Model

在Javascript裡經常使用id, name, class等來取得HTML DOM物件:

  • 使用id來取得物件 – document.getElementById()
  • 使用name取得物件 – document.getElementsByName()
  • 使用class 取得物件 – document.getElementsByClassName()
  • 使用tag name 取得物件 – document.getElementsByTagName()
    P.S.1 注意Element和Elements!!
    P.S.2 使用 ClassName 和 TagName 時取得的是一個集合!!

在取得HTML DOM物件之後,便能使用該物件的方法去改變 HTML的屬性與內容:

// 改變HTML
document.getElementById(“test”).innerHTML = “XXX”

// 取得值
document.getElementsById(“input_text”).value

// 改變CSS屬性
element.style.(Javascript 定義的 CSS 屬性)
// example
element.style.backgroundColor = “red”;
element.style.width = “100px”;

P.S. 在Javascript裡用的CSS屬性和CSS定義的屬性名稱略有不同,如CSS裡的background-color,在JS裡是element.style.backgroundColor,不確定相對應的屬性時就google一下吧。

今日練習 - 簡易CSS操控:
https://mega.co.nz/#!oEhjmJRI!bIumfFbX0ZQYmoTNdLlxazIm-UokGW5Mfeor1CEczWo


上一篇
Javascript-30天邊學邊做(1)
下一篇
Javascript-30天邊學邊做(3) Javascript基礎 function的使用
系列文
Javascript 邊學邊做 - 三十個網頁小工具7
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言