Web APIs 学习记录_web apis的学习内容-优快云博客

本文链接：https://blog.youkuaiyun.com/zhaoshengmeyan/article/details/140610337

Dom获取&属性操作

Web API 基本认知

1.1作用与分类

作用：

使用JS来操作HTML和浏览器

分类：

DOM (文档对象模型)
BOM（浏览器对象模型）

1.2DOM

DOM（Document Object Model——文档对象模型）

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

1.3DOM树

DOM树：将HTML文档以树状图结构表观出来

直观的体现了标签与标签之间的关系

示例：

1.4DOM对象

DOM对象：

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

所有的标签属性都可以在这个对象上面找到
修改这个对象的属性会自动映射到标签身上

document对象：

DOM里面提供的一个对象
其属性和方法用来访问和操作浏览器
网页所有内容都在document里

获取DOM元素

2.1根据CSS选择器获取DOM元素

1.选择第一个匹配元素

语法：

        document.querySelector('css选择器')

参数：css选择器

返回值：CSS选择器匹配的第一个元素,一个 HTMLElement对象。

    <span class="test01">111</span>
    <script>
        const ccc = document.querySelector('.test01');
        console.log(ccc);
    </script>

运行结果：

注：如果没有匹配到，返回null

2. 多个元素

语法：

        document.querySelectorAll('css选择器')

参数：一个或多个css选择器

返回值： CSS选择器匹配的NodeList 对象集合

    <span class="test01">111</span>
    <h1 class="test02">222</h1>
    <script>
        const sss=document.querySelectorAll('.test01 .test02');
        console.log(sss);
    </script>

返回的是一个伪数组

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

注：以上二者参数必须是字符串加引号

2.2其他获取方法

document.getElementById('ID')	根据id获取第一个元素
document.getElementsByTagName('标签名')	获取所有标签为传入标签的
document.getElementsByClassName('类名')	获取所有类为传入类名的

操作元素内容

DOM对象都是根据标签生成的,所以操作标签,本质上就是操作DOM对象

3.1元素innerText属性

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

显示纯文本，不解析标签

示例：

    <span class="test01">111</span>
    <script>
        const text=document.querySelector('.test01');
        text.innerText='????';
    </script>

3.2元素.innerHTML 属性

作用同innerText属性

能识别文本，会解析标签

补充：

解析标签通常是指HTML或XML文档处理过程中的一个步骤，目的是识别和提取出文档中的特定标记或元素。

操作元素属性

4.1操作元素常用属性

语法：

对象 . 属性 = 值

作用：设置/修改标签元素属性

示例：

    <a href="https://developer.mozilla.org/zh-CN/" class="test01">11</a>
    <script>
        const sss=document.querySelector('.test01');
        sss.href='https://www.bilibili.com/';
    </script>

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

4.2 操作元素样式属性

作用：设置/修改标签元素的样式属性

1.通过 style 属性操作CSS

语法：

对象名 . style . 样式属性 = 值

    <span class="test01">1111</span>
    <style>
        .test01 {
            font-size: 50px;
            color: aqua;
        }
    </style>
    <script>
        const sss = document.querySelector('.test01');
        sss.style.fontSize = '200px';
        sss.style.color = 'red';
    </script>

注：加单位

2.给元素替换类名

语法：

元素 . className = ‘ 类名 ’

    <div>22222</div>
    <style>
        .test01 {
            font-size: 50px;
            color: aqua;
        }
    </style>
    <script>
        const ccc = document.querySelector('div');
        ccc.className = 'test01';
    </script>

注：新类名会替换掉旧类名

3. 通过 classList 修改类名

元素 . classList . add（‘类名’）	追加类名
元素 . classList . remove（‘类名’）	删除类名
元素 . classList . toggle（‘类名’）	切换类

4.3 操作表单元素属性

1.一般的属性，跟其他的标签属性没有任何区别

获取: DOM对象.属性名

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

2.表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示

如果为true 代表添加了该属性如果是false 代表移除了该属性

例：disabled、checked、selected

定时器-间歇函数

每隔一段时间自动执行的一段代码

需要设置定时器函数，其中之一为间歇函数

5.1开启定时器

语法：

setInterval（函数名，间隔时间）

        //开启
        function test01(){
            console.log('hollow');
        }
        setInterval(test01,1000);

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

        let test02=setInterval(
            function(){
                console.log('???');
            },
            1000
        )

注：

时间单位为ms
函数名不用加括号

5.2关闭计时器

语法：

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

clearInterval(变量名)

        let test02=setInterval(
            function(){
                console.log('???');
            },
            1000
        )
        clearInterval(test02);

Dom事件基础

事件监听

事件：

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

例：用户在网页上单击一个按钮

事件监听：

让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应

也称为绑定事件或者注册事件

