DOM简介

DOM 简介
1. DOM 概念
文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言的标准编程接口。

它是一种与平台和语言无关的应用程序接口(API)，它可以动态地访问程序和脚本，更新其内容、结构和 www 文档的风格(目前，HTML 和 XML 文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。

DOM 是一 种基于树的 API 文档，它要求在处理过程中整个文档都表示在存储器中。

总结：W3C 已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构、样式。

2. DOM 树

 

DOM 又称为文档树模型

（1）文档：一个网页可以称为文档，DOM中使用 document 表示

（2）节点：网页中的所有内容都是节点 （标签、属性、文本、注释等），DOM中用 node 表示

（3）元素：网页中的标签，DOM中使用 element 表示

（4）属性：标签的属性

注：DOM 把文档、节点、元素都看作是对象

3. DOM 经常进行的操作
（1）获取元素

（2）对元素进行操作（设置其属性或调用其方法）

（3）动态创建元素

（4）事件（什么时机做相应的操作）

DOM 获取页面元素

1. 获取页面元素
我们想要操作页面上的某部分(显示/隐藏，动画)，需要先获取到该部分对应的元素，才进行后续操作。

2. 根据 id 获取元素
（1）方法：调用 document 对象的 getElementById 方法。

（2）参数：字符串类型的 id 的属性值。

（3）返回值：对应 id 名的元素对象。

（4）注意1：由于 id 名具有唯一性，部分浏览器支持直接使用 id 名访问元素，但不是标准方式， 不推荐使用。

（5）注意2：代码执行顺序，如果 js 在 html 结构之前，会导致结构未加载，不能获取对应id的元素

 

3. 根据标签名获取元素
（1）方法：调用 document 对象的 getElementsByTagName 方法。（普通元素对象也可调用获取内部的元素）

（2）参数：字符串类型的标签名。

（3）返回值：同名的元素对象组成的集合（以伪数组的形式存储）。

（4）注意1：操作数据时需要按照操作数组的方法进行。

（5）注意2：getElementsByTagName 方法内部获取的元素是动态增加的

 

 

4. 元素对象内部获取标签元素
（1）获取的元素对象内部，本身也可以调用根据标签获取元素方法，例如 div 元素对象也可以调用 getElementsByTagName 方法。

（2）目的：缩小选择元素的范围，类似 css 中的后代选择器

（3）父元素必须是单个对象（必须指明是哪一个元素对象），获取时不包括父元素自己。

DOM 事件基本应用
JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为，网页中的每个元素都可以产生某些可以触发 JavaScript 的事件。

1. 事件
（1）事件：在什么时候做什么事

（2）执行机制：触发–响应机制 （例：轮播图、下拉菜单）

（3）绑定事件(注册事件)三要素：

事件源：给谁绑定事件
事件类型：绑定什么类型的事件 （例：click 单击 ）
事件函数：事件发生后执行什么内容，写在函数内部（采用函数赋值形式）