DOM对象

1,变量声明

const 常量优先 ; 如果后面要修改，再改为let

建议数组和对象使用const来声明，基本数据类型一般用let

2,API 作用和分类

作用：使用js去操作html和浏览器

分类：DOM(文档对象模型），BOM（浏览器对象模型）

3,什么是DOM

DOM是用来呈现以及与任意HTML或XML文档交互的API，即是浏览器提供的一套专门用来操作网页内容的功能

作用：开发网页内容特效和实现用户实现

（1）DOM树

DOM树将HTML文档以树状结构直观地表现出来

DOM树直观地体现了标签与标签之间的关系

（2）DOM对象

DOM对象：浏览器根据html标签生成的js 对象

1，所有的标签属性都可以在这个对象上面找到

2，修改这个对象的属性会自动映射到标签身上

DOM核心思想：把网页当作对象来处理

document对象：

1，是DOM里提供的一个对象

2，所以他提供的属性和方法都是用来访问和操作网页内容的

3，网页所有内容都在document里面

4，获取DOM对象

1.根据CSS选择器来获取DOM元素

（1）选择匹配的第一个元素，可以直接修改

返回值：CSS选择器匹配的第一个元素，一个HTMLElement对象；

（2）选择匹配的多个元素，不能直接修改

document.querySelectAll( ' CSS选择器 ' )

返回值： CSS选择器匹配的 NodeList 对象集合

结果：得到一个伪数组，没有pop( )等方法

2，其他获取DOM元素方法(了解)

(1)根据id获取一个元素

document.getElementById( 'nav')

（2）根据标签获取一类元素 ，获取页面 所有的div

document.getElementByTagName( 'div')

(3)根据类名获取元素，获取页面所有类名为w的

document.getElementByClassName( 'w')

5，操作元素内容

目标：能够修改元素的文本更换内容

1，对象.innerText属性

将文本内容添加/更新到任意标签位置

显示纯文本，不解析标签

2，对象.innerHTML属性

将文本内容添加/更新到任意标签位置

会解析标签，多标签建议使用模块字符

6，操作元素属性

1，常用属性

最常见的属性：href , title ,src等

语法：对象.属性 = 值

2，样式属性

2.1 通过style属性操作CSS

对象.style. 样式属性 = 值（操作css属性需要遵循驼峰命名法

修改的样式比较少的情况下有优势

生成的是行内样式表，权重比较高

2.2 操作类名（className）操作CSS

适合于修改的样式比较多的情况，比较简洁

会覆盖原来的类名

2.3 通过classList 操作类控制CSS

为了解决className容易覆盖以前的类名，通过classList方式来追加和和删除类名，不替换以前的类名

3，表单元素属性

表单属性中添加就有效果，移除就没有效果，一律用布尔值表示，

如果为true代表添加了该属性，如果为false代表移除了该属性

disabled(禁用) , checked（勾选） , selected（下拉菜单）

4，自定义属性

在html5中推出来了专门的date-自定义属性

在DOM对象上一律以dataset对象方式获取

7，定时器-间歇函数

定时器函数可以根据时间自动重复执行某些代码

定时器函数可以开启和关闭定时器

1，开启定时器

2，关闭定时器