JavaScript基础-WebAPIs（DOM BOM）

目录

     DOM部分：

一、Web API  基本认识：

作用和分类：

什么是DOM：

DOM树：

DOM对象：

二、获取DOM对象：

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

 2、其他获取DOM元素的方法（了解）：

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

1、document.write()

2、元素innerText属性

3、元素innerHTML属性

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

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

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

3、设置修改表单元素属性        

五、定时器

1.间歇函数

案例:倒计时协议

2.延时函数

3.延时函数和间歇函数对比 

综合案例轮播图：

六、事件

1、事件监听

2、两种注册事件（监听事件）的区别

案例：随机点名

2、事件监听的版本（拓展）

3、事件类型

事件案例(一) 小米搜索框

事件案例(二)微博模板

事件案例(三)表单全选和反选

事件案例(四)购物车加减

七、高阶函数

 回调函数：

八、环境对象

九、编程思想

十、案例：

1.练手案例（一）：点击换图片

2.练手案例（二）：同意协议后注册

3.练手案例（三）：验证码倒计时

4.练手案例（四）：显示隐藏密码

5.综合案例tap栏切换

十一、节点：

1.查找节点

        1.1 父节点查找

        1.2 子节点查找

        1.3 兄弟节点查找

2.增加节点

        2.1创建节点：

       2.2追加节点：

        2.3克隆节点：

        案例：学成在线渲染

3.删除节点

节点小案例：创建英雄列表

十二、时间对象

        1.实例化

        2.时间对象方法

        3.时间戳

        获取时间戳的三种方式：（推荐第二种）

         倒计时案例

十三、综合案例（微博发布）

十四、重绘和回流(重排)

十五、综合案例（购物车）推荐值得练一下

 十六、事件对象

        1.获取事件对象

        2.事件对象常用属性

        案例(图片跟着鼠标移动)

         案例(微博发布按回车可以发布)推荐练一练

 十七、事件流

        1.事件流与两个阶段说明

        2.事件捕获和冒泡事件

        3.阻止事件流动

 十八、补充知识点：

        1.阻止事件默认行为：

 十九、事件委托

综合案例（渲染信息）为之后vue铺垫

       案例（风琴特效）

 二十、滚动事件和加载事件

               1. 滚动事件

                 2.加载事件

                 2.2加载事件

  二十一、元素大小和位置

        1.scroll家族

                案例：返回顶部

        2.offset家族

                 案例（仿京东头部导航）

                案例（电梯导航）

        3.client家族

        总结：

综合案例：轮播图

        BOM部分：

一、window对象

        1. BOM(浏览器对象模型)

        2. JS执行机制

                2.1 JS是单线程

                2.2 同步和异步

         2.3 js执行机制

        小结

        3. location对象

        4. navigator对象

        5. history对象

二、本地存储

         2.1 localStorage

         2.2 sessionStorage(了解)

        综合案例（信息表-本地存贮之间的交互）

三、自定义属性

四、正则表达式

        1.正则表达式的介绍

                        1.1 什么是正则表达式：

                       1.2 正则表达式在js中的使用场景：

                        1.3总结

        2.语法

        3.元字符（注意：符号之间不要加空格）

                3.1 常用的元字符

                案例：用户名验证

        4.修饰符

        5. 替换   replace替换

         案例 过滤内容

综合案例 小兔鲜儿

                1.用户注册页面

                2.登录页面

                3.首页的文字变化

---

     DOM部分：

一、Web API  基本认识：

作用和分类：

        作用：就是通过js去操作做html和浏览器

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

什么是DOM：

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

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

        DOM作用：

                        1. 开发网页内容特效

                        2. 实现网页交互

DOM树：

        DOM树是什么：

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

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

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

DOM对象：

        DOM对象：浏览器根据HTML标签自动生成的js对象

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

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

DOM的核心思想：

                将网页内容当作对象来处理

document对象：

                是DOM里提供的对象

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

                        例如；document.write()

                网页所有内容都在document里面

二、获取DOM对象：

        我们想要操作某个标签我们首先就要：选中这个标签

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

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

        1.1 选择匹配的第一个元素

                语法：

                参数：

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

                返回值：

               表示文档中与指定的一组 CSS 选择器匹配的第一个元素，一个 Element对象。

               如果没有匹配到，则返回 null。

                例如：

        1.2 选择匹配的多个元素

                语法：

                        

                参数：

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

                返回值：

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

                例如：

         这种方式得到的是一个伪数组：

                有长度有索引号的数组

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

        想要得到里面的每一个元素则需要遍历（for）的方式来获得

        例如：

              

                

 2、其他获取DOM元素的方法（了解）：

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

1、document.write()

        1.1 只能将文本内容追加到前面的位置

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

2、元素innerText属性

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

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

3、元素innerHTML属性

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

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

