（九）JS-WEB-API（DOM、BOM、事件、Ajax、存储）【每个工程师必须熟练掌握的技能】
JS-WEB-API
- 提问
-
- DOM
- BOM
- 事件
- Ajax
- 存储
- 从JS基础知识到JS-WEB-API
-
- JS基础知识
- JS-WEB-API
-
- DOM（Document Object Model）
-
- DOM本质
- DOM节点操作
- DOM结构操作
- DOM性能
- BOM（Browser Object Model）
- 事件
- Ajax
-
- XMLHttpRequest
- 状态码
-
- xhr.readyState
- xhr.status
- 跨域：同源策略，跨域解决方案
- 手写一个简易的Ajax
- 实际项目中ajax的常用插件
- 存储
-
- 描述cookie localStorage sessionStorage的区别
提问
DOM
- DOM是哪种数据结构
树（DOM树） - DOM操作的常用API
DOM节点操作、DOM结构操作 - attr和property的区别
- 一次性插入多个DOM节点，考虑性能
BOM
- 如何识别浏览器的类型
- 分析拆解url的各个部分
事件
- 编写一个通用的事件监听函数
- 描述事件冒泡的流程
- 无限下拉的图片列表，如何监听每个图片的点击
Ajax
- 手写一个简易的ajax
- 跨域的常用实现方式
存储
- 描述cookie localStorage sessionStorage的区别
从JS基础知识到JS-WEB-API
- JS基础知识，规定语法（ECMA 262标准）
- JS-WEB-API,网页操作的API（W3C标准）
- 前者是后者的基础，两者结合才能真正实际应用
JS基础知识
- 变量的类型和计算
- 原型和原型链
- 作用域和闭包
- 异步
JS-WEB-API
- DOM
- BOM
- 事件绑定
- ajax
- 存储
DOM（Document Object Model）
- Vue和React框架应用广泛，封装了DOM操作
- 但DOM操作一直都会是前端工程师的基础，必备知识
- 只会Vue不懂DOM操作的前端程序员，不会长久
DOM本质
html语言，html文件解析出来的一棵树
DOM节点操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>dom 演示</title>
<style>
.container {
border: 1px solid #ccc;
}
.red {
color: red;
}
</style>
</head>
<body>
<div id="div1" class="container">
<p id="p1">一段文字 1</p>
<p>一段文字 2</p>
<p>一段文字 3</p>
</div>
<div id="div2">
<img src="https://img3.mukewang.com/5a9fc8070001a82402060220-100-100.jpg"/>
</div>
<ul id="list">
</ul>
<script src="./dom-3.js"></script>
</body>
</html>
- 获取DOM节点
const div1 = document.getElementById('div1') //元素
console.log('div1', div1)
const divList = document.getElementsByTagName('div') // 集合
console.log('divList.length', divList.length)
console.log('divList[1]', divList[1])
const containerList = document.getElementsByClassName('container') // 集合
console.log('containerList.length', containerList.length)
console.log('containerList[1]', containerList[1])
const pList = document.querySelectorAll('p') // 集合
console.log('pList', pList)
- attribute
通过修改或者获取js的属性来改变页面样式、页面渲染结构的一种形式，Dom结构js变量的修改
const pList = document.querySelectorAll('p')
const p1 = pList[0]
// property 形式
p1.style.width = '100px'
console.log( p1.style.width )
p1.className = 'red'
console.log( p1.className )
console.log(p1.nodeName)
console.log(p1.nodeType) // 1
- property
修改标签的属性，Dom结构节点属性修改
// attribute
const pList = document.querySelectorAll('p')
const p1 = pList[0]
p1.setAttribute('data-name', 'imooc')
console.log( p1.getAttribute('data-name') )
p1.setAttribute('style', 'font-size: 50px;')
console.log( p1.getAttribute('style') )
- 总结
property：修改对象属性，不会体现到html结构中
attribute：修改html属性，会改变html结构
两者都有可能引起DOM重新渲染
最好使用property
DOM结构操作
- 新增/插入节点
const div1 = document.getElementById('div1')
const div2 = document.getElementById('div2')
// 新建节点
const newP = document.createElement('p')
newP.innerHTML = 'this is newP'
// 插入节点
div1.appendChild(newP)
// 移动节点
const p1 = document.getElementById('p1')
div2.appendChild(p1)
- 获取子元素列表，获取父元素
// 获取父元素
console.log( p1.parentNode )
// 获取子元素列表
const div1ChildNodes = div1.childNodes
console.log( div1.childNodes )//还会含有text文本标签，nodeType 等于3
const div1ChildNodesP = Array.prototype.slice.call(div1.childNodes).filter(child => {
if (child.nodeType === 1) {
return true
}
return false
})
console.log('div1ChildNodesP', div1ChildNodesP)
- 删除子元素
div1.removeChild( div1ChildNodesP[0] )
DOM性能
- DOM操作非常“昂贵”，避免频繁的DOM操作
- 对DOM查询做缓存
//不缓存 DOM 查询结果
for (let i = 0; i < document.getElementsByTagName('p').length; i++){
//每次循环，都会计算length，频繁进行DOM查询
}
//缓存 DOM 查询结果
const pList = document.getElementsByTagName('p')
const length = pList.length
for (let i = 0; i < length ; i++){
//缓存length，只进行一次DOM查询
}
- 将频繁操作改为一次性操作，一次性插入多个节点，考虑性能
const list = document.getElementById('list')
// 创建一个文档片段，此时还没有插入到 DOM 结构中
const frag = document.createDocumentFragment()
for (let i = 0; i < 20; i++) {
const li = document.createElement('li')
li.innerHTML = `List item ${
i}`
// 先插入文档片段中
frag.appendChild(li)
}
// 都完成之后，再统一插入到 DOM 结构中
list.appendChild(frag)
console.log(list)
BOM（Browser Object Model）
- navigator（浏览器信息）
const ua = navigator.userAgent
const isChrome = ua.indexOf('Chrome')
console.log(isChrome)
- screen（屏幕信息，例如宽度高度等）
console.log(screen.width)
console.log(screen.height)
- location（地址信息）
console.log(location.href)
console.log(location.protocol) //http:或https:
console.log(location.pathname)
console.log(location.search)
console.log(location.hash)
- history（前进后退信息）
history.back()
history.forward()
事件
- 事件绑定
const btn = document.getElementById('btn1')
btn.addEventListener('click', event => {
console.log('clicked')
})
//通用的绑定函数
function bindEvent(elem,type,fn){
elem.addEventListener(type,fn)
}
const a= document.getElementById('link1')
bindEvent(a, 'click', (e)=> {
// console.log(event.target) // 获取触发的元素
event.preventDefault() // 阻止默认行为
alert('clicked')
})
- 事件冒泡
从下向上进行冒泡
<body>
<div id="div1">
<p id="p1">激活</p>
<p id="p2">取消</p>
<p id="p3">取消</p>
<p id="p4">取消</p>
</div>
<div id="div2">
<p id="p5">取消</p>
<p id="p6">取消</p>
</div>
</body>
const p1 = document.getElementById('p1')
const body = document.body
bindEvent(p1,'click',e => {
e.stopPropagation() //阻止冒泡，可以注释这一行，来体会事件冒泡，没有这一行的话会先弹激活，再弹取消，有这一行只弹激活
alert('激活')
})
bindEvent(body,'click',e => {
alert('取消')
})
- 事件代理
代码简洁、减少浏览器内存占用、但是不要滥用
<div id="div1">
<a href="#">a1</a>
<a href="#">a2</a>
<a href="#">a3</a>
<a href="#">a4</a>
</div>
<button>点击增加一个a标签</button>
const div1 = document.getElementById('div1')
bindEvent(div1,'click',event => {
event.preventDefault() // 阻止默认行为
const target = event.target
if(target.nodeName === 'A'){
alert(target.innerHTML)
}
})
<body>
<button id="btn1">一个按钮</button>
<div id="div3">
<a href="#">a1</a><br>
<a href="#">a2</a><br>
<a href="#">a3</a><br>
<a href="#">a4</a><br>
<button>加载更多...</button>
</div>
</body>
//通用的事件绑定函数，兼容事件绑定和事件代理
function bindEvent(elem, type, selector, fn) {
if (fn == null) {
fn = selector
selector = null
}
elem.addEventListener(type, event => {
const target = event.target
if (selector) {
// 代理绑定
if (target.matches(selector)) {
fn.call(target, event)
}
} else {
// 普通绑定
fn.call(target, event)
}
})
}
// 普通绑定
const btn1 = document.getElementById('btn1')
bindEvent(btn1, 'click', function (event) {
// console.log(event.target) // 获取触发的元素
event.preventDefault() // 阻止默认行为
alert(this.innerHTML)
})
// 代理绑定
const div3 = document.getElementById('div3')
bindEvent(div3, 'click', 'a', function (event) {
event.preventDefault()
alert(this.innerHTML)
})
//描述事件冒泡的流程
基于DOM树形结构
事件会顺着触发元素往上冒泡
应用场景：代理
//无限下拉的图片列表，如何监听每个图片的点击
事件代理
用e.target获取触发元素
用matches来判断是否是触发元素
Ajax
XMLHttpRequest
//get请求
const xhr = new XMLHttpRequest()
xhr.open('GET', '/data/test.json', true) //true为异步，false为同步
xhr.onreadystatechange = function () {
//这里的函数异步执行
if (xhr.readyState === 4) {
if (xhr.status === 200) {
// console.log(
// JSON.parse(xhr.responseText)
// )
alert(xhr.responseText)
} else if (xhr.status === 404) {
console.log('404 not found')
}
}
}
xhr.send(null)
//post请求
const xhr = new XMLHttpRequest()
xhr.open('POST', '/login', true) //true为异步，false为同步
xhr.onreadystatechange = function () {
//这里的函数异步执行
if (xhr.readyState === 4) {
if (xhr.status === 200) {
// console.log(
// JSON.parse(xhr.responseText)
// )
alert(xhr.responseText)
} else if (xhr.status === 404) {
console.log('404 not found')
}
}
}
const postData = {
name:"zhangsan",
passsword:"xxx"
]
xhr.send(JSON.stringify(postData))
状态码
xhr.readyState
- 0-（未初始化）还没有调用send()方法
- 1-（载入）已调用send()方法，正在发送请求
- 2-（载入完成）send()方法执行完成，已经接收到全部响应内容
- 3-（交互）正在解析响应内容
- 4-（完成）响应内容解析完成，可以再客户端调用
xhr.status
- 2xx-表示成功处理请求，如200
- 3xx-需要重定向，浏览器直接跳转，如301,302,304
- 4xx-客户端请求错误，如404,403
- 5xx-服务器端错误
跨域：同源策略，跨域解决方案
- 什么是跨域（同源策略）
//同源策略
//1.ajax请求时，浏览器要求当前网页和server必须同源（安全）
//2.同源：协议、域名、端口，三者必须一致
//3.前端：http://a.com:8080/;server:https://b.com/api/xxx(线上默认80端口)
//加载图片 css js 可无视同源策略
//1.
//2.
//3.
//加载图片 css js 可无视同源策略
//1.![]()
可用于统计打点，可使用第三方统计服务
//2.可使用CDN，CDN一般都是外域
//3.