Vue百日學習計劃Day16-18天詳細計劃-Gemini版

重要提示：

番茄時鐘： 每個番茄鐘為25分鐘學習，之后休息5分鐘。每完成4個番茄鐘，進行一次15-30分鐘的長休息。
動手實踐： DOM 操作和事件處理的理解高度依賴于實際編碼。請務必在瀏覽器中創建 HTML 頁面，并配合 JavaScript 代碼進行實驗。
開發者工具： 熟練使用瀏覽器的開發者工具 (特別是 Elements 和 Console 面板) 對學習 DOM 操作至關重要。
資源利用：
- MDN Web Docs (Web API - Document Object Model): https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model
- MDN Web Docs (事件): https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Building_blocks/Events
當前日期： 2025年5月16日 (用于知曉信息時效性，DOM 和事件核心概念相對穩定)

學習目標 Day 16-18：DOM 操作與事件

Day 16：DOM 基礎與節點查找、屬性操作
- 理解什么是 DOM (文檔對象模型) 及其樹形結構。
- 掌握常用的 DOM 節點查找方法。
- 學習如何讀取和修改元素的屬性和內容。
Day 17：DOM 節點操作與事件監聽基礎
- 掌握創建、添加、插入和刪除 DOM 節點的方法。
- 理解事件和事件監聽器的概念。
- 學習使用 addEventListener 來處理用戶交互。
Day 18：事件流 (冒泡與捕獲) 與事件委托
- 深入理解事件冒泡和事件捕獲階段。
- 掌握事件委托的概念、優勢及其實現方式。
- 能夠應用事件委托優化性能和簡化代碼。

每日學習計劃 (3小時/天)

Day 16: DOM 基礎與節點查找、屬性操作

第1個番茄鐘 (25分鐘學習 + 5分鐘休息):
- 主題： DOM 簡介與樹形結構。
- 內容： 閱讀 MDN 關于 DOM 的介紹。理解 DOM 是 HTML/XML 文檔的編程接口，它將文檔解析為一個由節點和對象組成的結構 (通常稱為 DOM 樹)。認識常見的節點類型 (Document, Element, Text, Attribute)。
- 實踐： 隨便打開一個網頁，使用瀏覽器開發者工具的 “Elements” 面板查看其 DOM 樹結構，嘗試對應 HTML 標簽和 DOM 節點。
第2個番茄鐘 (25分鐘學習 + 5分鐘休息):
- 主題： 查找 DOM 節點 (一): document.getElementById(), document.getElementsByTagName().
- 內容： 學習通過元素 ID 獲取單個元素節點。學習通過標簽名獲取 HTMLCollection (動態集合)。
- 實踐： 創建一個簡單的 HTML 頁面，包含不同 ID 和標簽的元素。使用 JavaScript 獲取這些元素并在控制臺打印出來。觀察 getElementsByTagName 返回的結果。
第3個番茄鐘 (25分鐘學習 + 5分鐘休息):
- 主題： 查找 DOM 節點 (二): document.getElementsByClassName(), document.querySelector().
- 內容： 學習通過類名獲取 HTMLCollection。學習 querySelector 使用 CSS 選擇器語法獲取匹配的第一個元素節點。
- 實踐： 在 HTML 頁面中添加帶 class 的元素，練習使用 getElementsByClassName 和 querySelector (嘗試不同的 CSS 選擇器，如類選擇器、后代選擇器)。
第4個番茄鐘 (25分鐘學習 + 5分鐘休息):
- 主題： 查找 DOM 節點 (三): document.querySelectorAll().
- 內容： 學習 querySelectorAll 使用 CSS 選擇器語法獲取所有匹配的元素節點，返回一個靜態的 NodeList。
- 實踐： 使用 querySelectorAll 獲取多個元素，并嘗試遍歷 NodeList。對比其與 HTMLCollection 的區別 (例如，動態性)。
- (長休息: 15-30分鐘)
第5個番茄鐘 (25分鐘學習 + 5分鐘休息):
- 主題： 讀取和修改元素屬性 (Attribute vs Property)。
- 內容： 學習使用 getAttribute(), setAttribute(), removeAttribute()。理解 HTML 屬性 (attributes) 和 DOM 對象屬性 (properties) 之間的區別與聯系 (例如 id, class vs className, value)。
- 實踐： 獲取并修改 HTML 元素的標準屬性 (如 id, class, src, href) 和自定義屬性 (data-*)。
第6個番茄鐘 (25分鐘學習 + 5分鐘休息):
- 主題： 讀取和修改元素內容與樣式。
- 內容： 學習 innerHTML, textContent, innerText 的區別和用法。學習通過 element.style 對象修改內聯樣式，以及通過 element.classList (add, remove, toggle, contains) 操作類名來改變樣式。
- 實踐： 獲取一個元素的 HTML 內容和純文本內容并進行修改。嘗試動態改變一個元素的背景顏色、字體大小，以及通過添加/刪除 CSS 類來改變其外觀。

Day 17: DOM 節點操作與事件監聽基礎

