前端三剑客——javascript-BOM-DOM-http协议-异步

僻嘶 · 2025-11-10 03:50:20

大纲：
1.BOM（浏览器对象模型）
window对象
location对象
本地存储
2.DOM（文档对象模型）
元素操作（直接获取/间接获取）
事件操作
3.js异步
Promise
Async/await
4.HTTP协议
URL地址解释
HTTP协议概述
常见HTTP请求方法
请求与响应流程
常见的响应状态码

BOM（浏览器对象模型）
window 当前网页创建的超全局对象

//window
//浏览器窗口显示内容区域的高宽
console.log(innerWidth);
console.log(innerHeight);
//浏览器窗口的整体高宽
console.log(outerHeight);
console.log(outerHeight);

复制代码

location 地址栏对象

//location 地址栏对象
/**
* location.assign(url) : 跳转
* location.reload() ：刷新
*/

复制代码

//location 地址栏对象
/**
* location.assign(url) : 跳转
* location.reload() ：刷新
*///location.assign(url) 跳转到指定url地址location.assign('https://www.cnblogs.com/guohan222/p/19185633');//location.reload() 刷新setInterval(function () { location.reload();},2000)

复制代码

本地存储

//本地存储
/**
* 根据域名/IP:端口不同对数据进行分开存储在浏览器中同一域名不同端口存储的数据也不同
* localStorage: 永久存储
* sessionStorage: 会话存储(关闭浏览器后数据清除)
*
*
* localStorage和sessionStorage方法一样
* 增:
* localStorage.setItem(‘属性’，‘值’)
* localStorage.属性 = 值
*
* 删:
* localStorage.removeItem('属性') 指定删除
* localStorage.clear() 全部删除
*
* 改:
* localStorage,属性 = 值
*
* 查:
* localStorage.getItem('属性')
* localStorage.属性
*/

复制代码

//本地存储
/**
* 根据域名/IP:端口不同对数据进行分开存储在浏览器中同一域名不同端口存储的数据也不同
* localStorage: 永久存储
* sessionStorage: 会话存储(关闭浏览器后数据清除)
*/
//localStorage 永久存储
//添加数据到本地存储中
localStorage.setItem('name', 'guohan');
localStorage.age = 22;
//在本地存储中删除数据
//指定删除
localStorage.removeItem('name');
//全部删除
localStorage.clear();
//修改本地存储中的数据
localStorage.name = 'gh';
//获取本地存储中的数据
console.log(localStorage.getItem('name'));
console.log(localStorage.age);

复制代码

DOM（文档对象模型）
元素操作（直接获取/间接获取）

//DOM文档对象模型
/**
* 元素的获取
* 直接获取
* 通过css样式选择器获取单一元素: document.querySelector('选择器')
* 通过css样式选择器获取多个元素（数组）: document.querySelectorAll('选择器')
* 通过id属性值获取单一元素: document.getElementById('id属性值')
* 通过标签获取多个元素（数组）: document.getElementsTagName('标签')
* 通过class属性值获取多个元素（数组）: document.getElementsByClassName('class属性值')
*
* 间接获取
* 获取此元素的子元素: .children
* 获取此元素的第一个/最后一个子元素: .firstElementChild / .lastElementChild
* 获取子元素的父级元素: .parentElement
* 获取元素的下一个/上一个兄弟元素: .nextElementSibling / .previousElementSibling
*
*/

复制代码

方法演示

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li >1</li>
<li id="f2">点我</li>
<li>3</li>
<li>4</li>
<li >5</li>
</ul>
</body>
</html>

复制代码

事件操作
基于本地存储实现任务列表

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" name="content" value="">
<button >添加</button>
<ol ></ol>
</body>
</html>

复制代码

js异步操作
Promise Javascript中用于处理异步操作的操作对象

//js异步解决方案1：Promise : 代表异步操作最终的结果以及结果值的对象，简单来说是js中用于处理异步操作的对象
/**
* promise三种状态
* pending
* fulfilled
* rejected
*
* 异步格式：
* var promise = new Promise(function(resolve,reject){
* if(异步操作成功){
* resolve(value);
* }else{
* reject(error);
* }
* })
*
* //.then()和.catch() : promise状态发生改变触发
* promise.then(res=>console.log(res)).catch(err=>console.log(err));
*
* //Promise.all([]) :
* 将多个Promise实例包装成一个Promise实例
* 所有都成功时:返回一个结果数组
* 只要有一个失败时:返回最先被reject状态的值
*
* //Promise.race([]):
* 将多个Promise实例包装成一个Promise实例
* 不管状态是否是成功还是失败,哪个结果获得的快就返回哪个结果
* @type {Promise<unknown>}
*/

