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通過調(diào)用DOM中的屬性、方法就可以對網(wǎng)頁中的文本框、層等元素進(jìn)行編程控制。比如通過操作文本框的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> 
