JavaScript DOM簡介
什麼是Dom？
? ? ??文件物件模型（Document Object Model，簡稱DOM），是W3C組織推薦的處理可擴充標(biāo)誌語言的標(biāo)準(zhǔn)程式介面。 Document Object Model的歷史可以追溯至1990年代後期微軟與Netscape的“瀏覽器大戰(zhàn)”，雙方為了在JavaScript與JScript一決生死，於是大規(guī)模的賦予瀏覽器強大的功能。微軟在網(wǎng)頁技術(shù)上加入了不少專屬事物，計有VBScript、ActiveX、以及微軟自家的DHTML格式等，讓不少網(wǎng)頁使用非微軟平臺及瀏覽器無法正常顯示。 DOM即是當(dāng)時蘊釀出來的傑作。
????????DOM（文檔物件模型）是HTML和XML的應(yīng)用程式介面（API）。 DOM將把整個頁面規(guī)劃成由節(jié)點層級構(gòu)成的文檔。
??????? 所謂文件物件模型，其實就是對網(wǎng)頁HTML中的各種元素的一種內(nèi)部的表示，例如HTML中的頭、段落、列表、風(fēng)格、ID等，所有的元素都能通過DOM來訪問。
????????JavaScript最終是操作Html頁面，讓Html變成DHtml，操作Html頁面就要使用到DOM。 DOM就是把Html頁面模擬成一個對象，如果JavaScript只是執(zhí)行一些計算、循環(huán)等操作，而不能操作Html也就失去了它存在的意義。
????????DOM是Html頁面的模型，每個標(biāo)籤都做為一個對象，JavaScript透過呼叫DOM中的屬性、方法就可以對網(wǎng)頁中的文字方塊、圖層等元素進行程式控制。例如透過操作文字方塊的DOM對象，就可以讀取文字方塊中的值、設(shè)定文字方塊中的值。
JavaScript 能夠改變頁面中的所有HTML 元素
JavaScript 能夠改變頁面中的所有HTML 屬性
JavaScript 能夠改變頁面中的所有CSS 樣式
JavaScript 能夠?qū)撁嬷械乃惺录龀龇磻?yīng)
尋找HTML 元素
通常，透過JavaScript，您需要操作HTML 元素。
為了做到這件事情，您必須先找到該元素。有三種方法來做這件事：
透過id 找到HTML 元素
透過標(biāo)籤名稱找到HTML 元素
透過類別名稱找到HTML 元素
#在DOM 中尋找HTML 元素的最簡單的方法，就是透過使用元素的id。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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>透過標(biāo)籤名稱找出HTML 元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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中文網(wǎng)(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> 
