一、内置对象属性
1、window
window是在浏览器中代表全局作用域，所有在全局作用域下声明的变量和内容最终都会变成window对象下的属性。
访问未声明的变量时，如果直接访问则会报错，而如果使用window进行访问，就像通过对象访问那样，会返回undefined
2、setTimeout和setInterval
setTimeout和setInterval他们都可以接受两个参数，第一个参数是一个回调函数，第二个参数是等待执行的时间。
在等待时间结束后，就会将回调函数放到event loop中进行执行。他们都返回一个id，传入clearTimeout和
clearInterval能够清除这次的定时操作
重点：
如果此时队列中内容内容，则会立即执行回调函数，如果此时队列中有内容，则会等待内容执行完之后再执行函数。（所以即使等待时间结束，也不是立即执行这个回调函数）
因为setInterval执行时间的不确定性，所以大部分时候，我们会使用setTimeout来模拟setInterval
3、alert confirm prompt
使用了这类API之后，会导致JS停止执行，需要我们格外慎重
4、Location
属性：
- hash：url的锚部分
- host：url的主机名和端口
- hostname：url的主机名
- href：当前url
- pathname：url路径名
- port：url服务器使用的端口号
- protocol：url协议
- search：url的查询部分
方法：
- reload：重新载入当前页面
- replace：用新的页面替换当前页面
5、Document
方法：选择器
选择器是考察浏览器相关的知识点重中之重，一般结合实际场景进行考察
- getElementById
- getElementsByClassName
- getElementsByTagName
- querySelector
- querySelectorAll
getElementsByTagName等，返回的是多个node节点的函数返回值并不是数组，
而是浏览器实现的一种数据结构
方法：创建元素
document.createElement能够创建一个dom元素，在新增多个元素时，可以先在内存中拼接处所有的dom元素后一次插入
属性：
- title：document.title可以设置或返回当前页面标题
- domain：展示当前网页的域名
- url：当前网站的连接
- anchors：返回所有的锚点，带name属性的a标签
- forms：返回所有的form标签集合
- images：返回所有img标签集合
- links：返回所有带href属性的a标签
6、Element
Element元素的nodeType均为1，大多数标签都是一个Element实例
属性：
tagName:返回当前元素的标签名
方法：
getAttribute：获取当前节点属性的结果
setAttribute：设置当前节点属性
7、Text类型
text类型包含所有纯文本内容，他不支持子节点，同时他的nodeType为3
8、History
History对象包含用户（在浏览器窗口中）访问过的URL，在HTML5中，history还与客户端路由息息相关
属性
- length：返回历史列表中的网址数
方法
- back：加载history列表中的前一个url
- forward：加载history列表中的下一个url
- go：加载history列表中的某具体的页面
- pushState：替换地址栏地址，并且加入history列表，但并不会刷新页面
- replaceState：替换地址栏地址，替换当前页面在history列表中的记录，并不刷新页面
二、事件
1、事件定义方式
1、直接在Dom中添加
<p onclick="alert(123)"></p>
缺点：过分的将视图与逻辑部分的代码解耦合
2、纯JS解决，获取dom后设置onclick属性
document.getElementById("box").onclick = function(){}
优点：纯js实现，视图和逻辑解耦
缺点：一个dom元素仅能设置一个onclick事件
3、纯JS解决，通过addEventListener添加事件，removeEventListener移除事件
const dom = getElementById("dom");
function onClick(){}
dom.addEventListener("click",onClick)
dom.removeEventListener("click",onClick)
优点：
1、纯JS实现，视图与逻辑解耦
2、通过addEventListener可以对click设置多个事件，他们会一次触发
缺点：
1、removeEventListener删除的事件函数必须与设置保持相同的函数引用，所以设置事件时尽量不使用匿名函数
2、兼容IE事件
attachEvent
detachEvent
3、事件捕获及冒泡
DOM是一个嵌套的树形树状结构
4、事件对象
event对象属性：
- bubbles: 表明事件是否冒泡
- cancelable: 表示是否可以取消事件的默认行为
- currentTarget: 事件当前正在处理元素
- defaultPrevented: 为true则代表已经调用了preventDefault函数
- detail: 事件细节
- eventPhase: 事件所处阶段：1代表捕获；2代表在事件目标；3代表冒泡
- type:事件类型
5、event方法
- preventDefault: 取消事件的默认行为
- stopImmediatePropagation: 取消事件的进一步捕获或冒泡，同时阻止事件处理程序调用
- stopPropagation:取消事件的进一步捕获或冒泡
6、事件委托
三、ajax
1、ES6之后的API
1、fetch api返回一个promise结果
2、默认不带cookie，需要使用配置credentials:"include"
3、当网络故障时或者请求被阻止时，才会标记reject。否则返回码是500，也会resolve这个promise
2、封装通用ajax
function fetch(url, config = {}) {
if (window.fetch) return window.fetch(url, config);
return new Promise((resolve, reject) => {
function createXHR() {
if (typeof XMLHttpRequest !== undefined) {
return new XMLHttpRequest();
}
// 兼容早期IE
if (typeof ActiveXObject !== undefined) {
if (typeof arguments.callee.activeXString !== 'string') {
var versions = ['MSXML2.XMLHttp.6.0', 'MSXML2.XML2.XMLHttp.3.0', 'MSXML2.XMLHttp'];
for (var i = 0; i < versions.length; i++) {
try {
new ActiveXObject(versions[i]);
arguments.callee.activeXString = versions[i];
break;
}
catch (e) {
console.log(e)
}
}
}
return new ActiveXObject(arguments.callee.activeXString)
}
throw new Error('不支持xhr相关内容')
}
var xhr = createXHR();
xhr.onreadystatechange = function () {
console.log(hxr);
if (xhr.readyState !== 4) return;
var options = {
status: xhr.status,
statusText: xhr.statusText
}
var body = 'response' in xhr ? xhr.response : xhr.responseText;
var response = {
status: options.status || 200,
statusText: options.statusText,
ok: options.status >= 200 && options.status < 300,
text() {
if (typeof body === 'string') {
return Promise.resolve(body);
}
},
json() {
return this.text().then(JSON.parse)
}
}
resolve(response)
}
xhr.open(config.method || 'get', url, true);
xhr.send();
})
}
