Day1 DOM--获取元素

1.1 Web API 基本认知

（1）Web API 作用和分类

1.作用：

• 就是使用 JS 去操作 html 和浏览器

2.分类：

• DOM（文档对象模型）

• BOM（浏览器对象模型）

（2）什么是DOM

1.DOM（Document Object Model —— 文档对象模型）是用来呈现以及与任意 HTML 或 XML 文档交互的API

2.白话文：DOM是浏览器提供的一套专门用来操作网页内容的功能

3.DOM作用：

• 开发网页内容特效和实现用户交互

（3）DOM树

1.DOM树是什么：

• 将 html 文档以树状结构直观的表现出来，我们称之为文档树或DOM树

• 描述网页内容关系的名词

• 作用：文档树直观的体现了标签与标签之间的关系

（4）DOM对象（重要）

1.DOM对象：

• 浏览器根据 html 标签生成的 JS 对象

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

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

2.DOM的核心思想：

• 把网页内容当做对象来处理

3.document 对象：

• 是DOM里提供的一个对象

• 所以它提供的属性和方法都是用来访问和操作网页内容的（例如：document.write（））

• 网页所有内容都在document里面

1.2 获取DOM对象

（1）CSS选择器获取（重点）

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

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

匹配得到多个元素，存在一个伪数组内，伪数组：

1.有长度有索引号的数组，但是没有 pop（） push（）等数组方法

2.想要得到里面的每一个对象，则需要使用遍历（for）的方式获得

3.哪怕只有一个元素，通过 querySelectorAll（）获取过来的也是一个伪数组，里面只有一个元素而已

3.整合案例：

  
我的首页
  
产品介绍
  
联系方式

（2）其他方式（了解）

1.3 操作元素内容

（1）.innerText 属性

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

2.显示纯文本，不解析标签

我是一个div

（2）.innerHTML 属性

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

2.可以解析标签，多个标签建议使用模版字符串

我是一个div

3.整合案例：从数组随机抽取一等奖、二等奖、三等奖，显示到对应的标签里面

  
一等奖: 
  
二等奖: 
  
三等奖: 

1.4 操作元素属性

（1）操作元素常用属性

1.可以通过 JS 设置/修改标签元素属性，比如通过 src 更换图片

2.最常见的属性比如：href、title、src 等

3.语法：对象.属性 = 值

4.案例：页面刷新输出随机图片

（2）操作元素样式属性

1.通过 JS 设置/修改标签元素的样式属性

• 比如通过轮播图小圆点自动更换颜色样式

• 点击按钮可以滚动图片这是移动的图片的位置 left 等等

2.通过 style 属性操作 CSS

• 语法：

•  注意：

• 修改样式通过 style 属性引出

• 如果属性有 - 连接符，需要转换为小驼峰命名法

• 赋值的时候，需要的时候不能忘记加CSS单位

•  案例：页面刷新，随机更换背景图片

• 操作类名（className）操作CSS

1.如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于CSS类名的形式

2.语法：

3.注意：

• 由于class是关键字，所以使用className去代替

• className是使用新值换旧值，如果需要添加一个类，需要保留之前的类名

4.通过 classList 操作类控制CSS

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

123

（3）操作表单元素属性

1.表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框

2.正常的有属性有取值的，跟其他标签属性没有任何区别

3.语法：

• 获取：DOM对象.属性名

• 设置：DOM对象.属性名=新值

4.表单属性中添加就有效果，移除就没有效果，一律使用布尔值表示，如果为 true 代表添加了该属性，如果是 false 代表移除了该属性；比如：

（4）自定义属性

1.标准属性：

• 标签天生自带的属性，比如 class、id、title 等，可以直接使用点语法进行操作，例如：disabled、checked、selected

2.自定义属性：

• 在html5中推出了专门的 data-自定义属性

• 在标签上一律以data-开头

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

3.语法：

1
2
3
4
5
6