作用和分类

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

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

什么是DOM

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

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

• DOM作用

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

DOM树

• DOM树是什么

  1. 将HTML我就以树状结构直观表现出来，外卖称之为文档树或DOM树

  2. 描述网页内容关系的名词

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

 

 

DOM对象（重要）

• DOM对象：浏览器工具HTML标签生成的JS对象

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

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

• DOM的核心思想

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

• document对象

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

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

     例：document.write()

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

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

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

语法

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

参数

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

返回值：

CSS选择器匹配的第一个元素，一个HTMLElement对象。如果没有匹配到，则返回null。

2.选择匹配的多个元素

语法

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

参数：

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

返回值：

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

例如

document.querySelectorAll('ul li');

操作元素内容

元素innerText属性

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

• 显示纯文本，不解析标签

 

元素innerHTML属性

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

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

 

操作元素常用属性

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

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

语法

对象.属性 = 值

 

操作元素样式属性

1.通过 style 属性操作CSS

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

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

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

  学习路径：

  1. 通过style属性操作CSS

  2. 操作类名（className）操作CSS

  3. 通过classList操作类控制CSS

 

通过style属性操作CSS

语法：

对象.style.样式属性 = 值

 

2.操作类名（calssName）操作CSS

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

• 语法：

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

注意：

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

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

通过classList操作控制CSS

• 为了解决className容易覆盖一起的类名，我们开源通过classList方式追加和删除类名

语法

    const box = document.querySelector('.box');
    // //追加一个类 不会把原来的类名覆盖
    // box.classList.add('active');
​
    // //删除一个类
    // box.classList.remove('box');
​
    //切换一个类   
    box.classList.toggle('active');

操作表单元素 属性

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

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

  1. 获取：DOM对象.属性名

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

表单.value = '用户名';
表单.type = 'password';

 

自定义属性

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

自定义属性：

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

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

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

 

定时器-间歇函数

定时器函数介绍

目标：能够说出定时器函数在开发中的使用场景

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

• 例如：网页中的倒计时

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

• 定时器函数有两种

 

 

定时器-间歇函数

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

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

1.开启定时器

setIntreval(函数,间隔时间);

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

• 间隔时间单位是毫秒

举例说明

function repeat(){
    console.log('前端程序员，就是头发多咋滴~~');
}

//	每隔一秒调用repeat函数
setIntreval(repeat,1000);

注意

1. 函数名字不需要加括号

2. 定时器返回的是一个id数字

2.关闭定时器

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

一般不会刚创建就停止，而是满足一定条件再停止

    function fun() {
      console.log("123");
    }
    let num = setInterval(fun, 1000);
    console.log(num);
    clearInterval(num);