前端学习总结——JS-web-API

• JS-web-API
  • DOM
  • BOM
  • 事件
  • Ajax
  • 存储

DOM

• DOM本质是一棵树, 节点树
• DOM节点操作
  • 获取节点: id\ tagname( 集合 )\ classname( 集合 )\ css选择器获取( queryselector\ queryselectall )
  • attribute: getAttribute(), setAttribute(), 修改HTML属性, 会改变HTML结构
  • property: p1.style.width = ‘100px‘; 对DOM元素的对象属性做修改, 不会体现到HTML结构中( 尽量用property操作, 避免重新渲染耗费性能 )
  • 新建节点: createElement()
  • 插入节点: appendChild()
  • 移动节点: 对现有节点直接执行appendChild会移动这个节点
  • 获取父元素: div1.parentNode
  • 获取子元素列表: div1.childNodes( 包括标签元素, text文本元素 )
  • 子元素中文本元素的nodeType = 3; 标签元素nodeType = 1;
  • 删除子元素: removeChild( p[0] );
• DOM性能:
  • DOM操作非常"昂贵", 避免频繁的DOM操作
  • 对DOM查询做缓存
  • 将频繁操作改为一次性操作
  • 创建文件片段：
    • 此时这个片段还没有插入到DOM树中: let frag = document.createDocumentFragment()
    • 在循环体中执行插入: frag.appendChild(li);
    • 在循环体外, 一起插入到DOM树中: listNode.appendChild(frag);

BOM

• navigator.userAgent：查看浏览器信息
• location：地址读取和设置
• 拆解地址信息各个部分：
  • location.protocol：https:，http: 协议
  • location.href：完整地址
  • location.host：域（服务器名+端口号）www.bilili.com:8080
  • location.hostname：域名（服务器名）www.bilili.com
  • location.pathname：url中的路径和文件名 /a/b/practice.html
  • location.search：query参数，以？开头的查询字段 ?a=12&b=1
  • location.hash：url散列值， #contents
• screen：screen.witch，screen.height
• history：history.back(); history.forward(); history.go();

事件

• 事件代理
  • event.target() 获取触发的元素
  • event.preventDefault() 阻止默认行为发生
  • event.stopPropagation() 阻止冒泡（event.cancelBubble = true）
• 事件冒泡
  • 一个元素发生事件，此元素的事件处理完会逐级再向上发生父级的事件，并一直追溯到最终没有事件祖先为止（document）
  • 事件流阶段：捕获阶段（document -> target）、冒泡阶段（target -> document）

Ajax(Asynchronous JavaScript + XML)

function ajax(url) {
    const p = new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest(); // 创建xhr实例
        xhr.open(‘get‘, url, true); // 定义请求
        xhr.onreadystatechange = function () {
            if(xhr.readyState === 4) { // 数据响应阶段0-4，未初始化到完成接收所有响应
                if(xhr.status === 200) { // HTTP状态码，数据响应成功与否
                    resolve(
                        JSON.parse(xhr.responseText)  // 响应数据
                    )
                } else if (xhr.status === 404) {
                    reject(new Error(‘404 not found‘)) 
                }
            }
        }
        xhr.send(null);  // 发送请求
    })
    return p;
}

• 同源请求：协议、域名、端口三者必须全一致才是同源。
  • 同源策略：ajax请求时，浏览器为了安全要求当前网页和服务器必须同源。
  • 跨源资源共享（CORS：Cross-Origin Resource Sharing）要求服务端支持，设置HTTP-header
  • 图片探测：利用<img>标签实现跨域通信，只能发送get请求，无法获取服务器响应的内容，一般用于跟踪用户在页面上的点击操作或者动态显示广告
  • jsonp（json with padding）：动态创建script元素并为src属性指定跨域的url，例如： http://freelife.net/json?callback=handleResponse（以回调函数的形式指定回调函数名称）
• get请求和post请求：
  • get请求用于向server查询某些信息
  • post请求用于向server发送应该保存的数据，可以发送任意格式和较大的数据，但post请求在发送相同量数据情况下比get请求慢两倍
• ajax常用插件： fetch API、jQuery、axios

fetch(‘/url/bar‘)
.then(response => {
  console.log(response.status); 
  console.log(response.text());  
})

存储

• 描述cookie、localStorage、sessionStorage(从存储容量、易用性、是否跟随HTTP请求发送)
  • cookie：用于浏览器和server通信，早期被借用到本地存储，可用 document.cookie = " " 来修改，用法单一易用性差，存储大小最多4kb，发送HTTP请求时要发给服务端，会增加请求的数据量；
  • localStorage和sessionStorage是HTML5专门为本地存储设置的，最大可存储5M（每个域名、每个host），api简单易用：setItem、getItem，不会跟着HTTP请求发送出去；
  • localStorage数据永久存储，除非代码或手动删除
  • sessionStorage数据只存在于当前会话，浏览器关闭就清空

前端学习总结——JS-web-API

原文：https://www.cnblogs.com/nicolelhh/p/14255630.html