[{"data":1,"prerenderedAt":196},["ShallowReactive",2],{"term-d\u002Fdom":3,"related-d\u002Fdom":177},{"id":4,"title":5,"acronym":6,"body":7,"category":156,"description":157,"difficulty":158,"extension":159,"letter":160,"meta":161,"navigation":162,"path":163,"related":164,"seo":170,"sitemap":171,"stem":174,"subcategory":175,"__hash__":176},"terms\u002Fterms\u002Fd\u002Fdom.md","DOM","Document Object Model",{"type":8,"value":9,"toc":150},"minimark",[10,15,19,23,26,30,140,144,147],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"The DOM is a live map of your webpage that JavaScript can read and edit. When the browser loads your HTML it turns it into a big tree of objects. JavaScript can then grab any branch of that tree and change it — like editing a document while it's open.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"The DOM is a programming interface for HTML and XML documents. It represents the document as a tree of nodes where each node is an object with properties and methods. JavaScript interacts with the DOM to dynamically read, modify, add, or remove elements and attributes.",[11,27,29],{"id":28},"show-me-the-code","Show Me The Code",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-javascript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F Get an element and change its text\nconst title = document.getElementById('title');\ntitle.textContent = 'New Title';\ntitle.style.color = 'red';\n","javascript","",[38,39,40,49,92,114],"code",{"__ignoreMap":36},[41,42,45],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sHwdD","\u002F\u002F Get an element and change its text\n",[41,50,52,56,60,64,67,70,74,77,80,84,86,89],{"class":43,"line":51},2,[41,53,55],{"class":54},"spNyl","const",[41,57,59],{"class":58},"sTEyZ"," title ",[41,61,63],{"class":62},"sMK4o","=",[41,65,66],{"class":58}," document",[41,68,69],{"class":62},".",[41,71,73],{"class":72},"s2Zo4","getElementById",[41,75,76],{"class":58},"(",[41,78,79],{"class":62},"'",[41,81,83],{"class":82},"sfazB","title",[41,85,79],{"class":62},[41,87,88],{"class":58},")",[41,90,91],{"class":62},";\n",[41,93,95,97,99,102,104,107,110,112],{"class":43,"line":94},3,[41,96,83],{"class":58},[41,98,69],{"class":62},[41,100,101],{"class":58},"textContent ",[41,103,63],{"class":62},[41,105,106],{"class":62}," '",[41,108,109],{"class":82},"New Title",[41,111,79],{"class":62},[41,113,91],{"class":62},[41,115,117,119,121,124,126,129,131,133,136,138],{"class":43,"line":116},4,[41,118,83],{"class":58},[41,120,69],{"class":62},[41,122,123],{"class":58},"style",[41,125,69],{"class":62},[41,127,128],{"class":58},"color ",[41,130,63],{"class":62},[41,132,106],{"class":62},[41,134,135],{"class":82},"red",[41,137,79],{"class":62},[41,139,91],{"class":62},[11,141,143],{"id":142},"when-youll-hear-this","When You'll Hear This",[16,145,146],{},"\"Directly manipulating the DOM is slow — that's why React uses a Virtual DOM.\" \u002F \"Inspect the DOM in DevTools to see what's actually rendered.\"",[123,148,149],{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":36,"searchDepth":51,"depth":51,"links":151},[152,153,154,155],{"id":13,"depth":51,"text":14},{"id":21,"depth":51,"text":22},{"id":28,"depth":51,"text":29},{"id":142,"depth":51,"text":143},"frontend","The DOM is a live map of your webpage that JavaScript can read and edit. When the browser loads your HTML it turns it into a big tree of objects.","beginner","md","d",{},true,"\u002Fterms\u002Fd\u002Fdom",[165,166,167,168,169],"Virtual DOM","HTML","JavaScript","Render","Hydration",{"title":5,"description":157},{"changefreq":172,"priority":173},"weekly",0.7,"terms\u002Fd\u002Fdom",null,"i1vPvaCSuDCxDg6X2YyluLFPVM3DklDI1jOzjFuhlso",[178,182,186,189,193],{"title":166,"path":179,"acronym":180,"category":156,"difficulty":158,"description":181},"\u002Fterms\u002Fh\u002Fhtml","HyperText Markup Language","HTML is like the skeleton of a webpage. You write tags like \u003Ch1> and \u003Cp> and the browser builds the bones of your site from them.",{"title":169,"path":183,"acronym":175,"category":156,"difficulty":184,"description":185},"\u002Fterms\u002Fh\u002Fhydration","intermediate","Hydration is when a server-rendered HTML page comes alive in the browser.",{"title":167,"path":187,"acronym":175,"category":156,"difficulty":158,"description":188},"\u002Fterms\u002Fj\u002Fjavascript","JavaScript is what makes websites actually DO stuff. HTML is the bones, CSS is the skin, and JavaScript is the muscles and brain.",{"title":168,"path":190,"acronym":175,"category":191,"difficulty":158,"description":192},"\u002Fterms\u002Fr\u002Frender","cloud","Render is another developer-friendly hosting platform that does web services, databases, cron jobs, and static sites all in one place.",{"title":165,"path":194,"acronym":175,"category":156,"difficulty":184,"description":195},"\u002Fterms\u002Fv\u002Fvirtual-dom","The Virtual DOM is a lightweight copy of the real DOM that lives in memory.",1776518271797]