jsapi

一只小PP

816人浏览 · 2020-03-05 11:52:32

一只小PP · 2020-03-05 11:52:32 发布

js API
从基础知识JS-web-API
js基础知识：ECMA 262标准
js-web-API: w3c标准
W3c标准中关于js的规定有
DOM操作、BOM操作、事件绑定、ajax请求（包括http协议）、存储
常说的js（浏览器执行的js）包含两部分：
1、js基础知识（ECMA262标准）
2、JS-Web-API（w3c标准）
一、DOM操作
知识点：DOM本质、DOM节点操作、DOM结构操作
1、DOM本质树
DOM就是Document+Object+Model（文档对象模型）。
2、DOM节点操作
DOM可以理解为：浏览器把拿到的HTML代码，结构化为一个浏览器可识别并且js可操作的一个模型而已。
（1）、获取DOM节点
var div1 = document.getElementById(‘div1’);//元素
var divList = document.getElementsByTagName(‘div’);//集合
console.log(divList.length);
console.log(divList[0]);
var containerList = document.getElementsByClassName(’.container’);
var pList = document.querySelectorAll(‘p’);//集合
(2)、property 属性
var pList = document.querySelectorAll(‘p’);
var p = pList[0];
console.log(p.style.width);//获取样式
p.style.width = ‘100px’;//修改样式
console.log(p.className);//获取class
p.className = ‘p1’;//修改class
//获取nodeName和nodeType
console.log(p.nodeName);
console.log(p.nodeType)
(3)、Attribute 属性
var pList = document.querySelectorAll(‘p’);
var p = pList[0];
p.getAttribute(‘date-name’);
p.setAttribute(‘date-name’,‘imooc’);
p.getAttribute(‘style’);
p.setAttribute(‘style’,‘font-size:30px’)
3、DOM结构操作
新增节点、获取父元素、获取子元素、删除节点
（1）、新增节点
var div1 = document.getELementById(‘div1’);
//添加新节点
var p1 = document.createElement(‘p’);
p1.innerHTML = ‘this is p1’;
div1.appendChild(p1);//添加新创建的元素
//移除已有节点
var p2 = document.getElementById(‘p2’);
div1.appendChild(p2);
（2）、获取父元素和子元素
var div1 = document.getELementById(‘div1’);
var parent = div1.parentElement;//父元素
var child = div1.childNodes;//子元素
div1.removeChild(child[0]);//删除节点
解题
1、DOM是哪种基本的数据结构
树
2、DOM操作的常用API有哪些
获取DOM节点、以及节点的property和attribute；
获取父元素，获取子元素
新增节点，删除子元素
3、DOM节点的Attribute和property有何区别
property只是一个js对象的属性的修改
Attribute是对html标签属性的修改
二、BOM
Brower object model 浏览器对象模型
知识点
navigator(浏览器)、screen(屏幕)、location(地址)、history(历史)
（1）、navigator & screen
//navigator
var ua = navigator.userAgent;
var isChrome = ua.indexOf(‘chrome’);
console.log(isChrome)
//screen
console.log(screen.width);
console.log(screen.height);
(2)、location & historylocation.href //地址
location.protocal //‘http’ ‘https’
location.host //集合
location.pathname //’/learn/199’路径
location.search //?参数
location.hash //#
//history
history.back()
history.forward()
解题
如何检测浏览器的类型

var ua = navigator.userAgent;
var isChrome = ua.indexOf(‘chrome’);
console.log(isChrome)
三、事件绑定
知识点：通用事件绑定；事件冒泡；代理
1、通过事件绑定
var btn = document.getElementById(‘btn1’);
btn.addEventListener(‘click’,function(event){
console.log(‘clicked’);

})
function bindEvent(elem,type,fn){
elem.addEventListener(type,fn);
}
var a = document.getElementById(‘link1’);
bindEvent(a,‘click’,function(e){
e.preventDefault();//阻止默认行为
alert(‘clicked’);
})
关于IE低版本的兼容性
IE低版本使用attachEvent绑定事件，和w3c标准不一样
2、事件冒泡

激活

取消

a1 a2

完善通用绑定事件的函数

a1 a2

解题简述事件冒泡流程 DOM树形结构->事件冒泡 --> 阻止冒泡 --> 冒泡的应用四、ajax 知识点:XMLHttpRequest、状态码说明、跨域 1、XMLHttpRequest var xhr = XMLHttpRequest; xhr.open('GET','api',false); xhr.onreadystatechange = function(){ //这里的函数异步执行，可参考之前js基础的异步模块 if(xhr.readyState == 4){ if(xhr.status == 200){ alert(xhr.responseText) } } } xhr.send(null); //IE兼容问题; //IE低版本使用ActiveXObject和w3c标准不一样 2、readyState 状态码说明 0---（未初始化）还没有调用send()方法 1--- (载入)已调用send方法，正在发送请求 2---（载入完成）send()方法执行完成，已经接收到全部响应内容 3---（交互）正在解析内容 4---（完成）响应内容解析完成，可以在客户端调用了 3、status状态码说明 2xx --- 表示成功处理请求，如200； 3xx --- 需要重定向，浏览器直接跳转； 4xx --- 客户端请求错误，如404 5xx --- 服务端错误 4、跨域什么是跨域、JSONP、服务器端设置http header (1)、什么是跨域？浏览器有同源策略，不允许ajax访问其他域接口 http://www.yourname.com:80/page1.html http端口80 https端口默认443 跨域条件：协议、域名、端口有一个不同就算跨域（2）、可以跨域的三个标签有三个标签允许跨域加载资源

(6)、服务器端设置http header
另外一个解决跨域的简洁方法，需要服务端来做，但是作为交互方，我们必须知道这个方法，是将解决跨域问题的一个趋势。
五、存储
知识点：cookie、locationStorage 和sessionStorage
1、cookie
本身用于客户端和服务端通信
但是它有本地存储的功能，于是就被“借用”；
使用document.cookie = … 获取和修改即可
（1）、cookie用于存储的缺点
存储量太小，只有4kb
所有http请求都带着，会影响获取资源的效率
API简单，需要封装才能用document.cookie = …
(2)、locationStorage和sessionStorage
HTML5专门为存储而设计，最大容量5M（兆）
API简单易用
localStorage.setItem(key,value)
localStorage.getItem(key,value)
ios safar隐藏模式下 localStorage.getItem会报错