[{"data":1,"prerenderedAt":751},["ShallowReactive",2],{"navigation_docs":3,"-web-dev-browser-dom":352,"-web-dev-browser-dom-surround":746},[4,54,83,116,125,161,179,200],{"title":5,"path":6,"stem":7,"children":8},"Ai","/ai","ai",[9,12,42,46,50],{"title":10,"path":6,"stem":11},"AI 技術探索","ai/index",{"title":13,"path":14,"stem":15,"children":16,"page":41},"Rag","/ai/rag","ai/RAG",[17,21,25,29,33,37],{"title":18,"path":19,"stem":20},"BM25 演算法深入解析：從 TF-IDF 到現代搜尋引擎的核心技術","/ai/rag/bm25-deep-dive-from-tf-idf-to-rag","ai/RAG/bm25-deep-dive-from-tf-idf-to-rag",{"title":22,"path":23,"stem":24},"Dense Retrieval（向量檢索）深入解析","/ai/rag/dense-retrieval-deep-dive","ai/RAG/dense-retrieval-deep-dive",{"title":26,"path":27,"stem":28},"RAG（Retrieval-Augmented Generation）原理與實作入門","/ai/rag/rag-intro-principles-and-implementation","ai/RAG/rag-intro-principles-and-implementation",{"title":30,"path":31,"stem":32},"RAG Retrieval Strategy 深入解析","/ai/rag/rag-retrieval-strategy-deep-dive","ai/RAG/rag-retrieval-strategy-deep-dive",{"title":34,"path":35,"stem":36},"Reciprocal Rank Fusion（RRF）教學：打造更穩定的檢索融合策略","/ai/rag/rrf-reciprocal-rank-fusion-guide","ai/RAG/rrf-reciprocal-rank-fusion-guide",{"title":38,"path":39,"stem":40},"TF-IDF（Term Frequency–Inverse Document Frequency）深入解析","/ai/rag/tf-idf-deep-dive","ai/RAG/tf-idf-deep-dive",false,{"title":43,"path":44,"stem":45},"Docus AI 功能完整實作指南","/ai/docus-ai-implementation","ai/docus-ai-implementation",{"title":47,"path":48,"stem":49},"llms.txt 是什麼？在 Nuxt 中控制 AI 與搜尋引擎爬蟲的新方式","/ai/llms-txt","ai/llms-txt",{"title":51,"path":52,"stem":53},"MCP（Model Context Protocol）是什麼？用「AI 的 USB-C」理解模型如何安全連接工具與資料","/ai/mcp_concept","ai/mcp_concept",{"title":55,"path":56,"stem":57,"children":58,"page":41},"Data Analysis","/data-analysis","data-analysis",[59,63,67,71,75,79],{"title":60,"path":61,"stem":62},"Exploratory Data Analysis（EDA）資料探索分析入門","/data-analysis/exploratory-data-analysis-eda","data-analysis/exploratory-data-analysis-eda",{"title":64,"path":65,"stem":66},"PR-AUC 深入解析：不平衡分類問題的重要評估指標","/data-analysis/pr-auc-for-imbalanced-classification","data-analysis/pr-auc-for-imbalanced-classification",{"title":68,"path":69,"stem":70},"ROC-AUC 深入解析：理解分類模型的判斷能力","/data-analysis/roc-auc-complete-guide","data-analysis/roc-auc-complete-guide",{"title":72,"path":73,"stem":74},"SHAP（SHapley Additive exPlanations）模型解釋方法深入解析","/data-analysis/shap-model-interpretation-complete-guide","data-analysis/shap-model-interpretation-complete-guide",{"title":76,"path":77,"stem":78},"Social Network Analysis（SNA）深入解析","/data-analysis/social-network-analysis-sna","data-analysis/social-network-analysis-sna",{"title":80,"path":81,"stem":82},"Time-based Split：為什麼時間序列資料不能使用 Random Split？","/data-analysis/time-based-split-vs-random-split","data-analysis/time-based-split-vs-random-split",{"title":84,"path":85,"stem":86,"children":87,"page":41},"MachineLearning","/machine_learning","machine_learning",[88,92,96,100,104,108,112],{"title":89,"path":90,"stem":91},"Confusion Matrix（混淆矩陣）完整解析","/machine_learning/confusion-matrix","machine_learning/confusion-matrix",{"title":93,"path":94,"stem":95},"Decision Tree 模型完整教學：從原理到 Python 實作","/machine_learning/decision-tree-complete-guide","machine_learning/decision-tree-complete-guide",{"title":97,"path":98,"stem":99},"為什麼 Decision Tree 在 Tabular Data 上常常勝過 Deep Learning？","/machine_learning/decision-tree-vs-deep-learning-on-tabular-data","machine_learning/decision-tree-vs-deep-learning-on-tabular-data",{"title":101,"path":102,"stem":103},"LightGBM 模型入門：理解高效能的 Gradient Boosting 演算法","/machine_learning/lightgbm-intro-for-tabular-data","machine_learning/lightgbm-intro-for-tabular-data",{"title":105,"path":106,"stem":107},"Logistic Regression（Logit 回歸）完整教學","/machine_learning/logistic-regression-complete-guide","machine_learning/logistic-regression-complete-guide",{"title":109,"path":110,"stem":111},"為什麼模型訓練需要 Train / Validation / Test Dataset？","/machine_learning/train-validation-test-dataset","machine_learning/train-validation-test-dataset",{"title":113,"path":114,"stem":115},"XGBoost 原理與實務教學","/machine_learning/xgboost-complete-guide","machine_learning/xgboost-complete-guide",{"title":117,"path":118,"stem":119,"children":120,"page":41},"Network","/network","network",[121],{"title":122,"path":123,"stem":124},"DNS 設定入門：CNAME vs A Record 完整解析","/network/dns-cname-vs-a-record-guide","network/dns-cname-vs-a-record-guide",{"title":126,"path":127,"stem":128,"children":129},"Nuxt","/nuxt","nuxt",[130,133,137,141,145,149,153,157],{"title":131,"path":127,"stem":132},"Nuxt 實戰指南","nuxt/index",{"title":134,"path":135,"stem":136},"Abstraction Layer 與 Adapter 的差別，一次搞懂設計角色","/nuxt/adapter_abstraction_layer","nuxt/adapter_abstraction_layer",{"title":138,"path":139,"stem":140},"Nuxt 4 全面理解 — 專案檔案結構解析","/nuxt/directory_structure","nuxt/directory_structure",{"title":142,"path":143,"stem":144},"Nuxt 前端 build 流程完整解析","/nuxt/frontend_build","nuxt/frontend_build",{"title":146,"path":147,"stem":148},"Nitro 是什麼？從 Nuxt 專案到 Server 與 Edge 的關鍵引擎","/nuxt/nitro","nuxt/nitro",{"title":150,"path":151,"stem":152},"深入理解 Nuxt 的 .nuxt 與 .output：為什麼部署時一定要分清楚？","/nuxt/nuxt_and_output","nuxt/nuxt_and_output",{"title":154,"path":155,"stem":156},"Nuxt 中 dev、build、preview 的差異一次搞懂","/nuxt/nuxt_dev_build_preview","nuxt/nuxt_dev_build_preview",{"title":158,"path":159,"stem":160},"Nuxt Image vs \u003Cimg>：為什麼 Nuxt 3 專案幾乎都該用 \u003CNuxtImg>？","/nuxt/nuxt_image","nuxt/nuxt_image",{"title":162,"path":163,"stem":164,"children":165},"Python 程式開發","/python","python/index",[166,167,171,175],{"title":162,"path":163,"stem":164},{"title":168,"path":169,"stem":170},"如何在 FastAPI 中調用記憶體 Buffer 回傳圖片 (附實例)","/python/memory_buffer","python/memory_buffer",{"title":172,"path":173,"stem":174},"Python 單元測試教學：如何為你的程式撰寫 Test","/python/python-unit-testing-unittest-pytest","python/python-unit-testing-unittest-pytest",{"title":176,"path":177,"stem":178},"如何使用 uv 取代 pip：改善 Python 專案的開發流程","/python/uv","python/uv",{"title":180,"path":181,"stem":182,"children":183,"page":41},"Statistic","/statistic","statistic",[184,188,192,196],{"title":185,"path":186,"stem":187},"卡方檢定（Chi-Square Test）入門教學","/statistic/chi-square-test-intro","statistic/chi-square-test-intro",{"title":189,"path":190,"stem":191},"常見抽樣方法（Sampling Methods）教學：Stratified、Quota、Convenience、Systematic、Simple Random","/statistic/common-sampling-methods-guide","statistic/common-sampling-methods-guide",{"title":193,"path":194,"stem":195},"Cramér’s V 指標介紹：如何衡量兩個類別變數之間的關聯","/statistic/cramers-v-for-categorical-association","statistic/cramers-v-for-categorical-association",{"title":197,"path":198,"stem":199},"Mann–Whitney U 與 Kolmogorov–Smirnov（KS）檢定：非參數統計檢定的入門指南","/statistic/mann-whitney-u-and-ks-test-intro","statistic/mann-whitney-u-and-ks-test-intro",{"title":201,"path":202,"stem":203,"children":204},"WebDev","/web_dev","web_dev",[205,208,234,248,282,312,334],{"title":206,"path":202,"stem":207},"Web 前端開發","web_dev/index",{"title":209,"path":210,"stem":211,"children":212},"瀏覽器與渲染","/web_dev/browser","web_dev/browser/index",[213,214,218,222,226,230],{"title":209,"path":210,"stem":211},{"title":215,"path":216,"stem":217},"瀏覽器儲存空間完整解析：Cookie、localStorage、IndexedDB 到 Cache Storage","/web_dev/browser/browser-storage-comprehensive-guide","web_dev/browser/browser-storage-comprehensive-guide",{"title":219,"path":220,"stem":221},"DOM (Document Object Model) 深入解析","/web_dev/browser/dom","web_dev/browser/dom",{"title":223,"path":224,"stem":225},"Service Worker Request Flow 深入解析","/web_dev/browser/service-worker-request-flow","web_dev/browser/service-worker-request-flow",{"title":227,"path":228,"stem":229},"CSR、SSR 與 SSG 是什麼？前端渲染策略完整比較","/web_dev/browser/ssr_csr_ssg","web_dev/browser/ssr_csr_ssg",{"title":231,"path":232,"stem":233},"Virtual DOM 深入解析：為什麼它能優化前端效能？","/web_dev/browser/virtual_dom","web_dev/browser/virtual_dom",{"title":235,"path":236,"stem":237,"children":238},"圖形技術","/web_dev/graphics","web_dev/graphics/index",[239,240,244],{"title":235,"path":236,"stem":237},{"title":241,"path":242,"stem":243},"為什麼 Three.js 專案幾乎都選擇 CSR？從 SSR 問題談起","/web_dev/graphics/threejs_csr","web_dev/graphics/threejs_csr",{"title":245,"path":246,"stem":247},"WebGL 是什麼？為什麼前端 3D 幾乎都靠它？","/web_dev/graphics/webgl","web_dev/graphics/webGL",{"title":249,"path":250,"stem":251,"children":252},"架構與配置","/web_dev/infrastructure","web_dev/infrastructure/index",[253,254,258,262,266,270,274,278],{"title":249,"path":250,"stem":251},{"title":255,"path":256,"stem":257},"Zeabur + K3s + Nuxt 部署架構完整解析","/web_dev/infrastructure/k3s-zeabur","web_dev/infrastructure/K3s-zeabur",{"title":259,"path":260,"stem":261},"ECS vs Docker vs Kubernetes：從部署堆疊理解三層架構","/web_dev/infrastructure/ecs-docker-kubernetes-stack","web_dev/infrastructure/ecs-docker-kubernetes-stack",{"title":263,"path":264,"stem":265},"ECS vs VPS 是什麼？從部署網站的角度一次搞懂差別","/web_dev/infrastructure/ecs-vs-vps","web_dev/infrastructure/ecs-vs-vps",{"title":267,"path":268,"stem":269},"Zeabur 內網服務連線完整入門指南","/web_dev/infrastructure/k3s-internal-networking","web_dev/infrastructure/k3s-internal-networking",{"title":271,"path":272,"stem":273},"使用 Microservices 架構設計系統的優勢解析","/web_dev/infrastructure/microservices-architecture-advantages","web_dev/infrastructure/microservices-architecture-advantages",{"title":275,"path":276,"stem":277},"Nginx 入門教學：從反向代理到與 Kubernetes 的架構比較","/web_dev/infrastructure/nginx-intro","web_dev/infrastructure/nginx-intro",{"title":279,"path":280,"stem":281},"YAML 配置是什麼？為什麼現代開發都在用它","/web_dev/infrastructure/yaml-configuration","web_dev/infrastructure/yaml-configuration",{"title":283,"path":284,"stem":285,"children":286},"網絡與通訊","/web_dev/network","web_dev/network/index",[287,288,292,296,300,304,308],{"title":283,"path":284,"stem":285},{"title":289,"path":290,"stem":291},"HTTP Request 結構完整解析：從 Request Line 到 Header 一次看懂","/web_dev/network/http-request-structure","web_dev/network/http-request-structure",{"title":293,"path":294,"stem":295},"OSI 模型（Open Systems Interconnection Model）完整解析","/web_dev/network/osi-model","web_dev/network/osi-model",{"title":297,"path":298,"stem":299},"RESTful API 設計原則與實務解析","/web_dev/network/restful-api","web_dev/network/restful-api",{"title":301,"path":302,"stem":303},"RESTful API 五大設計原則深入解析","/web_dev/network/restful-api-principles","web_dev/network/restful-api-principles",{"title":305,"path":306,"stem":307},"Server-Sent Events (SSE) 深入解析與實作教學","/web_dev/network/sse-introduction","web_dev/network/sse-introduction",{"title":309,"path":310,"stem":311},"WebSocket 入門教學：從概念到 Node.js 實作","/web_dev/network/websocket-introduction","web_dev/network/websocket-introduction",{"title":313,"path":314,"stem":315,"children":316},"認證與安全","/web_dev/security","web_dev/security/index",[317,318,322,326,330],{"title":313,"path":314,"stem":315},{"title":319,"path":320,"stem":321},"使用 Cookie 與 Session 建立使用者驗證（完整新手教學）","/web_dev/security/cookie-session-authentication","web_dev/security/cookie-session-authentication",{"title":323,"path":324,"stem":325},"JWT 驗證機制完整解析：從登入流程到實務應用","/web_dev/security/jwt-authentication","web_dev/security/jwt-authentication",{"title":327,"path":328,"stem":329},"Secret Key 簽名是什麼？從零理解資料簽名的本質","/web_dev/security/secret-key-signing","web_dev/security/secret-key-signing",{"title":331,"path":332,"stem":333},"SSH（Secure Shell）是什麼？從遠端登入到安全通道的核心概念","/web_dev/security/ssh","web_dev/security/ssh",{"title":335,"path":336,"stem":337,"children":338},"SEO 與規範","/web_dev/seo","web_dev/seo/index",[339,340,344,348],{"title":335,"path":336,"stem":337},{"title":341,"path":342,"stem":343},"Canonical URL 是什麼？用生活化方式搞懂前端 SEO 的基本保命符","/web_dev/seo/canonical_link","web_dev/seo/canonical_link",{"title":345,"path":346,"stem":347},"robots.txt 是什麼？SEO 的第一道守門員","/web_dev/seo/robot_txt","web_dev/seo/robot_txt",{"title":349,"path":350,"stem":351},"Nuxt SEO 中的 Meta 與 SEO 工具是如何運作的？","/web_dev/seo/seo","web_dev/seo/seo",{"id":353,"title":219,"body":354,"description":733,"extension":734,"links":735,"meta":736,"navigation":743,"path":220,"seo":744,"stem":221,"__hash__":745},"docs/web_dev/browser/dom.md",{"type":355,"value":356,"toc":722},"minimark",[357,362,366,369,436,444,447,450,454,457,460,468,484,491,495,502,505,542,545,547,551,554,593,599,602,619,629,631,635,638,682,685,687,690,693,696,698,702,708,711,713,716,719],[358,359,361],"h2",{"id":360},"從一段最基本的-html-說起","從一段最基本的 HTML 說起",[363,364,365],"p",{},"HTML 是網頁的原始藍圖，而 DOM 則是瀏覽器在讀取 HTML 後，幫你建立好的「可被 JavaScript 操作的物件模型」。\n前端所有互動行為，幾乎都發生在 DOM 這一層。",[363,367,368],{},"我們先從一段非常單純的 HTML 開始：",[370,371,376],"pre",{"className":372,"code":373,"language":374,"meta":375,"style":375},"language-html shiki shiki-themes github-dark","\u003Cbody>\n  \u003Ch1>你好\u003C/h1>\n  \u003Cbutton>點我\u003C/button>\n\u003C/body>\n","html","",[377,378,379,395,411,426],"code",{"__ignoreMap":375},[380,381,384,388,392],"span",{"class":382,"line":383},"line",1,[380,385,387],{"class":386},"s95oV","\u003C",[380,389,391],{"class":390},"s4JwU","body",[380,393,394],{"class":386},">\n",[380,396,398,401,404,407,409],{"class":382,"line":397},2,[380,399,400],{"class":386},"  \u003C",[380,402,403],{"class":390},"h1",[380,405,406],{"class":386},">你好\u003C/",[380,408,403],{"class":390},[380,410,394],{"class":386},[380,412,414,416,419,422,424],{"class":382,"line":413},3,[380,415,400],{"class":386},[380,417,418],{"class":390},"button",[380,420,421],{"class":386},">點我\u003C/",[380,423,418],{"class":390},[380,425,394],{"class":386},[380,427,429,432,434],{"class":382,"line":428},4,[380,430,431],{"class":386},"\u003C/",[380,433,391],{"class":390},[380,435,394],{"class":386},[363,437,438,439,443],{},"從人類的角度來看，這段程式碼很直覺，就是「畫面上有一個標題和一個按鈕」。\n但對瀏覽器來說，這仍然只是一段",[440,441,442],"strong",{},"純文字描述","，它本身不能被 JavaScript 直接修改，也無法監聽點擊、滑鼠移動這類事件。",[363,445,446],{},"因此，瀏覽器在真正顯示畫面之前，會先把這份 HTML 進行解析與轉換。",[448,449],"hr",{},[358,451,453],{"id":452},"瀏覽器如何把-html-變成-dom","瀏覽器如何把 HTML 變成 DOM？",[363,455,456],{},"當瀏覽器讀取 HTML 時，會依照標籤的巢狀關係，建立出一個樹狀結構。這個結構中的每一個節點，都會是一個 JavaScript 物件，而不是文字。這棵樹，就是所謂的 DOM（Document Object Model）。",[363,458,459],{},"用結構化的方式來看，剛剛那段 HTML 會被轉換成類似下面的樣子：",[370,461,466],{"className":462,"code":464,"language":465},[463],"language-text","document\n └─ body\n    ├─ h1\n    │   └─ \"你好\"\n    └─ button\n        └─ \"點我\"\n","text",[377,467,464],{"__ignoreMap":375},[363,469,470,471,474,475,477,478,480,481,483],{},"在這個模型中，",[377,472,473],{},"document"," 是整份網頁的根節點，",[377,476,391],{}," 是它的子節點，而 ",[377,479,403],{},"、",[377,482,418],{}," 以及文字內容，都是依附在樹上的節點。這些節點不再只是標籤，而是可以被 JavaScript 存取與操作的物件。",[358,485,486],{"id":375},[487,488],"img",{"alt":489,"src":490},"Image","https://www.w3schools.com/js/pic_htmltree.gif",[358,492,494],{"id":493},"為什麼-javascript-一定要透過-dom","為什麼 JavaScript 一定要透過 DOM？",[363,496,497,498,501],{},"關鍵原因在於：",[440,499,500],{},"JavaScript 只能操作物件，不能直接修改 HTML 原始碼","。\nDOM 正好扮演了中介角色，讓 JavaScript 可以用「物件操作」的方式來影響畫面。",[363,503,504],{},"例如，當你想取得畫面上的按鈕時，實際上是透過 DOM 提供的介面，從這棵樹中找到對應的節點：",[370,506,510],{"className":507,"code":508,"language":509,"meta":375,"style":375},"language-js shiki shiki-themes github-dark","const button = document.querySelector(\"button\");\n","js",[377,511,512],{"__ignoreMap":375},[380,513,514,518,522,525,528,532,535,539],{"class":382,"line":383},[380,515,517],{"class":516},"snl16","const",[380,519,521],{"class":520},"sDLfK"," button",[380,523,524],{"class":516}," =",[380,526,527],{"class":386}," document.",[380,529,531],{"class":530},"svObZ","querySelector",[380,533,534],{"class":386},"(",[380,536,538],{"class":537},"sU2Wk","\"button\"",[380,540,541],{"class":386},");\n",[363,543,544],{},"這行程式碼的意思並不是「去讀 HTML 檔案」，而是「從目前這棵 DOM 樹中，找到第一個 button 節點」。",[448,546],{},[358,548,550],{"id":549},"dom-如何讓畫面可以被動態改變","DOM 如何讓畫面可以被動態改變？",[363,552,553],{},"一旦取得節點物件，接下來的所有操作，其實都是在改變 DOM 的狀態。\n例如，修改標題文字時：",[370,555,557],{"className":507,"code":556,"language":509,"meta":375,"style":375},"const h1 = document.querySelector(\"h1\");\nh1.textContent = \"哈囉世界\";\n",[377,558,559,579],{"__ignoreMap":375},[380,560,561,563,566,568,570,572,574,577],{"class":382,"line":383},[380,562,517],{"class":516},[380,564,565],{"class":520}," h1",[380,567,524],{"class":516},[380,569,527],{"class":386},[380,571,531],{"class":530},[380,573,534],{"class":386},[380,575,576],{"class":537},"\"h1\"",[380,578,541],{"class":386},[380,580,581,584,587,590],{"class":382,"line":397},[380,582,583],{"class":386},"h1.textContent ",[380,585,586],{"class":516},"=",[380,588,589],{"class":537}," \"哈囉世界\"",[380,591,592],{"class":386},";\n",[363,594,595,596,598],{},"這並沒有改動 HTML 原始碼，而是直接修改 DOM 中 ",[377,597,403],{}," 節點所代表的文字內容。瀏覽器偵測到 DOM 改變後，才會重新繪製畫面，讓使用者看到新的文字。",[363,600,601],{},"同樣的概念也適用在樣式修改上：",[370,603,605],{"className":507,"code":604,"language":509,"meta":375,"style":375},"button.style.color = \"red\";\n",[377,606,607],{"__ignoreMap":375},[380,608,609,612,614,617],{"class":382,"line":383},[380,610,611],{"class":386},"button.style.color ",[380,613,586],{"class":516},[380,615,616],{"class":537}," \"red\"",[380,618,592],{"class":386},[363,620,621,622,624,625,628],{},"這行程式是在改變 ",[377,623,418],{}," 節點的樣式屬性，而不是在 HTML 中新增或修改 ",[377,626,627],{},"style"," 標籤。",[448,630],{},[358,632,634],{"id":633},"事件其實也是綁在-dom-上","事件其實也是綁在 DOM 上",[363,636,637],{},"當你替按鈕加上點擊事件時，本質上是在對 DOM 節點註冊一個事件監聽器：",[370,639,641],{"className":507,"code":640,"language":509,"meta":375,"style":375},"button.addEventListener(\"click\", () => {\n  alert(\"你點我了\");\n});\n",[377,642,643,665,677],{"__ignoreMap":375},[380,644,645,648,651,653,656,659,662],{"class":382,"line":383},[380,646,647],{"class":386},"button.",[380,649,650],{"class":530},"addEventListener",[380,652,534],{"class":386},[380,654,655],{"class":537},"\"click\"",[380,657,658],{"class":386},", () ",[380,660,661],{"class":516},"=>",[380,663,664],{"class":386}," {\n",[380,666,667,670,672,675],{"class":382,"line":397},[380,668,669],{"class":530},"  alert",[380,671,534],{"class":386},[380,673,674],{"class":537},"\"你點我了\"",[380,676,541],{"class":386},[380,678,679],{"class":382,"line":413},[380,680,681],{"class":386},"});\n",[363,683,684],{},"這代表瀏覽器會「持續監聽」這個 DOM 節點的狀態，一旦使用者點擊，對應的 JavaScript 函式就會被觸發。整個過程，依然與 HTML 原始碼無關，而是完全發生在 DOM 與 JavaScript 之間。",[448,686],{},[358,688,689],{"id":689},"用一個直覺的比喻來統整",[363,691,692],{},"如果把網頁想成一棟建築，HTML 就像是設計圖，負責描述結構；DOM 則是依照設計圖實際搭建完成的房子；而 JavaScript 則是你的人，可以走進房子裡，開燈、推門或重新佈置家具。",[363,694,695],{},"你平常寫的 JavaScript，其實從來不是在「改設計圖」，而是直接對已經存在的房子動手。DOM 正是那個讓操作成為可能的關鍵層。",[448,697],{},[358,699,701],{"id":700},"為什麼學-vue-nuxt-還是一定會碰到-dom","為什麼學 Vue / Nuxt 還是一定會碰到 DOM？",[363,703,704,705,707],{},"即使在 Vue 或 Nuxt 中，你很少直接寫 ",[377,706,531],{},"，DOM 仍然存在於背後。框架的工作，只是幫你管理「什麼時候該新增 DOM 節點、什麼時候該更新或移除」，並避免你手動操作時容易出錯的情況。",[363,709,710],{},"理解 DOM 的結構與行為，會讓你更容易理解為什麼某些情況必須使用 client-side、為什麼 hydration 會失敗、以及為什麼像 Three.js 這類高度互動的應用，通常不適合直接做 SSR。",[448,712],{},[358,714,715],{"id":715},"結論",[363,717,718],{},"HTML DOM 指的是瀏覽器在讀取 HTML 後，建立出來的一個物件樹。JavaScript 正是透過這棵樹，才能找到畫面元素、修改內容、調整樣式並監聽事件。只要把 HTML、DOM 與 JavaScript 的角色區分清楚，前端的很多「看起來很神祕的行為」，其實都只是這套機制的自然結果。",[627,720,721],{},"html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}",{"title":375,"searchDepth":397,"depth":397,"links":723},[724,725,726,727,728,729,730,731,732],{"id":360,"depth":397,"text":361},{"id":452,"depth":397,"text":453},{"id":375,"depth":397,"text":375},{"id":493,"depth":397,"text":494},{"id":549,"depth":397,"text":550},{"id":633,"depth":397,"text":634},{"id":689,"depth":397,"text":689},{"id":700,"depth":397,"text":701},{"id":715,"depth":397,"text":715},"掌握高效操作 DOM 的技巧，了解其運作機制，並學習如何優化 Web 應用的效能。","md",null,{"tags":737,"category":203,"date":742},[738,739,740,741],"dom","javascript","performance","frontend","2026-02-03",true,{"title":219,"description":733},"kLUUQTiZuNCorTtsfk3dGCpXN5UIbtRjnyEomSTJpC8",[747,749],{"title":215,"path":216,"stem":217,"description":748,"children":-1},"一次搞懂瀏覽器五種常見儲存方式的差異、容量限制、生命週期與實務使用場景，建立清晰的前端儲存心智模型。",{"title":223,"path":224,"stem":225,"description":750,"children":-1},"從請求流程圖到實戰策略，完整理解 Service Worker 如何攔截請求、操作快取並打造離線優先的 PWA 體驗。",1776690845379]