携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第14天，点击查看活动详情

定义:

DOM(Document Object Model) 又称文档对象模型，是W3C组织推荐的处可扩展置标语言的标准编程接口。是一种与平台和语言无关的应用程序接口(API),可以动态地访问程序和脚本,更新其内容、结构和www文档的风格。(包括核心DOM、XML DOM和HTML DOM )

作用:

DOM的主要作用是：通过JS操作DOM对象实现在HTML页面的操作，实现对文档的访问和更新文档的内容、结构和样式

eg:

document.getElementById("元素id") 
document.getElementsByClassName("元素class属性,类名")
document.getElementsByName("元素name属性")
document.getElementsByTagName("元素标签名")

DOM树：

HTML DOM模型被结构化为DOM树

构成DOM的基本元素主要是节点，包括元素节点，属性节点，注释节点等，而DOM树就是以HTML DOM为根节点，其他属性节点作为子节点组织成的树型的树状结构

DOM事件模型和DOM事件流

当一个HTML元素产生一个事件时，该事件会在元素节点与根结点之间的路径传播，路径所经过的结点都会收到该事件，这个传播过程可称为DOM事件流

DOM事件模型主要分为事件捕获和事件冒泡

事件触发时，会在子元素和父元素之间传播，这种传播就是DOM事件流，一般有三种阶段:

• （1）捕获阶段：事件从window对象自上而下向目标节点传播的
• （2）目标阶段：在目标节点触发事件被称作目标阶段
• （2）冒泡阶段：事件从目标节点自下而上向window对象传播的阶段

如果有多个需要处理的元素，为了提升性能，可以根据事件捕获和事件冒泡，通过事件委托(事件代理)机制来更好的处理元素

事件委托:

因为事件会在冒泡阶段向上传播，为了避免向特定的节点添加事件监听器，可以选择添加到它的某一个祖先（父级或者更深的级别）上，从而使该事件监听器分析冒泡事件以及查找子元素的匹配项。这种事件处理方法叫做事件委托或事件代理