（黑马程序员）JavaScript DOM和BOM第一天学习笔记

一、Web API基本认知

1.作用和分类

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

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

2.什么是DOM

DOM是用来呈现以及与任意HTML或XML文档交互的API

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

• DOM作用：

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

3.DOM树

• DOM树是什么

将HTML文档以树状结构直观的呈现出来，我们称之为文档树或者DOM树

描述网页内容关系的名词

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

4.DOM对象（重要）

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

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

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

• 核心思想：把网页的内容当作对象处理

• document对象：

是DOM里提供的一个对象

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

例如：document.write()

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

二、获取DOM对象

1.根据CSS选择器来获取DOM元素（重点）

1.1选择匹配的第一个元素

语法**

document.querySelector('CSS选择器');

参数**

包含一个或多个有效的CSS选择器 字符串

返回值

CSS选择器匹配的第一个元素，一个HTMLElement对象

如果没有匹配的，则返回null

1.2选择匹配的多个元素

语法

document.querySelectorAll('CSS选择器');

参数**

包含一个或多个有效的CSS选择器 字符串

返回值

CSS选择器匹配的NodeList对象集合

得到的是一个伪数组：

有长度有索引号的数组

但是没有pop(),push()等数组方法

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

注意事项

哪怕只有一个元素，通过querySelectorAll()获取过来的也是一个伪数组，里面只有一个元素罢了。

例如

document.querySelectorAll('ul li')

三、设置/修改DOM元素内容

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

1.document.write()***

只能将文本内容追加到</body>前面的位置

文本中包含的标签会被解析

2.元素.innerText属性

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

文本中包含的标签会被解析

四、设置/修改DOM元素属性**

1.修改/设置元素常用属性

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

• 最常见的属性比如: href、title、src等

语法：

对象.属性 = 值

举例说明

// 1. 获取元素
let pic = document.querySelector('img');
// 2. 操作元素
pic.src = './images/b02.jpg';
pic.title = '这是一个图片';

2.设置/修改元素样式属性

还可以通过js设置/修改标签元素的样式属性

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

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

学习路径：

1. 通过style属性操作css

   语法：

   对象.style.样式属性 = 值

   // 1.获取元素
   let box = document.querySelector('div');
   // 2.修改背景颜色
   box.style.backgroundColor = 'red';
   box.style.width = '500px';
   box.style.marginTop = '100px';

2. 操作类名(className)操作css

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

   语法：

   //active是一个css类名
   元素.className = 'active';

   注意：

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

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

3. 通过calssList操作类控制css

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

   语法：

   // 追加类名
   box.classList.add('active');
   // 移除类名
   box.classList.remove('active');
   // 切换类
   box.classList.toggle('active')

3.设置/修改 表单元素 属性

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

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

获取：DOM对象.属性名

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

表单.value = '小米手机';
表单.type = 'password';

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

比如：disabled、checked、selected

五、定时器-间接函数**

• 网页中经常会需要一种功能:每隔一段时间需要自动执行一段代码，不需要我们手动去触发

• 例如：网页中的倒计时

• 要实现这种需求，需要定时器函数

目标：能够使用定时器函数重复执行代码

1.开启定时器

setInterval(函数，间隔时间)

作用:每隔一段时间调用这个函数

间隔时间单位是毫秒

举例说明

setInterval(() => {
      console.log('高薪就业');
}, 1000);

2.关闭定时器

let 变量名 = setInterval(函数, 间隔时间);
clearInterval(变量名);