WebApi

一、webApi的介绍

1.webApi简介

webApi是浏览器提供的一套操作页面元素的代码

webApi分为Bom和Dom

①Dom，是文档对象模型，浏览器会根据标签自动生成对应的js对象，让我们很方便的通过js来控制页面的标签

②Bom

二、Dom部分

1.获取Dom元素

1.1通过querySelector获取元素

let div = document.querySelector('div');

返回的是一个元素，若找不到该标签则返回null

1.2通过querySelectorAll获取元素

let divs = document.querySelectorAll('div');

无论结果如何返回的都是一个伪数组，找不到该元素返回的是空数组

伪数组的特点：具有length属性；按索引方式存储数据；不具有数组的push，pop等方法

2.修改元素内容和样式

2.1设置文本内容

①document.write

只能在body中写内容，以后不常用

②element.innerText

设置标签的文本内容，不会识别标签

div.innerText = '<button>按钮</button>' // 原样输出

③element.innerHtml

设置标签的文本内容，会识别标签

div.innerHtml= '<button>按钮</button>' // 输出button标签

innerText和innerHtml都是用来设置双标签的，表单等单标签属性用value来修改

2.2设置元素样式

①element.style

用来设置元素的样式，进行的是行内样式的操作

div.style.backgroundColor = 'red';// 等价于<div style="background-color: red;"></div>

②element.className

修改元素的类名，会覆盖之前元素的类名

div.className = 'header'; // 记住不加.

③element.classList.add

添加一个或多个类名，不会覆盖之前的类名

div.classList.add('hide', 'sad');// 添加两个类名，类名和类名之间逗号隔开

③element.classList.remove

指定删除一个或多个类

div.classList.remove('hide', 'sad'); // 删除两个类名，类名和类名之间逗号隔开

④element.classList.toggle

切换类名，本来有就移除，本来没有就添加

div.classList.toggle('hide');

3.定时器和延时器

3.1设置setTnterval()定时器

语法1
setTnterval(function () {},间隔的秒数); //秒数单位为ms

语法二
function fn1() {
    
}
setTnterval(fn1,间隔的秒数);

3.2清除setTnterval()定时器

let timeId = setTnterval(function () {},间隔的秒数);
clearInterval(timeId);

tips：延时器的使用方法与定时器一致，延时器的作用是延迟一段时间后调用函数，并且只执行一次

4.设置表单元素

4.1表单属性

<input type="text" checked>
let inp = document.querySelector('input');
inp.value = '123' // 设置表单内容为123
inp.checked = false // 设置默认不勾选，true是勾选
inp.disabled = true // 设置按钮禁用，false是启用

4.2设置下拉表单属性

<select>
<option></option>    
<option></option>    
</select>
let inp = document.querySelector('input');
inp.selected = true // 设置默认选中

4.3设置文本域属性

<textarea id="txt">123<br></textarea>
let txt = document.querySelector('#txt');
console.log(txt.value) // 正常输出123<br>
console.log(txt.innerText) // 输出为空，获取不到文本域里的值
console.log(txt.innerHtml) // 会将标签转译为&gt;和&lt;, 输出值为 123&gt;br&lt;，但是不能动态的获取文本内容

通过js设置内容时三种方法都可正常设置

5.事件

5.1事件三要素

①事件源：事件被触发的对象

②事件类型：触发什么事件，例如click就是鼠标点击事件

③事件处理程序：通过函数处理所需求的业务

5.2注册事件的两种方式

1.传统方式
eventTarget.事件类型 = function() {
    要执行的业务
}

2.事件监听
eventTarget.addEventListener('事件类型',function() {
    要执行的业务
},[useCapture])

二者区别：
传统事件具有唯一性，一个事件只能设置一个处理函数，后面会覆盖前面的；事件监听同一个元素可以注册多个监听器

tips：事件监听也可以用代码主动触发
div.addEventListener('click',function() {
    要执行的业务
})
div.click(); 可以把click也看成是一个方法，很少用

5.3事件解绑

