iT邦幫忙

DAY 24
4

只是路過 HTML5 系列 第 24

HTML DOM

在網頁中,HTML 存放網頁的內容與架構,CSS 標記內容的呈現樣式;
而 JavaScript 則用來產生豐富的互動效果或應用程式。

之前筆記分享過,為什麼要使用HTML5,

HTML5更加語義化,使用HTML5 我們不必在網頁上佈滿沒有意義的div。
HTML5改為有意義的tag,
比如 navigations 和 footers 使語法更有意義,
加入語意的資料能讓搜尋引擎等網站準確顯示。

HTML5+CSS3+JavaScript API

HTML5要結合JavaScript API一起使用,可以更增加網頁的互動性。

那麼...JavaScript是什麼?

在網頁瀏覽器中通稱的「JavaScript」是由眾多截然不同的要素所構成。
其中之一是核心語言(ECMAScript),
另一個則是 DOM(文件物件模型,Document Object Model)。

* 什麼是DOM (document object model)物件檔案模型?

DOM是一種介面的定義。
DOM的內容其實可以分為三個部份:DOM core、HTML DOM與XML DOM。
其中DOM Core是最基本的底層架構(核心),主要是將Document架構為一個樹(Tree)的概念,
Tree的組成成份就是節點(Node),每個DOM必須要有一個document的根節。每個元素在DOM裡面就是一個節點。

當一個.html檔被以瀏覽器開啟的時候,瀏覽器就會去解析該檔案的DOM。
由於瀏覽器可以處理html跟XML的DOM,所以也有人稱DOM檔案樹為html檔案樹或者XML檔案樹。

事實上就是指 document 中元素,
對應到的 JavaScript 物件,我們就統稱為 dom。

var img = document.getElementById("img2");

這個 img 就是範例中 img 標籤對應到 JS 世界的 dom 元素。

不管是什麼DOM,都有對應的物件架構,
每個物件有其屬性、方法(Method)與界面(Interface),
讓外界可以讀寫其內容;對外界程式設計人員而言,這些方法界面,統稱API (Application Programming Interface)

範例參考:
網站系統規劃 - 基本網頁元素介紹, JS BY TonyQ大大
http://ithelp.ithome.com.tw/question/10099322?tab=opinion

相關資料來源:
JavaScript 技術概觀
https://developer.mozilla.org/zh-TW/docs/JavaScript\_technologies\_overview
複雜的DOM檔案樹(圖片來源)
http://yiyingloveart.blogspot.tw/2012\_04\_01\_archive.html
DOM and HTML DOM
http://www.wretch.cc/blog/yannfarn/13045018


上一篇
JavaScript的語法架構
下一篇
●CSS說明
系列文
只是路過 HTML5 30

1 則留言

我要留言

立即登入留言