JavaScript web APIs
残云浸染红缨 2024-08-02 13:03:01 阅读 53
API
作用：使用JS 操作html和浏览器
分类：DOM（文档对象模型）、BOM（浏览器对象模型）
DOM
作用：操作网页内容，可以开发网页内容特效和实现用户交互DOM树：
将HTML文档以树状结构直观的表现出来，我们称之为文档树或DOM树描述网页内容关系的名词作用：文档树直观的体现了标签与标签之间的关系DOM对象：
浏览器根据html标签生成的JS对象所有的标签属性都可以在这个对象上面找到修改这个对象的属性会自动映射到标签身上DOM的核心思想：把网页内容当做对象来处理document对象 是DOM里提供的一个对象
它提供的属性和方法都是用来访问和操作网页内容的网页所有内容都在document里面
获取DOM对象
查找元素DOM元素就是利用JS选择页面中标签元素选择匹配的第一个元素 document.querySelector ('css选择器')选择匹配的多个元素 document.querySelectorAll ('css选择器')
querySelectorAll 得到的是一个伪数组（即使只有一个元素）：
有长度有索引号的数组但是没有pop(）、push(）等数组方法
操作元素内容
将文本内容添加/更新到任意标签位置
元素.innerText属性 ：显示纯文本，不解析标签元素.innerHTML属性 ：会解析标签，多标签建议使用模板字符操作元素属性
操作常用属性：对象.属性 = 值操作样式属性：对象.style.样式属性 = 值
如果属性有 - 连接符，需要转换为小驼峰命名法操作类型（className）操作CSS
如果修改的样式比较多，可以通过借助于css类名的形式元素.className= "类名"通过classList方式追加和删除类名
元素.classList.add('类名') 追加一个类元素.classList.remove('类名') 删除一个类元素.classList.toggle('类名') 切换一个类 （有就删掉，没有就加上）操作表单元素属性
正常属性：DOM对象.属性名=新值特殊属性：如disabled、checked、selected 等
DOM对象.属性名= true 或 false 操作自定义属性
在html5中推出来了专门的data-自定义属性，在标签上一律以data-开头在DOM对象上一律以dataset对象方式获取
<body>
<div class:="box" data-id="10" >盒子</div>
<script>
const box = document.querySelector('.box')
console.log(box.dataset.id)
</script>
</body>
定时器-间歇函数
开启定时器 let 变量名 = setInterval(函数，间隔时间)
作用：每隔一段时间调用这个函数间隔时间单位 是 毫秒函数名字不需要加括号定时器返回的是一个id数关闭定时器 clearInterval(变量名)
事件监听
事件是在编程时系统内发生的动作或者发生的事情事件监听就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为绑定事件或者注册事件语法：
元素对象.addEventListener('事件类型'，要执行的函数)元素对象.on事件类型 = 要执行的函数 事件监听三要素：
事件源：那个dom元素被事件触发了，要获取dom元素事件类型：用什么方式触发，比如鼠标单击click、鼠标经过mouseover等事件调用的函数：要做什么事事件类型
鼠标触发：click 鼠标点击、 mouseenter 鼠标经过、mouseleave 鼠标离开表单光标：focus 获得焦点、blur 失去焦点键盘触发：Keydown 键盘按下触发、Keyup 键盘抬起触发表单输入触发：input用户输入事件事件对象
这个对象里有事件触发时的相关信息获取事件对象
在事件绑定的回调函数的第一个参数就是事件对象一般命名为event、ev、e常用属性
type 获取当前的事件类型clientX/clientY 获取光标相对于浏览器可见窗口左上角的位置offsetX/offsetY 获取光标相对于当前DOM元素左上角的位置key 用户按下的键盘键的值
元素.addEventListener('click',function (e){
})
环境对象
指的是函数内部特殊的变量this,它代表着当前函数运行时所处的环境谁调用，this就是谁直接调用函数，其实相当于是window.函数，所以this指代window
回调函数
当一个函数当做参数来传递给另外一个函数的时候，这个函数就是回调函数
事件流
事件流指的是事件完整执行过程中的流动路径事件捕获：从DOM的根元素开始去执行对应的事件
addEventListener 第三个参数传入true代表是捕获阶段触发传入false代表冒泡阶段触发，默认就是false
DOM.addEventListener(事件类型，事件处理函数，是否使用捕获机制)
阻止冒泡
因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素若想把事件就限制在当前元素内，就需要阻止事件冒泡语法：事件对象.stopPropagation()阻止默认行为
e.preventDefault()事件解绑
on事件方式，直接用null 覆盖即可 如：btn.onclick = nulladdEventListener方式：
removeEventListener(事件类型，事件处理函数，【获取捕获或者冒泡阶段】)匿名函数无法解绑
事件委托
事件委托是利用事件流的特征解决一些开发需求的知识技巧优点：减少注册次数，可以提高程序性能原理：事件委托其实是利用事件冒泡的特点
给父元素注册事件，当触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件找到真正触发的元素：事件对象.target.tagName
其他事件
页面加载事件
load 加载外部资源(如图片、外联CSS和avaScript等)加载完毕时触发的事件
监听整个页面资源给window加DOMContentLoaded 当初始的HTML文档被完全加载和解析完成之后触发
给document加无需等待样式表、图像等完全加载元素滚动事件 scroll 滚动条在滚动的时候持续触发
scrollLeft 和scrollTop（属性） 获取被卷去的大小
获取元素内容往左、往上滚出去看不到的距离这两个值是可读写的页面尺寸事件 resize 在窗口尺寸改变的时候触发
clientWidth 和 clientHeight 获取元素的可见部分宽高(不包含边框，margin,滚动条等)
元素尺寸与位置
通过js的方式，得到元素在页面中的位置获取宽高
offsetWidth 和 offsetHeight
内容+padding+border获取出来的是数值，方便计算获取的是可视宽高，如果盒子是隐藏的，获取的结果是0获取位置
获取元素距离自己定位父级元素的左、上距离offsetLeft和offsetTop只读属性
日期对象
用来表示时间的对象作用：可以得到当前系统时间实例化：const date = new Date()常用方法：
getFullYear() 获得年份 获取四位年份getMonth() 获得月份 取值为0~11getDate() 获取月份中的每一天 不同月份取值也不相同getDay() 获取星期 取值为0~6getHours() 获取小时 取值为0~23getMinutes() 获取分钟 取值为0~59getSeconds() 获取秒 取值为0~59时间戳 如果计算倒计时效果，需要借助于时间戳完成
将来的时间戳 - 现在的时间戳 = 剩余时间毫秒数剩余时间毫秒数转换为剩余时间的年月日时分秒就是倒计时时间获取时间戳：
date.getTime() 可以返回指定时间的时间戳+new Date() 无需实例化 可以返回指定时间的时间戳Date.now() 无需实例化 只能得到当前的时间戳
DOM节点
DOM树里每一个内容都称之为节点节点类型
元素节点 所有的标签比如body、div， html是根节点属性节点 所有的属性比如href文本节点 所有的文本其他查找节点
父节点查找 ： 子元素.parentNode 返回最近一级的父节点找不到返回为null子节点查找 ： 父元素.children 返回的还是一个伪数组兄弟关系查找 ：
下一个兄弟节点 nextElementSibling属性上一个兄弟节点 previousElementSibling属性新增节点
创建节点 document.createElement('标签名')
创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点追加节点
父元素.appendChild(要插入的元素) 插入到父元素的最后一个子元素父元素.insertBefore(要插入的元素，在哪个元素前面) 插入到某个子元素的前面克隆节点
元素.cloneNode(布尔值) 复制一个原有的节点
若为true,则代表克隆时会包含后代节点一起克隆若为false,则代表克隆时不包含后代节点( 默认值)删除节点 父元素.removeChild（要删除的元素）
如不存在父子关系则删除不成功删除节点和隐藏节点(display:none)的区别的：
隐藏节点还是存在的删除，则从html中删除节点
移动端事件
触屏事件 touch
touchstart 手指触摸到一个DOM元素时触发touchmove 手指在一个DOM元素上滑动时触发touchend 手指从一个DOM元素上移开时触发
BOM
浏览器对象模型window对象是一个全局对象，也可以说是JavaScript中的顶级对象像document、alert()、console.log()这些都是window的属性基本BOM的属性和方法都是window的。所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法window对象下的属性和方法调用的时候可以省略window'
定时器 - 延时函数
let timer = setTimeout(回调函数，等待的毫秒数)setTimeout仅仅只执行一次，所以可以理解为就是把一段代码延迟执行，平时省略window清除延时函数：clearTimeout(timer)两种定时器对比：执行的次数
延时函数：执行一次间歇函数：每隔一段时间就执行一次，除非手动清除
JS执行机制
JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事同步： 程序的执行顺序与任务的排列顺序是一致的、同步的
同步任务都在主线程上执行，形成一个执行栈异步：做一件事的同时，你还可以去处理其他事情
JS的异步是通过回调函数实现的,异步任务有以下三种类型：
普通事件，如click、resize等资源加载，如load、error等定时器，包括setInterval、setTimeout等异步任务相关添加到任务队列中（任务队列也称为消息队列）JS执行机制：
先执行执行栈中的同步任务异步任务放入任务队列中一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态进入执行栈，开始执行由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环(event loop)
Location对象
location的数据类型是对象，它拆分并保存了URL地址的各个组成部分常用属性和方法：
href属性获取完整的URL地址，对其赋值时用于地址的跳转search属性获取地址中携带的参数，符号？后面部分hash属性获取地址中的哈希值，符号# 后面部分reload方法用来刷新当前页面，传入参数true时表示强制刷新
navigator对象
navigator的数据类型是对象，该对象下记录了浏览器自身的相关信息常用属性和方法：
userAgent属性 检测浏览器的版本及平台
histroy对象
history的数据类型是对象，主要管理历史记录，该对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等常用属性和方法：
back() 可以后退功能forward() 前进功能go(参数) 前进后退功能参数，如果是1前进1个页面，如果是-1后退1个页面
本地存储
数据存储在用户浏览器中设置、读取方便、甚至页面刷新不丢失数据容量较大，sessionStorage和localStorage约5M左右分类：
localStorage 可以将数据永久存储在本地，除非手动删除，否则关闭页面也会存在
可以多窗口（页面）共享（同一浏览器可以共享）以键值对的形式存储使用存储数据： localStorage.setltem(key,value)获取数据： localStorage.getltem(key)删除数据： localStorage.removeltem(key)sessionStorage
生命周期为关闭浏览器窗口在同一个窗口（页面）下数据可以共享以键值对的形式存储使用用法跟localStorage基本相同存储复杂数据类型
本地只能存储字符串，无法存储复杂数据类型将复杂数据类型转换成JSON字符串，在存储到本地 JSON.stringify(复杂数据类型)把取出来的字符串转换为对象JS0N.parse(JS0N字符串)数组中字符串拼接
map() 可以遍历数组处理数据，并且返回新的数组
map也称为映射map重点在于有返回值，forEach没有返回值join() 方法用于把数组中的所有元素转换一个字符串
数组元素是通过参数里面指定的分隔符进行分隔的
const arr = ['red','blue','green'];
const newArr = arr.map(function (ele,index){
console,log(ele)//数组元素
console,log(index)//数组索引号
return ele +'颜色'
})
arr.join(' ') //red blue green
正则表达式
用于匹配字符串中字符组合的模式语法： const 变量名 = /表达式/ test()方法用来查看正则表达式与指定的字符串是否匹配 regobj.test(被检测的字符串）元字符
是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能。边界符 (表示位置，开头和结尾，必须用什么开头，用什么结尾)
^ 表示匹配行首的文本（以谁开始）$ 表示匹配行尾的文本（以谁结束）量词（表示重复次数）
+ 表示重复至少1次? 表示重复0次或1次* 表示重复0次或多次(m,n) 表示复m到n次字符类 (比如\d表示0~9)
[ ] 匹配字符集合- 表示一个范围^ 表示范围之外. 匹配除换行符之外的任何单个字符例：
[a-z] 表示a到z26个英文字母都可以[a-zA-Z] 表示大小写都可以[0-9] 表示0~9的数字都可以^[1-9][0-9]{4,}$(腾讯Q0号从10880开始)预定义：指的是某些常见模式的简写方式。
\d 匹配0-9之间的任一数字，相当于[0-9]\D 匹配所有0-9以外的字符，相当于[^0-9]\w 匹配任意的字母、数字和下划线，相当于[A-Za-z0-9]\W 除所有字母、数字和下划线以外的字符，相当于[^A-Za-z0-9]\s 匹配空格(包括换行符、制表符、空格符等)，相等于[\t\r\n\v\f]\S 匹配非空格的字符，相当于[^\t\r\n\v\f]修饰符
修饰符约束正则执行的某些细节行为，如是否区分大小写、是否支持多行匹配等语法： /表达式/修饰符i 正则匹配时字母不区分大小写g 匹配所有满足正则表达式的结果replace替换
语法： 字符串.replace(/正则表达式/，'替换的文本')
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。