DOM（文档对象模型）

目录

一.DOM概述

二.DOM操作

三.DOM事件

四.总结

---

一.DOM概述

1.DOM简介

DOM（文档对象模型），用于将HTML文档描述成文档对象，该对象被组织成由一个个节点组成的树形结构。树中节点有元素节点，属性节点，文本节点等。节点之间存在父子，兄弟等层级关系，每个节点都有自己的名称，类型以及其他一些属性。同时DOM提供了一系列节点操作相关的API，用于访问和处理元素。

2.DOM作用

• 获取节点

DOM可以获取文档节点，例如获取某个节点的属性，遍历列表节点的内容，获得表单的输入值等。DOM获取节点后，还可以对节点的属性进行改变。

• 监听事件

DOM可以监听事件并作出响应，例如用户的单击，改变窗口大小，表单提交等操作。

3.DOM树

DOM树用于将HTML文档组织成一个树形结构。

每一个节点表示一个Node对象，可以通过nodeType属性来表示节点类型，常见的节点类型包括以下几种类型：

• Document类型：表示整个HTML页面文档，document对象也是windows对象的一个属性，可以作为全局对象来访问。
• Element类型：元素节点，通过访问其Id，title等属性，可以获得该节点的相关属性信息。
• Attr类型：属性节点。
• Text类型：纯文本节点，不包含HTML代码。

二.DOM操作

1.获取元素

• getElementById()方法
• getElementsByName()方法
• getElementsByTagName()方法
• getElementsByClassName()方法
• querySelectorAll(),querySelector()方法

2.遍历元素

 DOM操作中经常会需要查找某个元素的其他相关元素，比如它的父元素节点，兄弟元素节点或者子节点，可以通过遍历树的方式来遍历文档结构。

DOM中的Node对象包括Document对象，Element对象等，都提供了一些属性来遍历操作，常见属性有：

• parentNode
• childNode
• firstChild
• lastChild
• previousSibling
• nextSibling
• nodeType
• node Name
• node Value

三.DOM事件

1.事件概述

各种鼠标，键盘操作或者浏览器自身加载资源等状态，都是通过事件机制来实现Javascript和Html的交互。

• 事件目标：是指触发此事件的对象，Window，Document，Element是比较常见的事件目标，比如某一个按钮，某一个输入框。
• 事件类型：是指具体发生了什么事件，单击事件类型是click,鼠标移动事件类型是mousemove.
• 事件监听程序：是指响应事件的处理函数
• 事件对象：是指包含事件详细信息的对象
• 事件流模型：是事件的传播方式，由于事件目标常常是逐层嵌套在其他元素内部的，所以事件传播方式按照传播方向分两种，一种是自内向外的冒泡，一种是自外向内的捕获。

2.事件类型

• 文档事件：包含HTML文档自身关于文档加载，错误异常的一些事件。
• 用户界面事件：包括页面的focus事件，blur事件，resize事件等。
• 鼠标事件：包括click事件，mouse down事件等。
• 键盘事件：包括keydown事件，keyup事件，keypress事件。
• 表单事件：包括focus事件，blur事件，input事件，submit事件。

3.事件处理

如果需要事件发生时响应这个事件，则需要对这个事件注册一个处理函数，也就是事件监听程序。注册事件处理函数通常有如下三种方式：

• HTML行内注册
• JavaScript DOM0级注册
• JavaScript DOM2级注册

4.事件流模型

• 冒泡

       事件从具体，嵌套层级最深的节点开始接收，然后逐级向上传播，这种模型称为事件冒泡，目前所有浏览器都支持事件冒泡。

• 捕获

       如果事件是先从最上层节点接受，逐级传递到最具体的节点，这种方式称为捕获。

四.总结

DOM是前端开发中最核心的部分，可以操作DOM节点并响应和处理各种事件。所以要学好这部分的内容，打好基础。