1、DOM简介

1.1、什么是DOM

文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口

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

• 文档：一个页面就是一个文档，DOM中使用doucument来表示

• 元素：页面中的所有标签都是元素，DOM中使用 element 表示

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

DOM 把以上内容都看做是对象

2、获取元素

2.1、如何获取页面元素

DOM在我们实际开发中主要用来操作元素。

我们如何来获取页面中的元素呢?

获取页面中的元素可以使用以下几种方式:

• 根据 ID 获取

• 根据标签名获取

• 通过 HTML5 新增的方法获取

• 特殊元素获取

2.2、根据ID获取

使用 getElementByld() 方法可以获取带ID的元素对象

使用 console.dir() 可以打印我们获取的元素对象，更好的查看对象里面的属性和方法。

示例

2.3、根据标签名获取

根据标签名获取，使用 getElementByTagName() 方法可以返回带有指定标签名的对象的集合

• 因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历

• 得到元素对象是动态的

• 返回的是获取过来元素对象的集合，以伪数组的形式存储

• 如果获取不到元素，则返回为空的伪数组(因为获取不到对象)

2.4、根据标签名获取

还可以根据标签名获取某个元素（父元素）内部所有指定标签名的子元素,获取的时候不包括父元素自己

注意：父元素必须是单个对象(必须指明是哪一个元素对象)，获取的时候不包括父元素自己

2.5、获取特殊元素

①获取body元素

返回body元素对象

②获取html元素

返回html元素对象

3、事件基础

3.1、事件概述

JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。

简单理解： 触发— 响应机制。

网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。

3.2、事件三要素

1. 事件源(谁)

2. 事件类型(什么事件)

3. 事件处理程序(做啥)

3.3、执行事件的步骤

1. 获取事件源

2. 注册事件(绑定事件)

3. 添加事件处理程序(采取函数赋值形式)

3.4、鼠标事件

4、操作元素

JavaScript 的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内容 、属性等。注意以下都是属性

4.1、改变元素内容

从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉。

起始位置到终止位置的全部内容，包括HTML标签，同时保留空格和换行

4.2、改变元素属性

4.3、改变样式属性

我们可以通过 JS 修改元素的大小、颜色、位置等样式。

• 行内样式操作

• 类名样式操作

注意：

1.JS里面的样式采取驼峰命名法，比如 fontSize ，backgroundColor

2.JS 修改 style 样式操作 ，产生的是行内样式，CSS权重比较高

3.如果样式修改较多，可以采取操作类名方式更改元素样式

4.class 因为是个保留字，因此使用className来操作元素类名属性

5.className 会直接更改元素的类名，会覆盖原先的类名

4.5、排他思想

如果有同一组元素，我们相要某一个元素实现某种样式，需要用到循环的排他思想算法：

1. 所有元素全部清除样式（干掉其他人）

2. 给当前元素设置样式 （留下我自己）

3. 注意顺序不能颠倒，首先干掉其他人，再设置自己

4.6、自定义属性

4.6.1、获取属性值

• 获取内置属性值(元素本身自带的属性)

• 获取自定义的属性

4.6.2、设置属性值

• 设置内置属性值

• 主要设置自定义的属性

4.6.3、移除属性

5、节点的常用属性和方法

节点就是标签对象

方法： 通过具体的元素节点调用 

getElementsByTagName() 方法，获取当前节点的指定标签名孩子节点 

appendChild( oChildNode ) 方法，可以添加一个子节点，oChildNode 是要添加的孩子节点

属性：

childNodes 属性，获取当前节点的所有子节点 

firstChild 属性，获取当前节点的第一个子节点 

lastChild 属性，获取当前节点的最后一个子节点 

parentNode 属性，获取当前节点的父节点 

nextSibling 属性，获取当前节点的下一个节点 

previousSibling 属性，获取当前节点的上一个节点 

className 用于获取或设置标签的class 属性值 

innerHTML 属性，表示获取/设置起始标签和结束标签中的内容 

innerText 属性，表示获取/设置起始标签和结束标签中的文本

练习：DOM 查询练习