前端学习总结——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数据只存在于当前会话,浏览器关闭就清空