DOM文档对象模型

一.DOM

DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API
DOM是浏览器提供的一套专门用来 操作网页内容 的功能
其作用是开发网页内容特效和实现用户交互

1.DOM树

DOM树将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM树，是用来描述网页内容关系的名词
作用：文档树直观的体现了标签与标签之间的关系

2.DOM对象

DOM对象：浏览器根据html标签生成的 JS对象
所有的标签属性都可以在这个对象上面找到
修改这个对象的属性会自动映射到标签身上
DOM的核心思想是把网页内容当做对象来处理
document 对象是 DOM 里提供的一个对象，所以它提供的属性和方法都是用来访问和操作网页内容的
例：document.write()，网页所有内容都在document里面

二.获取DOM元素

查找元素 DOM 元素就是利用 JS 选择页面中标签元素

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

1.选择匹配的第一个元素
语法：

参数:
包含一个或多个有效的CSS选择器字符串（加引号）
返回 值：
CSS选择器匹配的第一个元素,一个 HTMLElement对象。
如果没有匹配到，则返回null。

2.选择匹配的多个元素
语法：

参数:
包含一个或多个有效的CSS选择器字符串（加引号）
返回值：
CSS选择器匹配的NodeList 对象集合
最终得到的是一个伪数组：
有长度有索引号的数组
但是没有 pop() push() 等数组方法
想要得到里面的每一个对象，则需要遍历（for）的方式获得。
注意哪怕只有一个元素，通过querySelectAll() 获取过来的也是一个伪数组，里面只有一个元素而已

2. 其他获取DOM元素方法

该方法不常用

三.操作元素内容

DOM对象都是根据标签生成的,所以操作标签本质上就是操作DOM对象。
如果想要修改标签元素的里面的 内容，则可以使用如下几种方式：
1.对象.innerText 属性
2.对象.innerHTML 属性

1.innerText属性

对象.innerText 属性
将文本内容添加/更新到任意标签位置
显示纯文本，不解析标签

2.innerHTML属性

对象.innerHTML 属性
将文本内容添加/更新到任意标签位置
会解析标签，多标签建议使用模板字符

一般使用innerHTML属性

四.操作元素属性

1.操作元素常用属性

通过 JS 设置/修改标签元素属性，比如通过修改src属性更换图片
最常见的属性比如： href、title、src 等
语法：

举例：

2.操作元素样式属性

2.1.通过 style 属性操作 CSS

语法：

注意：
1.修改样式通过style属性引出
2.如果属性有-连接符，需要转换为小驼峰命名法
3.赋值的时候，需要的时候不要忘记加css单位
举例：

2.2. 操作类名(className) 操作CSS

如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式。
语法：

注意：
1.由于class是关键字, 所以使用className去代替
2.className是使用新值换旧值（即会覆盖原本的类名）
如果是需要添加一个类,需要保留之前的类名
（元素.className=‘原本的类名 添加的类名’）

2.3. 通过classList操作类控制CSS

为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名
语法：

3.操作表单元素属性

表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框
获取: DOM对象.属性名
设置: DOM对象.属性名 = 新值

表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示 如果为true 代表添加了该属性 如果是false 代表移除了该属性
比如： disabled、checked、selected

4.自定义属性

标准属性 : 标签自带的属性 比如class id title等, 可以直接使用点语法操作
自定义属性：
在html5中推出来了专门的data-自定义属性
在标签上一律以data-开头
在DOM对象上一律以dataset对象方式获取