課程目標
認識 DOM 樹基本觀念
能夠在 DOM 樹進行「新增」
學會基本的除錯技巧
課程內容
請打開這個網站，用這個網站來練習＆寫作業：
在學 JavaScript 的時候，你會聽到很多人在講「DOM 樹」這個名詞
什麼是「DOM 樹」？
其實只是，你在網頁上看到的東西，瀏覽器會在背後的 JavaScript 環境，維持一個對應的「DOM 樹」
比如說，當你寫這樣的 html（這邊先省略內容，只留結構）
<html>
<head>
<script></script>
</head>
<body>
<div>
<h1></h1>
<p></p>
</div>
</body>
</html瀏覽器會在背後創造一個這樣的資料結構
document
└── html
├── head
│ └── script
└── body
└── div
├── h1
└── p很像是樹吧？這就是「DOM 樹」
記得之前用過的 document.getElementById 嗎？ 這就是 DOM 最上面的 document 物件
所謂的「DOM 樹」其實就是一個「巢狀物件」。
「巢狀物件」的意思是，物件的屬性，又是另一個物件，然後這物件的屬性，又可以是另一個物件
用 JavaScript 來表示的話，類似這樣（只是概念喔，真實的物件不只是這樣，而是有一堆內建函式與屬性可以用）
var document = {
name: 'document',
children: [
{
name: 'html',
children: [
{
name: 'head',
children: [
{
name: 'script',
children: []
}
]
},
{
name: 'body',
children: [
{
name: 'div',
children: [
{
name: 'h1',
children: []
},
{
name: 'p',
children: []
}
]
}
]
}
]
}
]
}在 DOM 中，被包起來的元素，稱為子元素；把別人包起來的元素，稱為父元素。就跟學 html 時的稱呼一樣
瀏覽器會確保用戶介面（User Interface，簡稱 UI）上看到的，跟環境中實際運行的 DOM 長得一模一樣
也就是說，你修改 UI 的內容，DOM 物件就會自動更新；你用 JavaScript 修改 DOM 物件的內容，UI 就會自動更新
來學學怎麼用 JavaScript 操作 DOM 樹吧！
如果原本 html 長這樣
<div id="app"></div>只要加入這段程式碼
var heading = document.createElement('h1');
heading.textContent = '這是標題';
var para = document.createElement('p');
para.textContent = '這是段落文字';
var app = document.getElementById('app');
app.append(heading);
app.append(para);利用 document 的內建函數 createElement 來動態創造新的元素
修改元素的屬性 .textContent 來設定文字內容
接著用 .append() 函數來讓元素吃下別的元素，也就是「把另一個元素收為子元素」，就跟收養子女一樣！
最後 html 就會變成這樣
<div id="app">
<h1>這是標題</h1>
<p>這是段落文字</p>
</div>馬上貼到 jsfiddle 試試看，實驗一下、玩玩看！
在寫 html 的時候，出現巢狀結構是很常見的
操作 DOM 時，當然也可以自由創造巢狀結構
var elem1 = document.createElement('div');
elem1.textContent = 'level 1';
var elem2 = document.createElement('div');
elem2.textContent = 'level 2';
var elem3 = document.createElement('div');
elem3.textContent = 'level 3';
var app = document.getElementById('app');
app.append(elem1);
elem1.append(elem2);
elem2.append(elem3);到 jsfiddle 試試看，就會清楚實際效果囉！
在開發的過程中，基本上會不斷打錯字、寫錯用法。程式跑不出結果，很正常
這種時候，有兩個常用的除錯方法，我們叫「debug 的方法」
第一個方法是 alert，你就把不確定的內容，給 alert 出來看看就對了，到處寫 alert 看一下變數內容，確定內容跟預期一樣，再接著繼續寫
第二個方法是 console.log()，把參數傳進去，接著打開瀏覽器的「開發者工具」，就會看到結果，通常會比 alert 內容更詳細、更方便除錯
除此之外，JavaScript 相關的各種錯誤訊息，都會在「開發者工具」出現。請去研究你所使用的瀏覽器，如何打開這個工具
var x = 123;
var y = 'hello';
var z = document.createElement('div');
console.log(x)
console.log(y)
console.log(z)請打開瀏覽器的開發者工具，實際看一下上述範例的結果。
課後作業
假設你是一個健忘的人，你決定寫一個「待辦事項管理」應用程式，來幫助自己
這一課，先實作「新增事項」的功能
在上面，做一個文字輸入框，旁邊有一個「新增」按鈕
在下面，做一個展示待辦事項的清單，請使用這樣的結構，id 跟 css 之類的你可以自由決定
<ul>
<li>
<span>倒垃圾</span>
</li>
<li>
<span>繳電話費</span>
</li>
<li>
<span>採買本週食材</span>
</li>
</ul>點擊「新增」按鈕，會將新事項插入到清單最底部
請稍微替這個清單工具加一點 css 屬性，弄得漂亮一點，這樣的工具才讓人想用
除此之外，請練習一下 console.log 的用法，不然之後遇到錯誤，幾乎沒辦法除錯
請把作業內容中，出現的變數，隨便挑三個，用 console.log 印到開發者工具中，然後用瀏覽器看一下內容
做出以上功能，你就完成這次的課程目標了！
歡迎將作業成果，在下方留言，跟大家分享，讓大家給你一些回饋！
可以將每課學到的觀念、關鍵字，丟到網路上去搜尋、研究一下！
發問請在「討論專區」為主，或者分享學習筆記、寫學習心得！
貼文都會出現在個人檔案頁面，成為學習歷程、部落格紀錄！
未來面試時，分享給面試官看，會讓人知道你的積極程度！
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
交作業魯，在節點操作上總是很糊塗~希望課程上完後能改進
https://jsfiddle.net/ossianwork/Lb9fs4hr/204/
交作業，再麻煩站長了，謝謝!
https://js-dolist.glitch.me
2024.02.07 https://jsfiddle.net/v9ja2nuq/
<br />
不是忘記連結外部JS，就是設定CSS的時候習慣用class符號，結果沒選到東西，因為一樣的名稱是id🫠
作業繳交
https://jsfiddle.net/y97oenpv/13/