DOM元素
我們可以通過HTML DOM ，JavaScript能夠訪問和改變HTML文檔的所有元素。
HTMLＤＯＭ（文檔對象模型）
網頁被加載時，瀏覽器會創建頁面的文檔對象模型
HTML DOM 模型被結構化爲對象樹：
對象的HTML DOM樹：
通過這個對象模型，JavaScript 獲得創建動態 HTML 的所有力量：
- JavaScript 能改變頁面中的所有 HTML 元素
- JavaScript 能改變頁面中的所有 HTML 屬性
- JavaScript 能改變頁面中的所有 CSS 樣式
- JavaScript 能刪除已有的 HTML 元素和屬性
- JavaScript 能添加新的 HTML 元素和屬性
- JavaScript 能對頁面中所有已有的 HTML 事件作出反應
- JavaScript 能在頁面中創建新的 HTML 事件
什麼是 DOM？
DOM 是一項 W3C (World Wide Web Consortium) 標準。
DOM 定義了訪問文檔的標準：
“W3C 文檔對象模型（DOM）是中立於平臺和語言的接口，它允許程序和腳本動態地訪問、更新文檔的內容、結構和樣式。”
W3C DOM 標準被分爲 3 個不同的部分：
- Core DOM - 所有文檔類型的標準模型
- XML DOM - XML 文檔的標準模型
- HTML DOM - HTML 文檔的標準模型
HTML DOM是關於如何獲取、更改、添加或者刪除HTML元素的標準。
<body>
<h2>dom</h2>
<p id="demo"></p>
<!-- 注意：將js放在web頁面你要編輯的元素的後面，我是放在body的最後，問題解決。 -->
<script>
document.getElementById("demo").innerHTML = 'hello world';
</script>
</body>
getElementById方法：
訪問HTML元素最常用的方法是使用元素的id
在上面的例子中，getElementById方法使用id="demo"來查找元素
innerHTML屬性
獲取元素內容最簡單的方法是使用有innerHTML屬性：
innerHTML屬性可用於獲取或者替換HTML元素的內容
InnerHTML屬性可用於獲取或改變任何HMTL元素，包括<html>和<body>
Document對象：
文檔對象代表您的網頁。
如果您希望訪問HTML頁面中的任何元素，那麼您問題從訪問document對象開始。
查找元素
| 方法 | 描述 |
|---|---|
| document.getElementById(id) | 通過元素id來查找 |
| document.getElementsByTagName(name | 通過標籤名來查找元素 |
| document.getElementsByClassName(name) | 通過類名來查找元素 |
改變HTML元素
| 方法 | 描述 |
|---|---|
| element.innerHTML = new html contenet | 改變元素的inner HTML |
| element.attribute = new value | 改變HTML元素的屬性值 |
| element.setAttribute(attribute.value) | 改變HTML元素的屬性值 |
| element.style.property = new style | 改變ＨＴＭＬ元素的樣式 |
添加和刪除元素
| 方法 | 描述 |
|---|---|
| document.createElement(element) | 創建HTML元素 |
| document.removeChild(element) | 刪除HTML元素 |
| document.appendChild(element) | 添加HTML元素 |
| document.replaceChild(element) | 替換HTML元素 |
| document.write(text) | 寫入HTML輸出流 |
添加事件處理程序
| 方法 | 描述 |
|---|---|
| document.getElementById(id).onclick = function(){code} | 向onclick事件添加事件處理程序 |
查找HTML對象
首個 HTML DOM Level 1 (1998)，定義了 11 個 HTML 對象、對象集合和屬性。它們在 HTML5 中仍然有效。
後來，在 HTML DOM Level 3，加入了更多對象、集合和屬性。
使用DOM查找HTML元素：
- 通過id查找HTML元素
- 通過標籤名查找HTML元素
- 通過類名查找HTML元素
- 通過CSS選擇器查找HTML元素
- 通過HTML對象集合查找HTML元素
通過id查找HTML元素
DOM中查找HTML元素最簡單的方法是，使用元素的id。
例如：
<h2>dom</h2>
<p id="intro">Hello World!</p>
<p>本例演示：<b>getElementById</b>方法。</p>
<p id="demo"></p>
<!-- 注意：將js放在web頁面你要編輯的元素的後面，我是放在body的最後，問題解決。 -->
<script>
document.getElementById("demo").innerHTML = 'hello world';
var myElement = document.getElementById("intro");
document.getElementById('demo').innerHTML =
"來自 intro段落的文本是："+myElement.innerHTML;
</script>
通過標籤名查找HTML元素
本例中查找的是p元素
<body>
<h1>通過標籤名查找HTML元素</h1>
<!-- <p id="intro">Hello World!</p> -->
<p>Hello World!</p>
<p>本例演示：<b>getElementsByTagName</b>方法。</p>
<p id="demo"></p>
<!-- 注意：將js放在web頁面你要編輯的元素的後面，我是放在body的最後，問題解決。 -->
<script>
// document.getElementById("demo").innerHTML = 'hello world';
// var myElement = document.getElementById("intro");
// document.getElementById('demo').innerHTML =
// "來自 intro段落的文本是："+myElement.innerHTML;
var x = document.getElementsByTagName("p");
//innerHTML屬性可用於獲取或者替換HTML元素的內容
document.getElementById("demo").innerHTML =
'第一段中的文本(index 0)是：'+x[0].innerHTML;
</script>
</body>
通過標籤名查找HTML元素
<body>
<h1>通過標籤名查找HTML元素</h1>
<div id="main">
<p>DOM 很有用</p>
<p>本例演示<b>getElementsByTagName</b>方法。</p>
</div>
<p id="demo"></p>
<!-- <p id="intro">Hello World!</p> -->
<!-- <p>Hello World!</p>
<p>本例演示：<b>getElementsByTagName</b>方法。</p>
<p id="demo"></p> -->
<!-- 注意：將js放在web頁面你要編輯的元素的後面，我是放在body的最後，問題解決。 -->
<script>
var x = document.getElementById("main");
var y = x.getElementsByTagName("p");
document.getElementById("demo").innerHTML =
'"main"中的第一段(索引0)是：'+y[0].innerHTML;
</script>
</body>
通過類名查找HTML元素
如果您需要找到擁有相同類名的所有HTML元素，請使用getElementsByClassName()。
本例返回包含class="intro"的所有元素的列表：
<h1>通過類名查找HTML元素</h1>
<p>Hello World!</p>
<p class="intro"> DOM很有用</p>
<p class="intro">本例演示：<b>getElementsByClassName</b>方法。</p>
<p id="demo"></p>
<script>
var x = document.getElementsByClassName("intro");
document.getElementById("demo").innerHTML =
'class = "intro"第一段（索引0）：'+x[0].innerHTML;
</script>
通過類名查找元素不適用於 Internet Explorer 8 及其更早版本。
通過CSS選擇器查找HTML元素
如果您需要查找匹配指定CSS選擇器(id,類名、屬性、屬性值等等)的所有HTML元素，請使用querySelectorAll()方法。
<h1>按查詢選擇器查找 HTML 元素</h1>
<p>Hello World!</p>
<p class="intro"> DOM很有用</p>
<p class="intro">本例演示：<b>getElementsByClassName</b>方法。</p>
<p id="demo"></p>
<script>
var x = document.querySelectorAll("p.intro");
document.getElementById("demo").innerHTML =
'class = "intro" 的第一段（索引0）：'+x[0].innerHTML;
</script>
querySelectorAll() 不適用於 Internet Explorer 8 及其更早版本。
通過HTML對象選擇器查找HTML對象
本例中查找id="frm1"的form元素，在forms集合中，然後顯示所有元素值：
例如：
<body>
<h1>使用document.forms 查找HTML元素</h1>
<form id="frm1" action="/demo/action_page.php">
First name:<input type="text" name="fname" value="hkk">
<br/>
Last name :<input type="text" name="lname" value="Gates">
<br><br>
<input type="submit" value="提交">
</form>
<p>單擊“試一試”按鈕，顯示錶單中每個元素的值。</p>
<button onclick="myFunction()">試一試</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.forms["frm1"];
var text = "";
var i;
for (i = 0; i < x.length; i++) {
text += x.elements[i].value+"<br>";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