事件监听三要素：

事件源：那个dom元素被事件触发了，要获取dom元素
事件类型：用什么方式触发，比如鼠标单击 click、鼠标经过 mouseover 等
事件调用的函数：要做什么事

事件绑定

语法：

事件源.on事件 = function() { } //L0

        const test01=document.querySelector('.but');
        test01.onclick=function(){
            alert('?!');
        }

或

事件源 . addEventListener（‘事件类型’，需要执行的函数）//L2

    <button class="test01">按钮</button>
    <script>
        const but = document.querySelector('.test01');
        but.addEventListener('click', function () {
            alert('test')；
        });
    </script>

on方式会被覆盖，addEventListener方式可绑定多次，拥有事件更多特性，推荐使用

事件类型

1.鼠标事件

click 鼠标点击
mouseenter 鼠标经过
mouseleave 鼠标离开

2.焦点事件

focus 获得焦点
blur 失去焦点

3.键盘事件

Keydown 键盘按下触发
Keyup 键盘抬起触发

4.文本事件

input 用户输入

事件对象

事件对象：事件触发时，所建立的对象，存储事件触发时的相关信息

例：鼠标点击事件，存储鼠标点击位置等信息

3.1获取事件对象

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

        but.addEventListener('click', function (e) {
            alert('test');
        });

其中函数参数的 e 就是事件对象

一般命名为event、ev、e

3.2事件对象常用属性

type 获取当前的事件类型
clientX/clientY 获取光标相对于浏览器可见窗口左上角的位置
offsetX/offsetY 获取光标相对于当前DOM元素左上角的位置
key 用户按下的键盘键的值
target 用户点击的对象

其它

环境对象

环境对象：函数内部特殊变量 this ，代表着当前函数运行时所处的环境

this指向：一般而言，谁调用， this 就是指向谁

回调函数

把函数当做另外一个函数的参数传递，这个当作参数的函数就叫回调函数

Dom事件进阶

事件流

1.1概念

事件流：事件完整执行过程中的流动路径

两个阶段：

捕获阶段从父级到子级
冒泡阶段从子级到父级

用 L0 事件监听，则只有冒泡阶段，没有捕获

L2事件监听默认是冒泡

1.2事件捕获

