回顾JS基础知识
- 特点：表面看起来不能用于工作中开发代码。
- 内置函数：Object Array Boolean String ......
- 内置对象：Math JSON
- 我们连网页弹出一句‘hello world’都不能实现
常说的JS包含两部分：
- JS基础知识（ECMA262标准）：//规定基础语法、规则
- JS-Web-API(W3C标准)：//浏览器需要让开发者做更多事情。例如，如何弹出一个框
JS-Web-API
W3C标准关于JS的规定有
- DOM操作
- BOM操作
- 事件绑定
- ajax请求（包括http协议）
- 存储
JS-Web-API
页面弹框window.alert(123)，浏览器需要做：
1）定义一个window全局变量，对象类型
2）给它定义一个alert属性，属性值是一个函数
获取元素document.getElementById(id)，浏览器需要做：
1）定义一个document全局变量，对象类型
2）给它定义一个getElementById的属性，属性值是一个函数。
但w3c标准没有规定任何JS基础相关的东西
不管什么变量类型、原型、作用域和异步（这些是ECMA262规定的）
只管定义用于浏览器中JS操作页面的API和全局变量。
全面考虑，JS内置的全局函数和变量有哪些？
1）之前讲过的 Object Array Boolean String Math JSON等
2）刚刚提到的window document
3）接下来要讲的navigator，所有未定义的全局变量
NodeJS包含JS基础知识（ECMA262标准），但不含W3C标准，因为nodeJs不是跑在浏览器的，而是在服务器中。
前端的JS则是二者的集合。
第六篇 DOM和BOM
题目：
1.DOM是哪种基本的数据结构2.DOM操作常用的API有哪些3.DOM节点的attr和property有何区别4.如何检测浏览器的类型5.拆解url的各部分
知识点#####
- DOM本质
DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML 交互的API文档。DOM 是载入到浏览器中的文档模型，它用节点树的形式来表现文档，每个节点代表文档的构成部分（例如： element——页面元素、字符串或注释等等）。
DOM可以理解为浏览器把拿到的HTML代码，结构化为一个浏览器能识别并且js可操作的模型。
// HTML是XML的特殊类型
- BOM本质
BOM（Browser Object Document）即浏览器对象模型。
BOM提供了独立于内容 而与浏览器窗口进行交互的对象；
由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window；
BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性； - DOM节点操作
- 获取DOM节点
var div1=document.getElementById('div1')
//元素
var divList=document.getElementByTagName('div')
//集合
console.log(divList.length);
console.log(divList[0]);
var containerList=document.getElementByClassName('.container')
//集合
var pList=document.querySelectorAll('p')
//集合
- property
js对象的属性
var pList=document.querySelectorAll('p')var p=pList[0]//获取了DOM对象，对象在js中都是可扩展的console.log(p.style.width); //获取样式p.style.width='100px' //修改样式console.log(p.className); //获取classNamep.className='p1' //修改className//获取nodeName和nodeTypeconsole.log(p.nodeName);console.log(p.nodeType);
- Attribute
标签属性，用于扩充HTML标签，可以改变标签行为或提供数据，格式为name=valuevar pList=document.querySelectorAll('p')var p=pList[0]p.getAttribute('data-name')p.setAttribute('data-name','imooc')p.getAttribute('style')p.setAttribute('style','font-size:30px;')
- DOM结构操作
- 新增节点
var div1=document.getElementById('div1')var p1=document.createElement('p') //创建新节点p1.innerHTML='Hello'div1.appendChild(p1) //添加新创建的元素//移动已有节点var p2=document.getElementById('p2')div1.appendChild(p2)
- 获取父子元素、删除节点
var div1=document.getElementById('div1')var parent=div1.parentElement //获取父元素var child=div1.childNodes //获取子元素div1.removeChild(child[0]) //移除child[0]子节点
- navigator&screen
//navigatorvar ua=navigator.userAgentvar isChrome=ua.indexOf('Chrome')console.log(isChrome);//screenconsole.log(screen.width);console.log(screen.height);
- location&history
//locationconsole.log(location.href); //整个URL路径console.log(location.protocol); //http httpsconsole.log(location.pathname); //域名之后的路径console.log(location.search); //?后的参数console.log(location.hash); //#后的内容
//historyhistory.back()history.forward()
解题#####
1.DOM是哪种基本的数据结构
树
2.DOM操作常用的API有哪些
- 获取DOM节点以及节点的property和Attribute
- 获取父节点，获取子节点
- 新增节点，删除节点
3.DOM节点的attr和property有何区别
- property是一个JS对象的属性的修改
- Attribute是HTML标签属性的修改
4.如何检测浏览器的类型
navigator.userAgent
5.拆解url的各部分
//location
console.log(location.href);
console.log(location.protocol);
//协议 http https
console.log(location.pathname);
//域名之后的路径
console.log(location.search);
console.log(location.hash);
第七篇 事件
题目：
1.编写一个通用的事件监听函数
2.描述事件冒泡流程
3.对于一个无限下拉加载图片的页面，如何给每个图片绑定事件
知识点#####
- 通用事件绑定
//标准方法 容易写错，var btn=document.getElementById('btn1');btn.addEventListener('click',function(e){console.log('clicked');})//封装事件绑定
function myBindEvent(elem,type,fn){elem.addEventListener(type,fn)}
var a=document.getElementById('link1');myBindEvent(a,'click',function(e){e.preventDefault(); //阻止默认行为alert('link1 has clicked');})IE低版本使用attachEvent绑定事件，和W3C标准不一样IE低版本使用量已非常少，很多网站都早已不支持建议对IE低版本的兼容性：了解即可，无需深究如果遇到对IE低版本要求苛刻的面试，果断放弃
- 事件冒泡
激活
取消
取消
取消
取消
取消
点击p1，弹出“激活”，如果没有e.stopPropagation()，事件将继续向上冒泡找到body的alert('取消')
- 代理
点击每一个a标签弹出对应的标签内的内容
解题#####
1.编写一个通用的事件监听函数
//仅有这种情况使用'=='
if(obj.a==null){
//此时条件相当于obj.a===null||obj.a===undefined,简写形式
//这是jQuery源码中推荐的写法
}
function myBindEvent(elem,type,selector,fn){
if(fn==null){
fn=selector;
selector=null;
}
elem.addEventListener(type,function(e){
var target;
if(selector){
// 代理
target=e.target;
if(target.matches(selector)){
//判断目标节点是否和选择器匹配
fn.call(target,e); //target被当做fn函数中的this
}
}else{
// 不使用代理
fn(e);
}
})
}
//mathes() 用来判断当前DOM节点能否完全匹配对应的CSS选择器规则；如果匹配成功，返回true，反之则返回false。
//使用代理
var div1=document.getElementById('div1');
myBindEvent(div1,'click','a',function(e){
e.preventDefault();
console.log(this.href);
})
//不使用代理
var btn1=document.getElementById('btn1');
myBindEvent(btn1,'click',function(e){
console.log(btn1.innerHTML);
})
//上一篇知识点：call apply bind
function fn1(name,age){
alert(name)
console.log(this)
}
fn1.call({x:100},'zhangsan',20)
//({x:100}
代理的好处：
- 代码简介 （不用写那么多绑定）
- 减少浏览器内存占用 （绑定一次浏览器累积一次）
2.描述事件冒泡流程
- DOM树形结构
- 事件冒泡
- 阻止冒泡
3.对于一个无限下拉加载图片的页面，如何给每个图片绑定事件
使用代理
第八篇 存储与Ajax
1.请描述一下cookie，sessionStorage，和localStorage的区别2.手动编写一个ajax，不依赖第三方库3.跨域的几种实现方式
知识点#####
- cookie
- 本身用于客户端服务端通信，但它有本地存储的功能于是就被‘借用’，使用documen.cookie=...获取和修改
- 缺点：
- 存储量太小，只有4kb
- 所有http请求都带着，会影响获取资源的效率
- API简单，需要封装才能用，document.cookie=...用起来麻烦
- localStorage和sessionStorage（这两者在HTML5出现之后才出现）
- HTML5专为存储设计，最大容量5M（不用在http请求中携带）
- API：localStorage.setItem(key,value); localStorage.getItem(key); // sessionstorage也是setItem(),getItem().
- IOS Safari隐藏模式下，localStorage.getItem(key);会报错，建议同意使用try-catch封装
- 区别：localstorage可以存储在本地，sessionStorage在浏览器关闭时就会清理。因此多用localstorage。
- cookie sessionStorage localStorage区别
- 容量区别，cookie为4k，localStorage和sessionStorage为5M
- cookie每次请求都会被携带在ajax中，localStorage和sessionStorage不会被携带只作为存储使用
- API易用性 cookie自己封装一大段代码，后两个用两个API基本满足需求
- XMLHttpRequest
var xhr=new XMLHttpRequest()；xhr.open('GET','/api',false)xhr.onreadystatechange=function(){//这里的函数异步执行if(xhr.readyState==4){if(xhr.status==200){alert(xhr.responseText)}}}xhr.send(null)
IE低版本使用ActiveXObject，和W3C标准不一样
IE低版本使用量已非常少，很多网站都早已不支持
建议对IE低版本的兼容性：了解即可，无需深究
如果遇到对IE低版本要求苛刻的面试，果断放弃
- 状态码说明
- readyState
- 0-（未初始化）还没有调用send()方法
- 1-（载入）已调用send()方法，正在发送请求
- 2-（载入完成）send()方法执行完成，已经收到全部响应内容
- 3-（交互）正在解析响应内容
- 4-（完成）响应内容解析完成，可以在客户端调用了
- status
- 2xx-成功处理请求。如200
- 3xx-需要重定向，浏览器直接跳转
- 4xx-客户端请求错误，如404（地址错误）
- 5xx-服务器端错误
- readyState
- 跨域
- 什么是跨域
- 浏览器有同源策略，不允许ajax访问其他域接口
- 什么是跨域
https://m.imooc.com:80/course/ajaxcoursercom?cid=4001
协议：http/https；
域名：www.yourname.com/m.imooc.com
端口：8080/80 不写时使用默认值
- 跨域条件：协议、域名、端口，有一个不同就算跨域
- 可以跨域的三个标签：
补充：JSONP 是 JSON with padding（填充式 JSON 或参数式 JSON）的简写。JSONP实现跨域请求的原理简单的说， 就是动态创建