因为事件监听可以设置多个同名事件，此时就有需要事件解绑
语法
eventTarget.removeEventListener('事件类型', 函数名);
// 解绑事件一定要有函数名，如果绑定事件使用的是匿名函数，则解绑不了

6.之前内容的补充

6.1字符串

字符串也是个伪数组，具有数组的长度和下标属性，可以进行遍历，但是不能使用push等数组方法

6.2this

在全局作用域下或普通函数中，this的指向为全局对象window，总结来说就是谁调用，指向谁

6.3排他思想

①先找到所有相同类型的元素

②将这些元素进行遍历，设置同一种样式

③找到当前元素，给他设置另外一种样式

let lis = document.querySelectorAll('li');
        for (let i = 0; i < lis.length; i++) {
            // 循环绑定事件
            lis[i].addEventListener('mouseover', function() {
                // 遍历元素，设置同一种样式
                for (let i = 0; i < lis.length; i++) {
                    lis[i].style.backgroundColor = '#fff';
                }
                //找到当前元素，设置另外一种样式
                this.style.backgroundColor = 'red';
            })
        }

7.节点

7.1节点的概念

节点：Node——构成HTML文档的最基本的单元

节点的三个基本属性：①节点类型 ②节点名称 ③节点值

7.2节点的分类

①元素节点

②属性节点

③文本节点

④注释节点

7.3节点查询

查询父节点：dom.parentNode

查询子节点：dom.childen(返回的是一个伪数组，只包含元素节点)

查询兄弟节点：dom.previousElementSibling(上一个兄弟节点，只包含元素节点)

dom.nextElementSibling(下一个兄弟节点，只包含元素节点)

7.4新增节点与插入节点

创建节点：document.createElement('标签名称');

let li = document.createElement('li');

插入节点

①dom.appendChild(要插入的元素) 插入到dom元素内部的末尾

ul.appendChild(li) // 将li插入到ul的末尾
// appendChild也可进行剪切与移动

①dom.insertBeforeChild(要插入的元素,目标元素的位置) 插入到dom元素内部的目标元素前面

div.insertBeforeChild(p,span) // 将p标签插入到span标签的前面

7.5删除节点

①父元素.removeChild(要删除的子元素)

ul.removeChild(li); // 表示删除ul里的li元素

②删除自身

要删除的元素.remove()

ul.remove(); // 删除ul元素自身

7.6克隆节点

要克隆的节点.cloneNode(布尔值)

当布尔值为空或为false时，只是浅拷贝，只克隆要复制的节点本身，不克隆节点的子元素
当布尔值为true时，进行深拷贝，克隆节点本身，也包括节点里的子元素
div.cloneNode() // 浅拷贝，只克隆节点本身
div.cloneNode(true) // 深拷贝，克隆节点和里面的子元素

8.时间对象

8.1实例化创建事件对象

let date = new Date();

8.2获取时间戳

 // 方式一
let date = new Date();
date.getTime();

 // 方式二
+new Date();

// 方式三
Date.now();

8.3时间获取方法

9.const和let的区别

10事件对象

时间对象是与事件相关的一系列信息的集合

function(e) { // 此处的e就是事件对象，是一个形参
    e.target  返回触发事件的对象
    e.type    返回事件的类型
    e.preventDefault()  阻止默认事件，例如a链接的跳转
    e.stopPropagation() 阻止冒泡
}

e的其他方法

function(e) {
    e.clientX , e.clientY 鼠标在事件对象里的位置，参照的是整个视口
    e.offsetX , e.offsetY 鼠标在事件对象里的位置，参照的是事件对象本身
}

11.事件流动的两个阶段

事件监听默认的是冒泡
event.addEventListener('click', function(){
    
},false) 默认值为false，即处于冒泡阶段；参数为true则表示捕获阶段

12.阻止标签的默认行为

12.1阻止a标签跳转页面

方法1
a.addEventListener('click', function(e){
    e.preventDefault() // 阻止默认事件
})

方法二
<a href="javascript:;"></a>

12.2阻止form里button按钮刷新页面

方法一
btn.addEventListener('click', function(e){
    e.preventDefault() // 阻止默认事件
})