事件捕获：从DOM的根元素到后代，开始去执行对应的事件 (从外到里）

触发事件捕获语法：

元素对象 . addEventListener（‘事件类型’，需要执行的函数，是否使用捕获机制）

第三个参数，传入true，触发捕获
默认为false，触发冒泡

    <div class="father">
        <div class="son">1</div>
    </div>
    <style>
        .father {
            width: 200px;
            height: 200px;
            background-color: aqua;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
    <script>
        const test01 = document.querySelector('.father');
        const test02 = document.querySelector('.son');
        test01.addEventListener('click', function () {
            alert('father');
        }, true);
        test02.addEventListener('click', function () {
            alert('son');
        }, true);
    </script>

运行结果：

如图：点击蓝色，先后弹出father，son；点击浅蓝色，只弹出father

1.3事件冒泡

事件冒泡：当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡

与事件捕获相反，当一个元素触发事件后，会依次向上调用所有父级元素的 同名事件

是默认存在的

其他格式同事件捕获代码，将第三个参数改为false，或者删除，结果与事件捕获相反

    <script>
        const test03 = document.querySelector('.father0');
        const test04 = document.querySelector('.son0');
        test03.addEventListener('click', function () {
            alert('father');
        }, false);
        test04.addEventListener('click', function () {
            alert('son');
        }, false);
    </script>

1.4阻止事件流动

语法：

事件对象 . stopPropagation（）

不光在冒泡阶段有效，捕获阶段也有效

需要事件对象

    <script>
        const test01 = document.querySelector('.father');
        const test02 = document.querySelector('.son');
        test01.addEventListener('click', function (e) {
            alert('father');
            e.stopPropagation();
        }, true);
        test02.addEventListener('click', function () {
            alert('son');
        }, true);
    </script>

如是，只返回father，son被阻止

阻止元素默认行为：

            e.preventDefault();

1.5解绑事件

on事件，直接使用null覆盖即可

        test01.onclick=function(){
            alert('?!');
        }
        test01.onclick=null;

addEventListener方式

使用语法：

事件源 . removeEventListener(事件类型, 事件处理函数, [获取捕获或者冒泡阶段])

        function fn(){
            alert('....');
        }
        test01.addEventListener('click',fn);
        test01.removeEventListener('click',fn);

其他

鼠标经过事件：

mouseover 和 mouseout 会有冒泡效果
mouseenter 和 mouseleave 没有冒泡效果

匿名函数无法被解绑

事件委托

事件委托是利用事件流的特征，同时给多个元素注册事件

优点：减少注册次数，可以提高程序性能

原理：

给父元素注册事件
当我们触发子元素的时候，会冒泡到父元素身上
从而触发父元素的事件
即使有多个子元素，每个子元素也都会有相同的事件触发效果

语法：

直接給父级绑定事件即可

    <ul>
        <li>01</li>
        <li>02</li>
        <li>03</li>
        <li>04</li>
        <li>05</li>
    </ul>
    <script>
        const ul=document.querySelector('ul');
        ul.addEventListener('click',function(e){
            alert('dianji');
        });
    </script>

而触发事件的元素（子级元素），可以用

事件对象.target. tagName 来获取

    <ul>
        <li>01</li>
        <li>02</li>
        <li>03</li>
        <li>04</li>
        <li>05</li>
        <p>06</p>
    </ul>
    <script>
        const ul = document.querySelector('ul');
        ul.addEventListener('click', function (e) {
            alert('dianji');
            if (e.target.tagName === 'LI')
                this.style.color = 'red';
            if (e.target.tagName === 'P')
                this.style.color = 'blue';
        });
    </script>

其他事件

3.1页面加载事件

概念：

加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件

1.监听所有资源加载完毕

给window添加load事件

语法：

        window.addEventListener('load',function(){
            //执行操作
        })

2.监听页面DOM加载完毕

无需等待样式表、图像等完全加载

给 document 添加 DOMContentLoaded 事件

语法：

        document.addEventListener('DOMContentLoaded',function(){
            //执行操作
        })

3.2 页面滚动事件

概念：

滚动条在滚动的时候持续触发的事件

事件名：scroll

监听整个页面滚动：

        window.addEventListener('scroll',function(){
            //执行操作
        })

监听某个元素的内部滚动直接给某个元素加即可

属性：

scrollLeft和scrollTop

用于获取向左或向上滚动距离

示例：

        window.addEventListener('scroll', function () {
            const n=document.documentElement.scrollTop
            console.log(n)
        })

scrollTo()

把内容滚动到指定的坐标

3.3 页面尺寸事件

窗口尺寸改变的时候触发事件

事件名：resize

        window.addEventListener('resize',function(){
            //执行操作
        })

Dom节点&移动端滑动

节点操作

1.1DOM节点

DOM树里每一个内容都称之为节点

节点类型：

元素节点：所有标签
属性节点：所有属性
文本节点：所有文本

1.2查找节点

节点关系：

父节点
子节点
兄弟节点

父节点查找：

使用parentNode 属性

语法：子元素 . parentNode

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

子节点查找：

childNodes 属性

获得所有子节点、包括文本节点（空格、换行）、注释节点等

children 属性

仅获得所有元素节点
返回的是一个伪数组

兄弟关系查找：

1. 下一个兄弟节点

属性： nextElementSibling

2. 上一个兄弟节点

属性： previousElementSibling

1.3增加节点

1.创建节点

创造出一个新的网页元素，再添加到网页内

先创建节点，然后插入节点

创建节点语法：

        document.createElement('标签名')

2.插入节点

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

父元素 . appendChild（插入元素）

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

父元素 . insertBefore（插入元素，在那个元素前面）

3.克隆节点

复制一个原有的节点

语法：

元素 . cloneNode（布尔值）

true，则代表克隆时会包含后代节点一起克隆
false，则代表克隆时不包含后代节点（默认）

1.4删除节点

删除元素必须通过父元素删除

语法：

父元素 . removeChild（要删除的元素）

注；

如不存在父子关系则删除不成功
删除节点和隐藏节点（display:none）有区别的：隐藏节点还是存在的，但是删除，则从html中删除节点

M端事件

移动端事件：

触屏事件 touch

touchstart 手指触到第一个元素时触发
touchmove 手指在一个DOM元素上滑动时触发
touchend 手指从一个DOM元素上移开时触发

BOM操作

Window对象

1.1BOM

BOM(Browser Object Model ) 是浏览器对象模型

window对象是一个全局对象，也可以说是JavaScript中的顶级对象
像document、alert()、console.log()这些都是window的属性
基本BOM的属性和方法都是window的。
所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法
window对象下的属性和方法调用的时候可以省略window

1.2定时器——延迟函数

用来让代码延迟执行的函数

语法：

setTimeout(回调函数，等待毫秒数)

仅只执行一次

清除延时函数：

        let timer=setTimeout(回调函数,等待毫秒数)
        clearTimeout(timer)

注：

延时器需要等待,所以后面的代码先执行
每一次调用延时器都会产生一个新的延时器

1.3JS执行机制

JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事

同步：同步任务都在主线程上执行，形成一个执行栈
异步：异步是通过回调函数实现的

一般而言，异步有以下三种类型：

普通事件，如 click、resize 等
资源加载，如 load、error 等
定时器，包括 setInterval、setTimeout 等

执行机制：

1. 先执行执行栈中的同步任务。

2. 异步任务放入任务队列中。

3. 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。

1.4 location对象

location 的数据类型是对象，它拆分并保存了 URL 地址的各个组成部分

常用属性和方法：

href 属性获取完整的 URL 地址，对其赋值时用于地址的跳转
search 属性获取地址中携带的参数，符号？后面部分
hash 属性获取地址中的啥希值，符号 # 后面部分
reload 方法用来刷新当前页面，传入参数 true 时表示强制刷新

1.5 navigator对象

navigator的数据类型是对象，该对象下记录了浏览器自身的相关信息

常用属性：通过 userAgent 检测浏览器的版本及平台

1.6 histroy对象

history 的数据类型是对象，主要管理历史记录

常用属性和方法：

back（）后退
forward（）前进
go（参数n）正数则前进n个页面，负数则后退n个页面

本地储存

2.1 本地存储分类- localStorag

将数据永久存储在本地

语法：

存储：localStorage.setItem(key, value)
获取：localStorage.getItem(key)
删除：localStorage.removeItem(key)

2.2 本地存储分类- sessionStorage

特性：

生命周期为关闭浏览器窗口
在同一个窗口(页面)下数据可以共享
以键值对的形式存储使用
用法跟localStorage 基本相同

2.3存储复杂数据类

1.本地只能存储字符串,无法存储复杂数据类型

需要将复杂数据类型转换成JSON字符串,再存储到本地

语法：

JSON.stringify(复杂数据类型）

        const test01 = {
            name:000,
            work:111
        }
        localStorage.setItem('test01',JSON.stringify(test01))

2. 本地存储里面取出来的是字符串，不是对象，无法直接使用

需要取出来的字符串转换为对象

语法：

JSON.parse(JSON字符串)

取出时使用

正则

概念

正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式

正则表达式也是对象

作用：

通常用来查找、替换那些符合正则表达式的文本（匹配，替换，提取）

语法

1.1定义正则表达式语法

const 变量名 = / 表达式 /

/ /是正则表达式字面量

1.2判断是否有符合规则的字符串

test() 方法

用来查看正则表达式与指定的字符串是否匹配

语法：

regObj . test （被检测的字符串）

        const str = '山东农业大学某某院某某专业'
        const reg = /山东/
        console.log(reg.test(str))

如果正则表达式与指定的字符串匹配，返回true，否则false

1.3检索（查找）符合规则的字符串

exec() 方法

在一个指定字符串中执行一个搜索匹配

语法：

regObj . exec （被检测的字符串）

        const str = '山东农业大学某某院某某专业'
        const reg = /山东/
        console.log(reg.exec(str))

如果匹配成功，exec() 方法返回一个数组，否则返回null

元字符

元字符即特殊字符，是一些具有特殊含义的字符

分类：

边界符（表示位置，开头和结尾，必须用什么开头，用什么结尾）
量词（表示重复次数）
字符类（比如 \d 表示 0~9）

2.1边界符

正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符

^ 表示匹配行首的文本（从谁开始）
$ 表示匹配行尾的文本（从谁结束）

        const str = '山东农业大学某某院某某专业'
        const reg01=/^山东/
        const reg02=/山东$/
        console.log(reg01.test(str))  //true
        console.log(reg02.test(str))  //false

2.2量词

用来设定某个模式出现的次数

量词	说明
*	重复0次或更多次
+	重复1次或更多次
？	重复0次或1次
{n}	重复n次
{n,}	重复n次或更多次
{n,m}	重复n次到m次

注意：逗号左右两侧不要出现空格

        const str = '山东农业大学某某院某某专业'
        const reg03 = /某+/
        const reg04 = /某{2,4}/
        console.log(reg03.test(str))  //true
        console.log(reg04.test(str))  //true

2.3字符类

1.[ ] 匹配字符集

        console.log(/[2]/.test('1234560'))  //true

2.[ ] 里面加上 - 连字符

[a-z] 表示 a 到 z 26个英文字母都可以
[a-zA-Z] 表示大小写都可以
[0-9] 表示 0~9 的数字都可以

3. [ ] 里面加上 ^ 取反符号

例：[^a-z] 匹配除了小写字母以外的字符

4.预定义

即简写

2.4修饰符

修饰符约束正则执行的某些细节行为，如是否区分大小写、是否支持多行匹配

语法：

/表达式/修饰符

修饰符：

i 是单词 ignore 的缩写，正则匹配时字母不区分大小写
g 是单词 global 的缩写，匹配所有满足正则表达式的结果

        console.log(/a/i.test('A'))  //true

2.5替换

使用replace 替换

语法：

字符串 . replace（/正则表达式/，‘替换文本’）