[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$fVsw--i6Mq0XEsWKcRpvX27QGEJh3MXaMZeD1qNd8TEI":3},{"code":4,"message":5,"data":6},200,"成功",{"id":7,"createdAt":8,"title":9,"content":10,"summary":11,"image":12,"uid":13,"user":14,"categoryId":21,"category":22,"subCategoryId":24,"subCategory":25,"comments":27,"status":17,"reason":28,"notice":28,"visitCount":29,"commentCount":30,"keywords":31},117,"2024-07-07T04:03:15.539Z","DOM和CSSOM","DOM（Document Object Model）树和CSS（Cascading Style Sheets）树是Web开发中两个重要的概念，它们在浏览器渲染网页时起着至关重要的作用。下面我将分别解释它们是什么，如何理解它们，以及它们是如何工作的。\n\n## DOM树\n### DOM树是什么？\n\nDOM树是文档对象模型的树形表示。它是HTML或XML文档的编程接口，它定义了文档的结构和内容，并允许开发人员通过编程方式（如JavaScript）来访问和修改文档的结构、样式和内容。\n\n## 如何理解DOM树？\n\nDOM树把文档中的每个元素都表示为一个节点（Node）。这些节点之间通过父子、兄弟等关系连接起来，形成一棵树形结构。例如，\u003Chtml>元素是根节点，\u003Chead>和\u003Cbody>是\u003Chtml>的子节点，而`\u003Cbody>`的子节点可能是`\u003Cdiv>`、`\u003Cp>`、`\u003Ca>`等元素。\n\n## DOM树是如何工作的？\n\n当浏览器加载HTML文档时，它会解析文档并创建一个DOM树。这个DOM树是动态的，也就是说，它可以随着JavaScript代码的执行而发生变化。例如，你可以使用JavaScript来添加、删除或修改DOM树中的节点，从而改变网页的结构和内容。\n![Dom树](https://image.xinwei.ltd/11720324831696.png)\n\n\n## CSS树\n### CSS树是什么？\n\nCSS树（更准确地说是CSSOM树，即CSS Object Model）是CSS对象模型的树形表示。它描述了文档中各个元素应该如何显示，包括颜色、字体、布局等样式信息。\n\n### 如何理解CSS树？\n\nCSS树也是由节点组成的，但这些节点主要表示CSS规则。每个CSS规则由选择器和一组声明组成。选择器用于指定哪些元素应该应用该规则，而声明则指定了这些元素应该如何显示。浏览器会解析CSS代码并创建一个CSSOM树，其中每个节点都对应一个CSS规则。\n\n### CSS树是如何工作的？\n\n当浏览器加载CSS文件或`\u003Cstyle>`标签中的样式时，它会解析这些样式并创建一个CSSOM树。然后，浏览器会将DOM树和CSSOM树合并成一个渲染树（Render Tree）。渲染树中的每个节点都对应着屏幕上的一个矩形区域，并包含了如何绘制该区域的信息。浏览器会遍历这个渲染树，并使用GPU来绘制网页上的每个元素。\n![css树.png](https://image.xinwei.ltd/image1720324900186.png)\n\n\n## 总结\nDOM树描述了文档的结构和内容，而CSS树描述了文档中各个元素应该如何显示。当浏览器加载HTML和CSS时，它会分别创建DOM树和CSS树，并将它们合并成一个渲染树来绘制网页。JavaScript可以通过编程方式访问和修改DOM树来改变网页的结构、样式和内容。\n\n","DOM（Document Object Model）树和CSS（Cascading Style Sheets）树是Web开发中两个重要的概念，它们在浏览器渲染网页时起着至关重要的作用。下面我将分别解释它们是什么，如何理解它们，以及它们是如何工作的。","https://image.xinwei.ltd/11720324831696.png",499668042977349,{"phone":15,"userId":13,"nickName":16,"vipType":17,"avatar":18,"sign":19,"createdAt":20},"13121171998","全栈老韩",1,"https://image.xinwei.ltd/images/IMG_5430.JPG","全栈工程师，擅长iOS App开发、前端（vue、react、nuxt、小程序&Taro）开发、Flutter、React Native、后端（midwayjs、golang、express、koa）开发、docker容器、seo优化等。","2024-01-01T16:14:30.305Z",2,{"id":21,"name":23},"IT技术",32,{"id":24,"name":26,"parentId":21},"前端",[],"",208,0,"dom,cssom,dom cssom,dom cssom knowledge,dom知识"]