方法二
<button type="button"></button>

12.3自定义右键菜单

 document.body.addEventListener('contextmenu', function(e) {
            e.preventDefault(); // 先阻止鼠标右键默认事件
            ul.style.display = 'block'; // 预先将自定义的菜单隐藏，当点击鼠标右键时显示
            ul.style.top = e.clientY + 'px'; // 让菜单出现在鼠标右键的位置
            ul.style.left = e.clientX + 'px';
        })
        document.body.addEventListener('click', function() {
            ul.style.display = 'none'; // 当点击左键时隐藏自定义菜单
        })

13.事件委托

原理：不单独给每个子节点绑定事件，而是将事件监听设在父节点上，通过冒泡来影响子节点

解析：事件冒泡是由子节点到父节点一个层级一个层级往上冒，当点击子节点时，未设置事件，然后往上冒泡寻找父节点。父节点设置了点击事件，点击了子元素就相当于点击了父元素。然后通过e.target来寻找点击事件的对象，来完成各种业务。

14.元素系列

14.1scroll系列

①scroll事件

// 给window添加滚动事件
window.addEventListener('scroll', function() {
   console.log(document.documentElement.scrollTop);
})
其中，document.documentElement.scrollTop是页面滚动的距离
scrollTop是上下滚动过的距离，scrollLeft是左右滚动过的距离

②scrollHeight和scrollWidth

scrollHeight和scrollWidth返回的值不包含边框的大小。当内容超出盒子大小时，用scroll返回的是可滚动区域的大小，而不是盒子的大小

tips：pc端页面滚动条大小为17px，移动端滚动条不占大小

14.2offset系列

①offsetHeight和offsetWidth

获得元素自身的宽高，包括边框的大小

②offsetLeft和offsetTop

获得元素离带定位的父元素之间的距离，若父元素未带定位，则继续往上找，若都找不到，则返回相对于页面的距离

14.3client系列

①clientHeight和clientWidth

获得元素自身的宽高，不包括边框的大小

②clientLeft和clientTop

获得元素的边框大小，不包含右和下边框

14.4总结

以上三个系列返回的值都是数字，不包含px单位

三个系列中，只有offset的Height和Width获取的宽高包含边框大小，其他两个都不包含

三个系列中，除了client的Left和Top是获取边框，其他两个都是获取距离

15.递归

函数调用自身就是递归

function func() {
    func(); // 函数自身调用自身就叫做递归
}
func();

利用延时器递归来实现定时器的效果
let index = 0;
function func() {
  console.log(++index);
  setTimeout(func, 1000);
}
func();

三、Bom部分

1.location

1.1href

herf属性用于跳转页面

用法一
location.href = 'https://www.baidu.com';
作用：可以不依靠a标签就能实现页面跳转

用法二
location.href = location.href
作用：可以实现刷新效果

1.2search

获取url?后面的字符串

https://www.baidu.com?id=1
利用location.search获取的就是?id=1这个字符串

1.3hash

获取url#后面的字符串

https://www.baidu.com#id=1
利用location.search获取的就是#id=1这个字符串

④reload()

刷新页面

location.reload()是刷新页面
location.reload(true)是强制刷新页面

2.navigator

2.1userAgent

3.history

3.1history.back()

后退一页

3.2history.forward()

前进一页

3.3history.go()

history.go(2) // 代表前进两页
history.go(-2) // 代表后退两页

4.本地存储

4.1localstorage

存储数据 
localStorage.setItem('名称', 值);
例如 localStorage.setItem('color', 'red');

当对象数据想存放到内存中

1.先转换成字符串格式
  const obj = {}
  const arr = JSON.stringify(obj);
2.放入localstorage中存储
  localStorage.setItem('arr', arr);
3.取出并转换格式
  const newObj = JSON.parse(localStorage.getItem('arr'));
此时的newObj就是经过localstorage存储后的对象

①生命周期为永久，除非手动删除

②多页面下共享

③以键值对的方式存储

4.2sessionStorage

用法同上

①生命周期为关闭浏览器窗口

②在同一个窗口下数据可以共享