---
# System prepended metadata

title: dom教學

---

## 什麼是DOM?
DOM全名叫document object model 是一個將 HTML 文件以樹狀的結構來表示的模型，而組合起來的樹狀圖，我們稱之為「DOM Tree」
## 為什麼需要DOM?
當收到一份如下的html檔，瀏覽器會從上到下一行一行的讀取，DOM tree 就是把所有的節點拆開後，彼此的關係會像一棵樹，故取名之
```xml=
<html>
  <head>
    <title>example</title>
  </head>
  <body>
    <h1 class="txt">Hello World</h1>
  </body>
</html>
```
![](https://i.imgur.com/quZtbSB.jpg)
以 document 為起點，可以延伸出許多的 HTML 標籤，一個節點就是一個標籤，往下又可以再延伸出「本文(text)節點」與「屬性 (Attribute)的節點」。
瀏覽器就是這樣一步一步的把 HTML 解析(parse) 成一顆 DOM tree 

## 為什麼要學DOM?
DOM提供了一個文件（樹）的結構化表示法，並定義讓程式可以存取並改變文件架構、風格和內容的方法
JavaScript 就是透過 DOM 提供的 API 來對 HTML 做存取與操作。

## 基本的DOM操作 (DOM API)
### 怎麼存取element? (節點)
```xml=
//xxx 就是 css 的 selector
document.querySelector("xxx");

//特定元素
document.getElemantById("id");
```

## InnerHtml TextContent OuterHtml

---

* 範例如下:
    ```xml!0 
    <script>
        <div id="test"><p>Hello,world</p></div>
    </script>
    ```
* 說明: 
1. ```<p>Hello,world</p>```就是InnerHTML 
2.  ```Hello,world```就是textContent
3.  ```<div id="test"><p>Hello,world</p></div>```就是OuterHTML
* 我們最常用的是InnerHTML，一般都是對div,span進行操作，像是增加文字或數字

## 範例1
```xml
<html>
<body>

<p id="p1">Hello World!</p>

<script>
//document.querySelector(#p1).innerHTML = "New text!";
document.getElementById("p1").innerHTML = "New text!";
</script>

</body>
</html>
```

## Project 1
:::success
設計一個html裡的list，裡面分別資工、電機、通訊三個項目，取出這三個項目改成CS,EE,CO(你的html裡必須是電機、資工、通訊)
:::

原本:
* 電機
* 資工
* 通訊

---

後來:
* ee
* cs
* co

---

:::spoiler 解答
```htmlembedded!
<body>
    <ul>
        <li id="EE">電機</li>
        <li id="CS">資工</li>
        <li id="CO">通訊</li>
    </ul>
    </div>
    <script>
        var ee=document.getElementById('EE');
        var cs=document.getElementById('CS');
        var co=document.getElementById('CO');
        ee.innerHTML="ee";
        cs.innerHTML='cs';
        co.innerHTML='co';
    
    </script>
</body>
```
:::

---