小案例：获取随机名字

 

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

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

 例如：

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

        

2.1 通过style属性操作css

                语法：

 例子：        

小案例：修改背景图片

 2.2通过类名（className）操作css

例子：

2.3 通过classList操作控制CSS

        为了解决className容易覆盖类以前的类名，我们可以通过classList的方式追加或者修改类名

        语法：

        

        例子：

3、设置修改表单元素属性        

例子:

五、定时器

1.间歇函数

开发中使用场景;

                        网页中经常需要每隔一段时间自动执行一段代码,不需要手动去触发

                        例如:网页中的倒计时

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

                        定时器有两种,这一种是间歇函数

间歇函数可以开启和关闭

1. 开启定时器

        语法:

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

        间隔时间单位是毫秒(一秒等于1000毫秒)

2.关闭定时器

        语法:

                

         例如:

案例:倒计时协议

        思路: 1. 首先禁用按钮

                 2. 获取对象

                 3. 根据思路编写里面函数

2.延时函数

3.延时函数和间歇函数对比 

综合案例轮播图：

       

六、事件

        什么是事件：

                        事件是在编程时系统内发生的动作或者发生的事件

                        比如用户在网页上单击一个按钮

1、事件监听

                目标：能够给DOM元素添加事件监听

                什么是事件监听：

                        事件监听就是让让程序检测是否有事件产生，一旦事件出发，就立即调用一个函数u做出响应，也称为 注册事件（绑定事件....）

                语法：

 

2、两种注册事件（监听事件）的区别

        

案例：随机点名

1. 简洁版

 2. 优化版

2、事件监听的版本（拓展）

3、事件类型

        部分事件类型:

      

事件案例(一) 小米搜索框

 

事件案例(二)微博模板

 

事件案例(三)表单全选和反选

 

事件案例(四)购物车加减

 

七、高阶函数

        高阶函数可以被简单理解为函数的高级应用，javaScriput 中函数可以被当作为【值】来对待，基于这个特性实现函数的高级应用

        【值】就是javaScript 中的数据，如数值，字符串，布尔，对象等。

 函数表达式：

 回调函数：

        如果将函数A作为参数传递给函数B时，我们称函数A为回调函数

        简单理解： 当一个函数当作参数来传递给另一个函数的时候，这个函数就是回调函数

       常见场景: （间歇函数）

八、环境对象

        目标：能够判断函数运行在不同环境中this所指代的对象

        环境对象指的是函数内部特殊的变量 this， 他代表着当函数运行是所处的环境

        作用：弄清除this的指向，可以让我们代码更简洁

                函数的调用方式不同，this 指代的对象也不同

                【谁调用，this就是谁】是判断this指向的粗略给规则

                直接调用函数，其实相当于是window.函数，所以this指代window

        其实javaScript里面的这个this，和javase里面的差不多 ，this就是指代当前的（个人观点）

九、编程思想

        之一  —— 排他思想

        使用：

        1.干掉所有人

                使用for循环

        2.复活他自己

                通过this或者下标找到自己或者对应的元素

例子：

 

优化后的：

十、案例：

1.练手案例（一）：点击换图片

2.练手案例（二）：同意协议后注册

3.练手案例（三）：验证码倒计时

 

 

4.练手案例（四）：显示隐藏密码

5.综合案例tap栏切换

十一、节点：

DOM节点：

                DOM数里面的每一个内容都是节点

节点类型：

1.查找节点

         节点的关系：

                                父节点

                                子节点

                                兄弟节点

        1.1 父节点查找

                        parentNode属性

                        返回最近一级的父亲节点 找不到返回为null

               语法：

                案例：

       

        1.2 子节点查找

例子：

        1.3 兄弟节点查找

例子：

2.增加节点

        很多情况下，我们需要在页面中增加元素

                        比如点击发布按钮，可以新增一条信息

        一般情况下，我们新增节点，可以按照如下操作

                        1.创建一个新节点

                        2.把创建好的新几点放入到指定元素中去

        2.1创建节点：

                        即创造出一个新的网页元素，在添加到网页内，一般先创建节点，然后在插入节点

                        方法：

                

       2.2追加节点：

                        要想在界面看到，还得插入到某一个父元素中

                        插入到父亲元素的最后一个子元素

                        插入到费用元素中某个子元素的前面

        例子：

        

        2.3克隆节点：

                        特殊情况下，我们新增节点，按照如下操作：

                                复制一个原有的节点

                                把复制的节点放入到指定元素的内部

                方法：

        

         例子：

        案例：学成在线渲染

 

     

3.删除节点

 例子：

节点小案例：创建英雄列表

