常用API学习笔记

api相关知识点

1.基础，尽可能用const定义对象，因为const相当于确定了地址，改变值的话会报错是因为地址并为改变

2.DOM是文档对象模型（操作网页内容，可以开发网页内容特效和实现用户交互）

（1）DOM树能够直观的体现标签与标签之间的关系
（2）把文档当成对象来处理

3.用css选择器的方式来获取DOM元素

(1)document.querySelector(‘css选择器’)

(2)选择器内的第一个元素，返回值是HTMLelement元素，如果没有查到，则返回NULL

(3)document.querySelectorAll()可以选择多个元素，得到的是伪数组，需要通过遍历得到每一个元素

(4)document.getElementsById(‘haha’)获取ID为haha的元素/getElementsByTagName(‘div’)获取页面内全部的div元素/getElementsByClassName(‘haha’)获取页面内类名为haha的元素

4.操作元素内容

(1)一般需要先确定获取的元素内容:const 获取元素名 = document.querySelector(‘.haha’)
(2)获取元素名.innerText = ‘修改内容’ //只会修改对应的文本内容，不会解析标签
(3)获取元素名.innerHTML = ‘sth’//能够解析标签

5.操作样式属性

(1)常见属性有：href,title,src…
(2)先抓取对象，然后直接修改赋值，例:img.src = new
(3)样式属性的修改

通过抓取对象（略）；通过抓取类名（用于样式繁多的,会覆盖前面的类名,可以先加在前面）:div.className = ‘class1 class2’;

通过classList操作控制css:
抓取的元素.classList.add(‘class_new’)//增添一个样式类
抓取的元素.classList.remove(‘class_new’)//移除一个样式类
抓取的元素.classList.toggle(‘class_new’)//替换一个样式类

6.操作表单属性

（1）直接抓取 抓取.value = ''等 ex:抓取button btn.disabled = true // 禁用按钮

7.自定义属性

（1）一般用data-自定义 来定义属性
（2）在dom上用dataset来获取，console出一个对象

8.定时器

(1)开启定时器：setInterval(功能函数,间隔时间)其中，间隔时间的单位是ms，没开启一个定时器，对应就会有一个编号，可以用let定义变量来查看
(2)关闭定时器：clearInterval(n)//其中，n就是上面提到的编号

9.事件监听（事件绑定）

(1)元素类型.addEventListenr(‘事件类型’,执行函数)
(2)老版本的时间监听:元素类型.on事件类型 = function(){}//不同于最新的，在执行多次执行函数时，老版本会覆盖上一次的内容，而新版本则会连续输出
(3)事件类型主要由:click(鼠标单击),mouseenter(鼠标经过),mouseleave(鼠标离开),focus(获取焦点),blur(失去焦点),Keydown(键盘按下),Keyup(键盘抬起),input(表单输入)
(4)事件对象：在执行函数里输入event、e、ev,一般用于判断键盘按下的键位或者点击了哪个按钮，常用属性:type(获取当前事件的类型),clientX/clientY(获取光标相对于浏览器可见窗口左上角的位置),offsetX/offsetY(获取光标相对于当前DOM元素左上角的位置),key(用户按下的键盘键的值)
(5)回调函数：通俗来讲，就是将函数名做参数，调用函数
(6)this环境对象:指的是函数内部特殊的变量this，它代表着当前函数运行时所处的环境；函数的调用方式不同，其所指代的对象也不同，谁调用，this就是谁，通常来说，直接调用函数，一般是window函数，所以this指代window
(7)事件委托：将子事件绑定到父元素身上，这样通过“事件对象（e）.target”就能获得对应子事件，简单的例子“ul下的li”，事件委托的原理主要是利用事件冒泡的特点，触发方式：obj.target.tagName
(8)阻止冒泡：阻止默认行为的发生，例如阻止链接或者表单的跳转。方式:e.preventDefault()阻止默认事件//e.stopPropagation()阻止冒泡

10.其他事件

