文章目录
前言
前段时间学习了JavaScript基础知识，现在开始进入Web API，DOM对象的学习。
学习目标
- 掌握获取元素的集中方法
- 掌握修改元素的内容和属性的方法
一、Web API介绍是什么？
温馨提示：学习 Web API 可以结合前面学习内置对象方法的思路学习
二、DOM 简介
2.1 什么是DOM？
- 文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言（html或者xhtml）的标准编程接口。
- W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。
- DOM是W3C组织制定的一套处理 html和xml文档的规范，所有的浏览器都遵循了这套标准。
2.2 DOM树
- 文档：一个页面就是一个文档，DOM中使用document表示。
- 节点：网页中的所有内容，在文档树中都是节点（标签、属性、文本、注释等），使用node表示。
- 标签节点：网页中的所有标签，通常称为元素节点，又简称为“元素”，使用element表示。
DOM把以上内容（文档、元素、节点）都看作是对象。
三、获取元素的方法合集
3.1 通过ID来获取元素
| 类别 | 内容 |
|---|---|
| 语法 | document.getElementById(‘id’) ; |
| 作用 | 根据ID获取元素对象 |
| 参数 | id值，区分大小写的字符串 |
| 返回值 | 元素对象 或 null |
3.2 通过标签名来获取元素
| 类别 | 内容 |
|---|---|
| 语法 | document.getElementsByTagName(‘标签名’)； 或者element.getElementsByTagName(‘标签名’) ； |
| 作用 | 根据标签名获取元素对象 |
| 参数 | 标签名 |
| 返回值 | 元素对象集合（伪数组，数组元素是元素对象） |
3.3 通过class来获取元素
| 类别 | 内容 |
|---|---|
| 语法 | document. getElementsByClassName(‘类名’)； |
| 作用 | 根据class获取元素对象 |
| 参数 | class值；多个类名使用空格分隔 |
| 返回值 | NodeList 对象，表示指定类名的元素集合 |
3.4 通过选择器来获取元素
| 方法 | 内容 |
|---|---|
| document. querySelector（‘选择器’）; | 返回指定选择器的第一个元素对象 |
| document. querySelectorAll(‘选择器’); | 返回指定选择器的所有元素对象集合 |
3.5 获取body和html元素
| 方法 | 内容 |
|---|---|
| document.body； | 返回body元素对象 |
| document.documentElement； | 返回html元素对象 |
四、操作元素
JavaScript的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内容、属性等。
4.1 改变元素内容（获取或设置）
| 方法 | 内容 |
|---|---|
| element.innerText | innerText会去除空格和换行 (获取内容时)； innerText不会识别html(设置内容时) |
| element.innerHTML | innerHTML会保留空格和换行；innerHTML会识别 |
4.2 常用元素的属性操作
获取属性的值
元素对象.属性名
例：img.src、img.title
设置属性的值
元素对象.属性名 = 值
例：img.src = 'images/ldh.jpg';img.title = '刘德华';
4.3 表单元素的属性操作
表单元素中有一些属性如：disabled、checked、selected，元素对象的这些属性的值是布尔型。
例：input.value = '被点击了';表单里面的值 文字内容是通过 value 来修改的。
例：btn.disabled = true;如果想要某个表单被禁用 不能再点击 disabled 我们想要这个按钮 button禁用。
4.4 样式属性操作
方式1：通过操作style属性
元素对象的style属性也是一个对象！
元素对象.style.样式属性 = 值;
div.style里面的属性 采取驼峰命名法
例：this.style.backgroundColor = 'purple';this.style.width = '250px';
方式2：通过操作className属性
元素对象.className = 值;
因为class是关键字，所有使用className。
例：this.className = 'first change';如果想要保留原先的类名，我们可以这么做 多类名选择器。change是修改的样式，写在css里面。
4.5 自定义属性操作
获取属性值：
element.getAttribute('属性')；
设置属性值：element.setAttribute('属性', '值');
移出属性：element.removeAttribute('属性');
H5给我们新增了自定义属性：
- dataset 是一个集合里面存放了所有以data开头的自定义属性。
- 如果自定义属性里面有多个-链接的单词，我们获取的时候采取 驼峰命名法。
总结
看完这篇博客，就可以完成我们的学习目标。加油哦！！！