十二、时间对象

                目的：掌握时间对象，可以让网页显示时间

                时间对象：可以用来掌握时间的对象

                作用：可以得到当前系统时间

        1.实例化

                        创建一个时间对象并获取时间

                        

                 例子：            

        2.时间对象方法

         例子：

        3.时间戳

         主要用来倒计时

          什么是时间戳：

               是指1970年01月01日00时00分00秒起至现在的毫秒数，他是一种特殊的计量方式

        获取时间戳的三种方式：（推荐第二种）

例子：

        

         倒计时案例

 

十三、综合案例（微博发布）

十四、重绘和回流(重排)

 

        重绘和回流(重排)

十五、综合案例（购物车）推荐值得练一下

资源在这里：

https://pan.baidu.com/s/18dCaiOaGwtEmBsPwnwDLlQ?pwd=2jys

 十六、事件对象

        事件对象是什么

                也是个对象，这个对象里面有事件触发时的相关信息

                例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息

        1.获取事件对象

                如何获取事件对象

                        在事件绑定的回调函数的第一个参数就是事件对象

                        一般命名为event ， en ， e

        2.事件对象常用属性

         pageX/pageY

                获取光标的位置相对于文档

              

        案例(图片跟着鼠标移动)

                分析:

                        1.鼠标在页面中，用mousemove事件

                        2.不断把鼠标在页面中的坐标位置给left和top值即可

        

         案例(微博发布按回车可以发布)推荐练一练

资源在这里：

                https://pan.baidu.com/s/1S6MURZ_LN9KMwoM7CuXllg?pwd=unlc

 十七、事件流

                事件流指的是事件完成执行过程中的流动路径

        1.事件流与两个阶段说明

        两个阶段：捕获和冒泡 （可以联想dom树层级查找）

        简单来说：捕获从父亲到子, 冒泡从子到父亲

       

        2.事件捕获和冒泡事件

        事件冒泡：

         事件捕获：

        3.阻止事件流动

 想要阻断谁就给谁加。

 十八、补充知识点：

        1.阻止事件默认行为：

 十九、事件委托

                事件委托的好处：

                        事件委托是利用事件流的特征解决一些开发需求的知识技巧

        例子：

        

综合案例（渲染信息）为之后vue铺垫

还有一个小BUG 就是当数据全部删除之后 就无法录取新的数据。原因是因为 我们的学号是按照数组里最后一个学号的来获取的 所以当数据全部删除之后 新录入的就没有办法得到一个学号 所以就无法生成新的数据。

       案例（风琴特效）

 二十、滚动事件和加载事件

               1. 滚动事件

                 2.加载事件

                 2.2加载事件

  二十一、元素大小和位置

        掌握好元素大小和位置的获取方法，为后续网页特效打基础

        1.scroll家族

例子：

                案例：返回顶部

 

        2.offset家族

                 案例（仿京东头部导航）

                案例（电梯导航）

        3.client家族

        总结：

综合案例：轮播图

资源：https://pan.baidu.com/s/1JGcAX258AshvZv2nln2nPw?pwd=4s88

       

        BOM部分：

一、window对象

        目标：知道各个BOM对象的功能含义

        1. BOM(浏览器对象模型)

        

        2. JS执行机制

                2.1 JS是单线程

                2.2 同步和异步

 

         2.3 js执行机制

        小结

        3. location对象

 

 

        4. navigator对象

        5. history对象

二、本地存储

         2.1 localStorage

        注意点：key值要打引号

                       存储简单数据类型可以直接存

                    因为本地存储只能存储字符串 所以才存入和取出的时候需要利用JSON转换

                    存储复杂数据类型(引用数据类型) 需要转换为JSON（属性和值都是双引号包含）字符串

 

         2.2 sessionStorage(了解)

        综合案例（信息表-本地存贮之间的交互）

 

三、自定义属性

规范后：（用下面的方法）

四、正则表达式

        1.正则表达式的介绍

                        1.1 什么是正则表达式：

                       1.2 正则表达式在js中的使用场景：

                        1.3总结

        2.语法

                步骤：1.定义规则 ，2.查找（检测·）

                在js里面定义正则表达式有2种

        

 

 

        3.元字符（注意：符号之间不要加空格）

        参考:MDN https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions

当然还可以利用正则表达式工具https://c.runoob.com/front-end/854/

                3.1 常用的元字符

                        1.边界符(表示位置，开头和结尾，必须用什么开头，用什么结尾)

                        2.量词（表示重复的次数）

                        3.字符类（比如 \d 表示 0~9）

                案例：用户名验证

 输入条件改为2~8个中文

 

        4.修饰符

        

        5. 替换   replace替换

         案例 过滤内容

             

综合案例 小兔鲜儿

源码：https://pan.baidu.com/s/1NS0IsO4uHL-pacYuQgyv0w?pwd=xxzb

                1.用户注册页面

 

                2.登录页面

 

                3.首页的文字变化

 

这里是本人学习Web前端的一些笔记，可以供大家一起学习和交流！！！