前端知识点总结（#3 JS-Web-API）

四、JS-Web-API

1. DOM（Document Object Model）

1. vue和React框架应用广泛，封装了DOM操作
2. DOM： 文件对象模型
3. DOM的本质：从HTML文件中解析出来的一棵树
4. DOM属于哪一种数据结构：树
5. DOM节点操作常见API

• 获取DOM节点：用CSS选择器。例如getElementByxxx('xx')
• attribute和property操作

• 新增/插入节点
• 获取子元素列表，获取父元素
• 删除子元素

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')
div.appendChild(p1)

// 获取父元素
console.log(p1.parentNode)

// 获取子元素列表
const div1ChildNodes = div1.childNodes
console.log(div1.childNodes)
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] )

6. DOM性能

• DOM操作非常昂贵，要尽量避免频繁的DOM操作
• 方法一：对DOM查询做缓存
• 方法二：将频繁操作改为一次性操作（先依次插入文档片段中，都完成后，再统一插入到DOM树中）

7. attribute和property的区别

• property：修改的是对象属性（DOM元素的JS变量的属性），不会体现到html结构中。例如p.style.width
• attribute：修改的是html属性（DOM结构的标签的属性），会改变html结构。例如：p.setAttribute('data-name', 'immoc')
• property和attribute都可能引起DOM重新渲染，通常情况下尽量使用property操作（渲染的次数相对少）

8. 如何在考虑性能的情况下一次性插入多个DOM节点？（同６题）

2. BOM（Browser Object Model）操作

1. 如何识别浏览器的类型？

• navigator.userAgent

2. 如何分析拆解url各个部分？

• location.href
• location.protocol
• location.search
• location.hash
• location.pathname

3. 获取其它信息

• screen.height
• screen.width
• history.back()
• history.forward()

3. 事件绑定

1. 编写一个通用的事件监听函数

2. 描述事件冒泡的流程

• 给某个DOM绑定事件，给父级绑定另一个事件，则会从某个DOM的绑定事件开始激活，冒泡向上处理事件
• event.stopPropagation() // 阻止冒泡
• 流程：基于DOM树形结构，事件会顺着触发元素往上冒泡，应用场景：代理

3. 事件代理

• 把事件绑定到多个平行DOM的父节点上，用来获取或判断
• 特点：代码简洁，减少浏览器内存占用，但是不要滥用

4. 无限下拉的图片列表，如何监听每个图片的点击？

• 事件代理
• 用e.target获取触发元素
• 用matches来判断是否是触发元素

4. Ajax

1. XMLHttpRequest

const xhr = new XMLHttpRequest()
xhr.open('POST', '/login', true) // true表示异步，false表示同步
xhr.onreadystatechange = function() {
    if(xhr.readyState === 4) { //
        if(xhr.status === 200) {
            alert(xhr.responseText)
        } else {
            console.log('其它情况')
        }
    }
}

const postData = {
    userName: 'zhangsan',
    password: 'xxx'
}

xhr.send(JSON.stringify(postData))

2. xhr.readyState

• 0：（未初始化），还没有调用send()方法
• 1：（载入）已调用send()方法，正在发送请求
• 2：（载入完成）send()方法执行完成，已经接收到全部响应内容
• 3：（交互）正在解析响应内容
• 4：（完成）响应内容解析完成，可以在客户端调用

3. 状态码

• 2xx: 成功处理请求
• 3xx: 需要重定向，浏览器直接跳转
• 4xx: 客户端请求错误
• 5xx: 服务器端错误

4. 跨域

• 同源策略：Ajax请求时，浏览器要求当前网页和server必须同源（安全），即协议、域名、端口三者必须一致。
• 加载图片，css，js可无视同源策略

• • 可用于统计打点，可使用第三方统计服务

• 跨域解决方案

• • JSONP
  • CORS

5. 手写一个简易的ajax
6. ajax常用工具

• jQuery
• fetch()

• • fetch()返回的Promise不会被标记为reject
  • 默认情况下，fetch不会从服务端发送或接收任何cookies

• axios：支持browser和node

5. 存储

1. cookie

• 本身用于浏览器和server通讯，被“借用”到本地存储来
• 可用document.cookie = ‘...’来修改
• 缺点：

• • 存储大小 很小（最大4KB）
  • http请求时需要发送到服务端，增加请求数据量
  • 只能用document.cookie = ‘...’来修改，太过于简陋

2. localStorage和sessionStorage共同点

• HTML5专门为存储而设计，最大可存5M
• API简单易用

• • setItem
  • getItem

• 不会随着http请求被发送出去

3. localStorage和sessionStorage的区别

• localStorage数据会永久存储，除非代码或手动删除
• sessionStorage数据只存在于当前会话，浏览器关闭则清空
• 一般用localStorage会更多一些

4. cookie和localStorage，sessionStorage的区别

• 容量
• API易用性
• 是否跟随http请求发送出去