JavaScript DOM簡介
什麼是Dom？
文件物件模型（Document Object Model，簡稱DOM），是W3C組織推薦的處理可擴充標誌語言的標準程式介面。 Document Object Model的歷史可以追溯至1990年代後期微軟與Netscape的“瀏覽器大戰”，雙方為了在JavaScript與JScript一決生死，於是大規模的賦予瀏覽器強大的功能。微軟在網頁技術上加入了不少專屬事物，計有VBScript、ActiveX、以及微軟自家的DHTML格式等，讓不少網頁使用非微軟平台及瀏覽器無法正常顯示。 DOM即是當時蘊釀出來的傑作。
DOM（文檔物件模型）是HTML和XML的應用程式介面（API）。 DOM將把整個頁面規劃成由節點層級構成的文檔。
所謂文件物件模型，其實就是對網頁HTML中的各種元素的一種內部的表示，例如HTML中的頭、段落、列表、風格、ID等，所有的元素都能通過DOM來訪問。
JavaScript最終是操作Html頁面，讓Html變成DHtml，操作Html頁面就要使用到DOM。 DOM就是把Html頁面模擬成一個對象，如果JavaScript只是執行一些計算、循環等操作，而不能操作Html也就失去了它存在的意義。
DOM是Html頁面的模型，每個標籤都做為一個對象，JavaScript透過呼叫DOM中的屬性、方法就可以對網頁中的文字方塊、圖層等元素進行程式控制。例如透過操作文字方塊的DOM對象，就可以讀取文字方塊中的值、設定文字方塊中的值。
JavaScript 能夠改變頁面中的所有HTML 元素
JavaScript 能夠改變頁面中的所有HTML 屬性
JavaScript 能夠改變頁面中的所有CSS 樣式
JavaScript 能夠對頁面中的所有事件做出反應
尋找HTML 元素
通常，透過JavaScript，您需要操作HTML 元素。
為了做到這件事情，您必須先找到該元素。有三種方法來做這件事：
透過id 找到HTML 元素
透過標籤名稱找到HTML 元素
透過類別名稱找到HTML 元素
#在DOM 中尋找HTML 元素的最簡單的方法，就是透過使用元素的id。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<head>
<body>
<div id="div1">
<p id="p1">
我是第一个P</p>
<p id="p2">
我是第二个P</p>
</div>
<script>
window.onload = function () {
var str = document.getElementById("p1").innerHTML;
alert(str); //弹出 我是第一个P
}
</script>
</body>
</html>透過標籤名稱找出HTML 元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<head>
<body>
<div id="div1">
<p id="p1">
我是第一个P</p>
<p id="p2">
我是第二个P</p>
</div>
<script>
window.onload = function () {
var str = document.getElementsByTagName("p")[1].innerHTML;
alert(str); //输出 我是第二个P，因为获取的是索引为1的P，索引从0开始
}
</script>
</body>
</html>#透過類別名稱找到HTML 元素
#<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<head>
<body>
<div id="div1">
<p id="p1" class="class1">
我是第一个P</p>
<p id="p2">
我是第二个P</p>
</div>
<script>
window.onload = function () {
var node = document.getElementsByClassName("class1")[0];
alert(node.innerHTML);
}
</script>
</body>
</html> 