复制代码

//基本格式与promise。then()和，catch()
var promise = new Promise(function(resolve,reject){
// resolve('ab');
reject('aa');
});
//promise状态发生改变就会触发
promise.then(res=>{
console.log(res);
}).catch(err=>{
console.log(err);
})
//Promise.all([])
let promise1 = new Promise(function (resolve, reject) {
resolve('success1');
})
let promise2 = new Promise(function (resolve, reject) {
resolve('success2');
})
let promise3 = new Promise(function (resolve, reject) {
reject('bad');
})
Promise.all([promise1, promise2]).then(res=>console.log(res)).catch(error=>console.error) //(2) ['success1', 'success2']
Promise.all([promise1, promise2,promise3]).then(res=>console.log(res)).catch(err=>console.log(err)); //bad
//Promise.race([])
let promise1 = new Promise(function (resolve, reject) {
setTimeout(function () {
resolve('success1');
}, 1000);
})
let promise2 = new Promise(function (resolve, reject) {
setTimeout(function () {
resolve('success2');
}, 2000);
})
let promise3 = new Promise(function (resolve, reject) {
setTimeout(function () {
reject('success3');
}, 200);
})
Promise.race([promise1, promise2]).then(res => console.log(res)).catch(err => console.log(err));
Promise.race([promise1,promise2, promise3]).then(res => console.log(res)).catch(err => console.log(err));
//success3
//success1

复制代码

Async/await Javascript中用于处理异步操作的操作对象本质上还是Promise

//js异步解决方案2： Async/await ：本质上还是Promise
/**
* 格式：
* async function f1(){
* return ???;
* 等同于:
* // return Promise.resolve('abc');
* // return new Promise((resolve,reject)=>resolve('abc'))
* }
*
*
* // async 函数的核心作用就是自动将函数返回值包装成 Promise—— 如果函数本身已经返回 Promise，再加 async 就是 “多此一举”，完全没必要。
* 例如:
* function f1(){
* return new Promise((resolve,reject)=>{
* setTimeout(()=>{resolve('111')},2000)
* })
* }
*
*
* //遇到await会阻塞后面代码等执行完成后再执行后面代码
* 如果结果状态是reject则后面代码不执行得加try{}catch(e){}才能接收到reject状态并执行catch里面的代码
*
*
* @returns {Promise<unknown>}
*/

复制代码

//初识async
async function f1(){
return 'abc';
// 本质上是自动包装成Promise对象:
// async 函数的核心作用就是自动将函数返回值包装成 Promise—— 如果函数本身已经返回 Promise，再加 async 就是 “多此一举”，完全没必要。
// return Promise.resolve('abc');
// return new Promise((resolve,reject)=>{resolve('abc')})
}
console.log(f1()); // Promise{<fulfilled>: 'abc'}
//与await结合且结果状态是resolve
function f1(){
return new Promise((resolve,reject)=>{
setTimeout(()=>{resolve('111')},2000)
})
}
async function f2(){
return '222'
}
async function f3(){
let a1 = await f1();
let a2 = await f2();
let a3 = '333';
console.log(a1);
console.log(a2);
console.log(a3);
}
f3()
//与await结合且结果状态是reject则后面代码不执行得加try{}catch(e){}才能接收到reject状态并执行catch里面的代码
function f1() {
return new Promise((resolve,reject) => {
setTimeout(() => {
reject('111')
}, 2000)
})
}
async function f2() {
return '222'
}
async function f3() {
try {
let a1 = await f1();
let a2 = await f2();
let a3 = '333';
console.log(a1);
console.log(a2);
console.log(a3);
} catch (e) {
console.log(e);
}
}
f3()

复制代码

HTTP协议
URL地址解释

HTTP协议概述

常见HTTP请求方法

请求与响应流程

常见的响应状态码

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

吉娅寿 · 2025-11-27 01:12:02

分享、互助让互联网精神温暖你我

账号		自动登录	找回密码
密码			立即注册

前端三剑客——javascript-BOM-DOM-http协议-异步

相关帖子

回复

签约作者

前端三剑客——javascript-BOM-DOM-http协议-异步

相关帖子

相关推荐

回复

签约作者