LESSON-16 · 自主延伸
把「安全 DOM 查找與可重複渲染」拆成 4 個可獨立完成、可重設、可驗證的自主學習 module。
成果：完成具 null guard、data/class 狀態且重跑不重複的安全清單 renderer。
需要的檔案：files/starter/index.html（整合起點，保留跨 module 的最小缺口。）
完成後：完成具 null guard、data/class 狀態且重跑不重複的安全清單 renderer。
逐項展開；答不出來時先走補救連結，不必硬做。
自我檢查：我能否開啟 Elements、Console 或 Network 並找到本頁？
每一個目標只對應一個 module；成功狀態必須能指出證據。
依序展開；每次只改一項，操作後確認該模組自己的 DOM、progress 與 evidence。
白話：找多個先看有幾個；找一個可能找不到，先確認不是 null。
正式說法：querySelectorAll 回傳靜態 NodeList；querySelector 無匹配時回傳 null，存取前需控制流程縮小型別。
何時使用：批次卡片、導覽連結與不是每頁都有的可選元件。
修改前後：Before：missing.textContent 直接 TypeError。After：null guard 讓其他 render 繼續。
常見混淆：空 NodeList 不是 null，仍可 forEach；querySelector 才可能直接回 null。
情境：共用 main.js 在沒有 status 的頁面整段白畫面。
起始狀態：程式直接對 missing selector 讀 textContent。
目前主題：querySelectorAll() 與 null guard
預期：itemCount=3、missing=true、guarded=true、uncaught=0。
證據：itemCount=3、missing=true、guarded=true
第一個檢查：先輸出 selector 結果與 NodeList.length。
重設：清空輸出並保留三張卡、缺少 status。
本模組官方來源：MDN｜Document.querySelectorAll()
白話：data-* 放元素資料；classList 只加減一個狀態 class，不重寫全部 class。
正式說法：dataset 映射 data-* attributes；classList 提供 DOMTokenList 的 add/remove/toggle/contains。
何時使用：卡片選取、展開狀態與 DOM 上的資料 id。
修改前後：Before：element.className='selected' 遺失 card。After：card 與 is-selected 同時存在。
常見混淆：dataset 值都是字串，不是自動轉成 number/Boolean。
情境：點選卡片後原本布局 class 被 className 覆蓋。
起始狀態：card class 存在，is-selected 不存在。
目前主題：classList 與 dataset
預期：dataId=s2、before=false、after=true、其他 class 保留。
證據：dataId=s2、selected=true、baseClass=true
第一個檢查：先讀 classList.value 與 dataset.id。
重設：移除 is-selected，保留 data-id 與 card。
本模組官方來源：MDN｜Element.classList
白話：先在看不見的暫存盒裝好三項，再一次放進畫面。
正式說法：DocumentFragment 是無 parent 的輕量 Document 節點；append 時其 children 會移入目標，fragment 隨後變空。
何時使用：從陣列建立多個 DOM 節點並批次提交到容器。
修改前後：Before：每建一項就 append container。After：先填 fragment，再單次 append。
常見混淆：fragment 不是複製節點；append 會移動其 children。
情境：render 迴圈同時負責建立與插入，難以檢查中間結果。
起始狀態：空 list 與三筆文字資料。
目前主題：DocumentFragment
預期：fragmentBefore=3、domAfter=3、fragmentAfter=0、appendCalls=1。
證據：fragmentBefore=3、domAfter=3、fragmentAfter=0
第一個檢查：先在 append 前記錄 fragment.childElementCount。
重設：replaceChildren 清空 list。
本模組官方來源：MDN｜DocumentFragment
白話：每次重畫先把舊結果替換掉，不是一直往後加。
正式說法：本練習的 idempotent render 對相同 input 重複執行後產生等價 DOM state。
何時使用：篩選、排序、重新抓資料或任何可能重跑的列表 renderer。
修改前後：Before：第二次 render 變六張卡。After：兩次都維持三張。
常見混淆：idempotent 不表示函式沒有 DOM 副作用；它表示重複套用後最終狀態不再改變。
情境：使用者每按一次篩選，服務卡數量就翻倍。
起始狀態：空容器與固定三筆資料。
目前主題：可重複執行且不重複節點的 render
預期：firstCount=3、secondCount=3、duplicateIds=0。
證據：firstCount=3、secondCount=3、duplicateIds=0
第一個檢查：先找 render 是否只 append 而未清理/取代。
重設：清空容器與 render counter。
本模組官方來源：MDN｜Element.replaceChildren()
情境：在同一份章節作品中整合 4 個 module，排除單項通過但組合失敗的問題。
交付：完成具 null guard、data/class 狀態且重跑不重複的安全清單 renderer。
檔案：files/starter/index.html 定位：#observe
操作：逐項讀取 outcomes，執行一次現況操作。
// OBSERVE：不修改程式，先記錄第一個失敗 moduleId。預期：能指出第一個未通過 module。
證據：第一個 moduleId 與缺少的 evidence。
原因：先觀察可避免未重現就直接改答案。
卡住先查：確認開啟的是 files/starter/index.html。
檔案：files/starter/index.html 定位：#modify
操作：查三個 items 與缺少的 status，以 guard 記錄安全分支。 → 讀 data-id，切換 is-selected 並確認既有 card class 未消失。 → 把三項加入 fragment，再一次 append 到 list。 → 以相同資料連續 render 兩次並檢查 count 與 id 唯一性。
// 16-01-queryselectorall-null-guard: 查三個 items 與缺少的 status，以 guard 記錄安全分支。
// 16-02-classlist-dataset: 讀 data-id，切換 is-selected 並確認既有 card class 未消失。
// 16-03-documentfragment: 把三項加入 fragment，再一次 append 到 list。
// 16-04-render: 以相同資料連續 render 兩次並檢查 count 與 id 唯一性。預期：完成具 null guard、data/class 狀態且重跑不重複的安全清單 renderer。
證據：itemCount=3、missing=true、guarded=true；dataId=s2、selected=true、baseClass=true；fragmentBefore=3、domAfter=3、fragmentAfter=0；firstCount=3、secondCount=3、duplicateIds=0
原因：逐項整合能把回歸定位到明確 module。
卡住先查：回到第一個未通過的 module，只修該處。
檔案：files/solution/index.html 定位：#verify
操作：重新整理並依 outcomes 順序重跑所有證據。
// VERIFY：逐項記錄 pass/fail，不以看到畫面代替 evidence。預期：4/4 module 通過。
證據：每個 moduleId 都有實際結果與重設後重現紀錄。
原因：單項通過不代表整合後沒有 selector、id 或狀態衝突。
卡住先查：若失敗，回到第一個失敗 module，不同時修多項。
檔案：files/starter/index.html 定位：#challenge
操作：替另一個商家情境重做，仍達成：完成具 null guard、data/class 狀態且重跑不重複的安全清單 renderer。
// CHALLENGE：只替換內容與資料，不新增框架或跳過 self-check。預期：完成具 null guard、data/class 狀態且重跑不重複的安全清單 renderer。
證據：轉用後的作品與全數 module self-check。
原因：能轉用才代表理解責任，而非只記住原範例。
卡住先查：先確認共同基底與 module id 未被改壞。
重設方法：重新載入 files/starter/index.html；若 localStorage 不可用，使用頁面內記憶狀態並提供重設按鈕。
挑戰：將同一組責任轉用到另一個商家情境，仍達成：完成具 null guard、data/class 狀態且重跑不重複的安全清單 renderer。
限制：不新增框架。；保留 module id 與驗收證據。
提交證據：提交可直接開啟的作品與逐項 self-check。
拆小：在「安全 DOM 查找與可重複渲染」先完成第一個尚未通過的 module：querySelectorAll() 與 null guard，不同時修改其他責任。
串接：依 16-01-queryselectorall-null-guard → 16-02-classlist-dataset → 16-03-documentfragment → 16-04-render 核對各自輸入與證據。
完整解答與原因：依序執行 查三個 items 與缺少的 status，以 guard 記錄安全分支。 → 讀 data-id，切換 is-selected 並確認既有 card class 未消失。 → 把三項加入 fragment，再一次 append 到 list。 → 以相同資料連續 render 兩次並檢查 count 與 id 唯一性。；這個順序能把每個結果對回單一 module，避免整合後無法定位。
完整解答預設收合；先留下自己的嘗試，再開第三層。