清华社课件JavaScript交互式Web前端开发3.1 DOM简介与操作.pptxVIP

DOM简介与操作主讲：课程组

CONTENTS01DOM简介02DOM核心概念03节点间关系04Document对象

DOM简介01

DOM定义与作用由W3C制定，用于处理HTML、XML文档交互。标准化编程接口允许程序化方式修改文档内容、结构和样式。动态修改网页内容

文档结构与节点操作文档构建为包含节点类型的树形结构。层次化树形结构支持节点创建、插入、替换或删除操作。节点动态修改0201通过parentNode、childNodes遍历父子节点。父子节点遍历03

精准样式控制通过style属性直接修改元素的CSS样式。直接修改CSS属性利用classListAPI精细化管理CSS类。classListAPI管理使用getComputedStyle()获取元素最终应用的样式。获取元素最终样式

事件驱动交互事件流模型包括捕获和冒泡两个阶段。addEventListener绑定事件通过addEventListener方法灵活绑定事件。事件委托机制利用事件冒泡在父节点统一处理子元素事件。

DOM核心概念02

文档对象Document对象是DOM树的根节点，代表整个页面的入口点。01Document对象地位内置快捷访问方式，如images、forms、links集合，简化文档结构操作。02集成化子对象系统提供丰富API，控制页面内容，实现复杂交互效果。03功能完备性

元素对象HTML标签在DOM中映射为element对象，如div、p、img。Element对象类型元素是节点的一种类型，但节点不仅限于元素，还包括文本、注释等。节点与元素关系可对元素进行属性设置、样式修改、事件绑定等操作。属性设置与样式修改010203

节点对象节点间关系节点是DOM基础单元节点类型多样，包括元素节点、属性节点、文本节点及注释节点。节点间存在祖先与后代、父子、兄弟关系，构成DOM树结构。节点操作支持创建、插入、替换或删除节点，实现动态内容渲染。

节点间关系03

祖先后代关系DOM树的遍历利用parentNode和childNodes属性遍历DOM树。元素间的包含关系若元素A包含元素B，则A是B的祖先元素。0102

父子关系父子关系在事件委托中的应用利用父子关系在父节点集中处理子元素事件。直接包含与被包含父元素直接包含子元素，形成层级对应关系。

兄弟关系具有相同父节点的元素构成兄弟节点关系。同级元素间的关联通过nextSibling和previousSibling属性访问兄弟节点。兄弟节点的访问

Document对象04

根节点地位01作为顶级对象，代表整个页面的DOM树入口。02允许在全局环境中通过document关键字直接访问。Document对象是DOM树入口点window对象的默认属性

集成化子对象系统内置images、forms、links等集合，简化操作。快捷访问关键元素集合直接访问文档中的关键元素，提高开发效率。无需遍历DOM树

功能完备性实现复杂交互效果，开发者可灵活使用API。灵活控制页面内容从元素查询到内容生成和修改，是DOM操作起点。提供丰富API

谢谢主讲：课程组