JavaScript web APIs

最新推荐文章于 2024-07-14 15:54:59 发布

残云浸染红缨

最新推荐文章于 2024-07-14 15:54:59 发布

阅读量911

点赞数 29

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m0_54412570/article/details/140237240

版权

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 = null
- addEventListener方式：
  - 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~11
- getDate() 获取月份中的每一天 不同月份取值也不相同
- getDay() 获取星期 取值为0~6
- getHours() 获取小时 取值为0~23
- getMinutes() 获取分钟 取值为0~59
- getSeconds() 获取秒 取值为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(/正则表达式/，'替换的文本')