(1)页面加载事件（等待所有资源加载完毕）load，使用方式：window.addEventListener(‘load’,function(){//event})
(2)页面加载（等待所有图片加载完毕），使用方式:document.addEventListener(‘DOMContentLoaded’,function(){})
(3)滚动事件：使用方式，addEventListener(‘scroll’,function(){}),里面提供了scrollLeft和scrollTop两个API，统计页面左右和上下滚动的距离，并且可以使用document.documentElement.scrollTop来获取或者定义元素值
(4)页面尺寸事件：resize，当页面大小发生变化的时候触发；获取可见的宽高(不包含边框、margin等)：clientWidth,clientHeight；获取包含不可见的宽高(元素自身的宽高):offsetWidth,offsetHeight(若盒子是隐藏的，则输出0)

11.日期对象

(1)const date = new Date()//首先实例化一个date来获取日期
(2)getFullYear()获取四位数年份；getMonth()获取0-11的月份；getDate()获取月份中的每一天；getDay()获取0-6的星期；getHours()获取0-23的小时；getMinutes()获取0-59的分钟；getSeconds()获取0-59的秒数;可以使用toLocalString()来转换数字为字符串

(3)时间戳：是自从1970年1月1日起的毫秒数，是一种特殊的计量方式（可以通过获取不同时间的时间戳，然后进行计算，比较中间的时间差）
(4)时间戳获取方法：getTime()//比较经典;+new Date()//较为方便，且无需实例化;Date.now()//只能得到当前的时间戳，无法像前两种那样获取任意时间的时间戳

12.节点操作（对标签的增删改查）

(1)DOM里面的每一个内容都称之为节点，html是根节点
(2)查找节点：查找父节点：子节点.parentNode;查找子节点:父元素.children;查找上一个或者下一个兄弟节点:nextElementSibling/previousElementSibling
(3)增加节点：document.createElement(‘标签名’)；父元素追加节点：父元素.appendChild(要插入的元素)，父元素.insertBefore(要插入的元素,在哪个元素前面)；元素.cloneNode(boolean)->true:连带克隆后代元素,false:默认值，不会连带克隆后代元素;
(4)删除节点：要删除元素，必须经过父元素的同意：父元素.removeChlid(要删除的元素)

13.M端事件

touchstart手指触摸到触发；touchmove手指在dom上滑动时触发；touchend手指离开元素时触发

14.swiper插件的使用

具体查看官网 https://www.swiper.com.cn/

15.Window对象（BOM->navigator,location,document,history,screen）

(1)延迟函数：setTimeout(回调函数,时间)，clearTimeout(name)清除
(2)了解事件循环机制：event loop
(3)location:包含网站的URL地址，常用location.href=www来实现跳转；location.search获取表单内容；location.hash获取地址中的哈希值，即#后面的内容，一般是单页面应用会使用；location.reload(true)强制刷新
(4)navigator:获取浏览器自身的相关信息，其中uesrAgent是获取浏览器的版本和平台，用于适配不同平台
(5)history:管理历史记录：back()后退一个页面;forward()前进一个页面;go(参数)参数为正，前进n个页面，负数后退

16.内部存储

(1)本地存储：localstorage->setItem(‘键’,值)，getItem(‘键’)，remove(‘键’)；本地存储只能存储字符串类型
(2)会话存储：sessionsorage同上
(3)本地存储处理复杂类型（对象）：const obj = JSON.parse(localstorage.getItem(~));localStorage.setItem(‘’,JSON.stringly(obj))

17.数组map和join方法

(1)map:arr.map(function(item,i){ })//item存储了数组元素，i存储了角标，通过return可以直接批量处理
(2)join:console.log(arr.join(‘-’))//这样输出的数组字符串，并且将每个元素之间用"-"相连

13.正则表达式

(1)通常用于js中的截取替换指定文本内容
(2)定义正则 const objx = /正则表达式/
(3)test():objx.text(被检查的字符串),log out true/false
(4)exec():匹配成功则返回一个数组（内容一般是匹配到的字符串的位置等信息），否则返回NULL
(5)匹配字符:[a-z]//[0-9]=[/d]//

边界符：^(匹配行首)//$(匹配行尾)//两个一起用，则是精确匹配的意思/^hahaaha$/

(6)量词：*(repeat 0 or more)//+(repeat once or more)//?(repeat 0 or once)//{n}(repeat n times)//{n,}(repeat n or more)//{n,m}(repeat n to m)
(7)字符类：[]用于匹配字符集合，包含其中一个就返回true，但是只有一次，所以可以搭配量词使用，[^xxx]匹配除了括号里的单词
(8)预定义：/d(匹配0－9数字);/D(匹配0－9以外的数字);/w(匹配任意字母、数字和下划线);/W(匹配除字母数字下划线以外的东西);/s(匹配空格);/S(匹配非空格以外的东西)
(9)修饰符：使用方法->/表达式/修饰符，i是不区分大小写；g是全局搜索