11、结合使用DOM、CSS和JavaScript创建动态网页元素

结合使用DOM、CSS和JavaScript创建动态网页元素

1. 文档对象模型（Document Object Model - DOM）

在现代Web开发中，文档对象模型（DOM）扮演着至关重要的角色。DOM是一种将HTML或XML文档表示为树状结构的方式，它允许开发者通过编程语言（如JavaScript）来访问和修改文档的内容和结构。DOM的引入极大地简化了动态网页的开发，使得网页可以根据用户的交互或特定条件实时更新，而无需重新加载整个页面。

1.1 DOM的基本概念

DOM的核心理念是将HTML文档分解为一系列的节点（Node），每个节点代表文档的一部分。这些节点可以是元素（Element）、属性（Attribute）、文本（Text）、注释（Comment）等。节点之间的关系形成了一个树形结构，其中每个节点都可以有父节点（Parent Node）、子节点（Child Nodes）和兄弟节点（Sibling Nodes）。

节点类型	描述
元素节点	表示HTML或XML文档中的元素，如 <div> 、 <p> 等。
属性节点	表示元素的属性，如 <img src="example.jpg"> 中的 src 属