JavaScript HTML DOM
透過 HTML DOM，可存取 JavaScript HTML 文件的所有元素。
HTML DOM (文檔物件模型)
當網頁被載入時，瀏覽器會建立頁面的文檔物件模型（Document Object Model）。
透過可程式化的物件模型，JavaScript 獲得了足夠的能力來建立動態的 HTML。
JavaScript 能夠改變頁面中的所有HTML 元素
JavaScript 能夠改變頁面中的所有HTML 屬性
JavaScript 能夠改變頁面中的所有CSS 樣式
JavaScript 能夠對頁面中的所有事件做出反應
尋找HTML 元素
通常，透過JavaScript，您需要操作HTML 元素。
為了做到這件事情，您必須先找到該元素。有三種方法來做這件事：
透過id 找到HTML 元素
透過標籤名稱找到HTML 元素
透過類別名稱找到HTML 元素
#透過id 找出HTML 元素
在DOM 中找出HTML 元素的最簡單的方法，是透過使用元素的id。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="intro">你好世界!</p>
<p>该实例展示了 <b>getElementById</b> 方法!</p>
<script>
x=document.getElementById("intro");
document.write("<p>文本来自 id 为 intro 段落: " + x.innerHTML + "</p>");
</script>
</body>
</html>如果找到該元素，則該方法將以物件（在 x 中）的形式傳回該元素。
如果找不到該元素，則 x 將包含 null。
透過標籤名稱找出HTML 元素
本範例找出id="main" 的元素，然後找出id="main" 元素中的所有<p> 元素：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>你好世界!</p>
<div id="main">
<p> DOM 是非常有用的。</p>
<p>该实例展示了 <b>getElementsByTagName</b> 方法</p>
</div>
<script>
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write('id="main"元素中的第一个段落为：' + y[0].innerHTML);
</script>
</body>
</html> 透過類別名稱找到HTML 元素
本例透過 getElementsByClassName 函數來找出class="intro" 的元素：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p class="intro">你好世界!</p>
<p>该实例展示了 <b>getElementsByClassName</b> 方法!</p>
<script>
x=document.getElementsByClassName("intro");
document.write("<p>文本来自 class 为 intro 段落: " + x[0].innerHTML + "</p>");
</script>
<p><b>注意：</b>Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。</p>
</body>
</html>
#
下一節