## 什麼是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> ``` ::: ---