第1個番茄鐘 (25分鐘學習 + 5分鐘休息):
- 主題： 創建 DOM 節點: document.createElement(), document.createTextNode().
- 內容： 學習如何使用 JavaScript 動態創建新的元素節點和文本節點。
- 實踐： 創建一個新的 <p> 元素和一個文本節點，并嘗試將文本節點的內容設置好。
第2個番茄鐘 (25分鐘學習 + 5分鐘休息):
- 主題： 添加 DOM 節點: appendChild(), insertBefore().
- 內容： 學習如何將創建的節點添加到 DOM 樹中。appendChild 將節點添加到指定父元素的子節點列表末尾。insertBefore 將節點插入到指定父元素的某個已有子節點之前。
- 實踐： 將上一個番茄鐘創建的 <p> 元素和文本節點組合并添加到 HTML 頁面的某個現有元素 (如 <body> 或某個 <div>) 內部。
第3個番茄鐘 (25分鐘學習 + 5分鐘休息):
- 主題： 刪除和替換 DOM 節點: removeChild(), replaceChild().
- 內容： 學習如何從 DOM 中移除一個子節點。學習如何用一個新的節點替換一個已有的子節點。
- 實踐： 選中頁面上的某個元素，然后將其從 DOM 中刪除。創建一個新元素，并用它替換頁面上的另一個現有元素。
第4個番茄鐘 (25分鐘學習 + 5分鐘休息):
- 主題： 事件簡介與事件監聽器。
- 內容： 理解什么是事件 (如點擊、鼠標懸停、鍵盤按下等)。了解事件監聽器 (event listener) 或事件處理器 (event handler) 的概念。
- 實踐： 閱讀 MDN 關于事件的介紹，思考網頁中常見的用戶交互行為。
- (長休息: 15-30分鐘)
第5個番茄鐘 (25分鐘學習 + 5分鐘休息):
- 主題： 使用 addEventListener() 添加事件監聽。
- 內容： 學習 element.addEventListener(type, listener, useCapture) 的語法。第一個參數是事件類型 (如 'click', 'mouseover')，第二個參數是事件觸發時執行的回調函數，第三個參數通常默認為 false (事件冒泡階段處理)。
- 實踐： 為頁面上的一個按鈕添加一個點擊事件監聽器，當按鈕被點擊時，在控制臺輸出一條消息或改變頁面上某個元素的文本。
第6個番茄鐘 (25分鐘學習 + 5分鐘休息):
- 主題： 事件對象 (Event Object)。
- 內容： 理解當事件發生時，會創建一個事件對象并作為參數傳遞給事件處理函數。了解事件對象常用的屬性 (如 event.target, event.currentTarget, event.type, event.preventDefault(), event.stopPropagation()).
- 實踐： 在事件處理函數中打印事件對象，查看其包含的信息。嘗試使用 event.target 來確定具體是哪個元素觸發了事件。為一個鏈接添加點擊事件，并使用 event.preventDefault() 來阻止其默認的跳轉行為。

Day 18: 事件流 (冒泡與捕獲) 與事件委托

第1個番茄鐘 (25分鐘學習 + 5分鐘休息):
- 主題： 事件流 (Event Flow) - 事件冒泡 (Bubbling)。
- 內容： 理解事件冒泡的概念：當一個元素上的事件被觸發時，同樣的事件會依次在它的所有祖先元素上被觸發，從內到外。
- 實踐： 創建嵌套的 <div> 元素，為內部和外部的 <div> 都添加相同的點擊事件監聽器。點擊內部 <div>，觀察事件處理函數的執行順序。
第2個番茄鐘 (25分鐘學習 + 5分鐘休息):
- 主題： 事件流 (Event Flow) - 事件捕獲 (Capturing)。
- 內容： 理解事件捕獲的概念：與冒泡相反，事件從 window 開始，逐級向下傳播到目標元素。可以通過將 addEventListener 的第三個參數設置為 true 來在捕獲階段處理事件。
- 實踐： 修改上一個練習，將外部 <div> 的事件監聽器設置為在捕獲階段觸發，觀察執行順序的變化。
第3個番茄鐘 (25分鐘學習 + 5分鐘休息):
- 主題： 停止事件傳播: event.stopPropagation().
- 內容： 學習如何使用 event.stopPropagation() 來阻止事件繼續在 DOM 樹中冒泡或捕獲。
- 實踐： 在內部 <div> 的事件處理函數中調用 event.stopPropagation()，觀察外部 <div> 的事件處理函數是否還會執行。
第4個番茄鐘 (25分鐘學習 + 5分鐘休息):
- 主題： 事件委托 (Event Delegation) - 概念與優勢。
- 內容： 理解事件委托是將事件監聽器添加到父元素上，利用事件冒泡來管理子元素上的事件。了解其優勢：減少內存消耗、簡化動態添加元素的事件處理。
- 實踐： 閱讀相關資料，思考哪些場景適合使用事件委托 (例如：一個有很多列表項的 <ul>)。
- (長休息: 15-30分鐘)
第5個番茄鐘 (25分鐘學習 + 5分鐘休息):
- 主題： 事件委托 (Event Delegation) - 實現。
- 內容： 學習如何在父元素的事件處理函數中，通過檢查 event.target 來判斷事件的實際來源，并執行相應的操作。
- 實踐： 創建一個 <ul> 列表，只給 <ul> 元素添加一個點擊事件監聽器。當點擊某個 <li> 時，在控制臺輸出該 <li> 的內容。嘗試動態添加新的 <li> 到列表中，驗證事件委托依然有效。
第6個番茄鐘 (25分鐘學習 + 5分鐘休息):
- 主題： DOM 操作與事件綜合練習。
- 內容： 結合 Day 16-18 所學，嘗試完成一個小的交互功能。例如：
  - 一個簡單的待辦事項列表：可以輸入內容，點擊按鈕添加事項到列表中，點擊已添加的事項可以將其標記為完成或刪除。
- 實踐： 動手實現上述小功能，重點運用節點創建、添加、刪除以及事件監聽和事件委托。