为了面试自己写的概要，参考文献：《javascript高级程序设计》
1、选择符API
*querySelector()
querySelector()接收一个css选择符，返回与选择符匹配的第一个元素，如果没有就返回null。
当用document调用它的时候，在所有的document元素中查找，
如果用元素调用这个方法，就会在元素所有后代元素中查找。
若果匹配到不合法的css选择符，就是报错。
*querySelectorAll()
querySelector()接收一个css选择符，与querySelectorAll()一样，它返回的是一个满足css选择符的NodeList，
同样，也可以用document和元素调用它，如果没有找到匹配的选择符，则返回一个空的NodeLIst，如果
css选择符不合法，则会抛出错误。
*matchesSelector()
matchesSelector()方法接收一个css选择符，它可以返回调用元素是否与该选择符匹配，所以
它的返回值是布尔类型，如果可以匹配则返回true，若果不匹配则返回false。
matchesSelector()一般可以用来检查所选元素能不能被querySelector()和querySelectorAll()返回，
但浏览器并不能很好的支持matchesSelector，IE9+可以支持msMatchesSelector(),
Firefox3.6+可以支持mozMatchesSelector,Chrome支持webkitMatchesSelector(),所以需要自己封装一个方法：
function matchesSelector(element,selector){
if(element.matchesSelector){
return element.matchesSelector(selector);
}else if(element.msMatchesSelector){
return element.msMatchesSelector(selector);
}else if(element.mozMatchesSelector){
return element.mozMatchesSelector(selector);
}else if(element.webkitMatchesSelector){
return element.webkitMatchesSelector(selector);
}else{
throw new Error("浏览器不支持");
}
}
2、javaScript中的节点属性
*节点属性：
nodeType 每个节点都有，返回值分别为1~12的的整数，代表不同的节点类型
parentNode 指向每个节点的父节点，只有一个。
childNodes 返回一个元素的所有子节点。
previousSibling 返回当前节点的上一个兄弟节点，如果当前节点是childNodes中的第一个节点，则返回null。
nextSibling 返回当前节点的下一个兄弟节点，如果当前节点是childNodes中的最后一个节点，则返回null。
*操作节点：
appendChild() 插入节点，并且被插入的节点作为父节点的最后一个子节点。即被插入节点的nextSibling为nulll；
insertBefore() 插入节点，但是insertBefore("","")接收两个参数，第一个参数是被插入的节点，第二个参数是参照节点，
执行完insertBefore后，被插入的节点将会作为参照的节点的上一个兄弟节点被插入（即previousSibling），
第二个参数也可以是null，这样就达到了和appendChild()相同的效果。
replaceChild() 替换节点，replaceChild()接收两个参数，第一个参数为要插入的节点，第二个参数为要替换的节点，
被替换的节点仍然存在于文档中，但却失去了在文档中的位置。
removeChild() 移除节点，removeChild()接收一个参数，就是被移除的节点，该方法的返回值为被移除的节点。被移除的节点
仍然存在于文档中，但是却失去了在文档中的位置。
*document节点
document存在的属性：
document.URL 取得当前页面完整的URL
document.domain 取得当前页面的域名
document.referrer 取得当前页面的来源页面地址，如果没有返回空字符串
3、HTML5中的自定义数据属性
HTML5中规定为元素添加非标准的属性时要加上前缀data-，目的是为元素提供与渲染无关的信息，或单纯是为了语义信息，可以随便添加
只要以data-开头即可。然后可以通过dataset来访问响应的值，并且用dataset取值的时候属性名没有了data-前缀，如果属性为data-myname
则只需要用 Selector.dataset.myname即可。
4、HTML5中插入标记的三种方式
*innerHTML
在读的模式下，innerHTML会返回调用它的元素的所有子节点的HTML代码。
在写的模式下，innerHTML接收一段html代码作为参数，会根据制定的参数创建新的DOM树，然后用新的DOM树替换原来的DOM树。
*outerHTMl
在读得模式下，outerHTML会返回包括调用它的元素和所有子节点的全部HTML标记。
在写的模式下，相当于根据参数创建新的DOM树，然后替换包括调用该方法在内的DOM树。
转换为代码就是：
div.outerHTML("<p>this is text</p>");
var p = document.createElement(‘p‘);
p.append(document.createTextNode(‘this is text‘));
div.parentNode.replace(p,div);
*insertAdjacentHTML()方法
接收两个参数，第一个参数是要插入的位置，第二个参数是要插入的元素。
第一个参数为beforebegin，表示在当前元素前插入一个同辈元素。
第一个参数为afterbegin，??????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????表示????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????在当前元素之下插入一个新的子元素或者在第一个子元素之前在插入一个新的子元素。
第一个参数为beforeend，表示在当前元素之下插入一个新的子元素或者在最后一个子元素之后再插入一个新的子元素。
第一个参数诶afterend，表示在当前元素之后插入一个紧邻的同辈元素。
5、DOM中的计算样式：
*DOM2中的计算样式：
增强了document.defaultView.getComputedStyle("","") 传入两个参数，第一个参数传入的要计算样式的元素，第二个参数是一个伪元素
字符串，如果不需要获得伪元素的信息可以传入null；最终调用的形式为 var style = document.defaultView.getComputedStyle(div,null);最终采用
这样的形式取出计算后的样式。style.backgroundColor,style.width,style.height。
在IE中没有getComputedStyle属性，IE中用currentStyle返回类型跟getComputedStyle一样，调用形式为 myDiv.currentStyle。
*cssDOM中的偏移量offset
offsetWiidth 元素在水平方向上占用的空间的大小，包括元素的宽度，元素的可见的垂直滚动条的宽度，左右边框的宽度。
offHeight 元素在垂直方向上占用空间的大小，包括元素的高度，元素中在水平方向上得滚动条的宽度，上下边框的宽度。
offsetTop 元素上外边框到包含元素的上内边框之间的距离。
offsetLeft 元素左外边框到包含元素的左内边框之间的距离。
offsetParent 所指的是元素的外包含元素。
通用的取得元素相对于文档偏移的函数：
function getElementLeft(element){
var left = element.offsetLeft;
var current = element.offsetParent;
while(current !== null){
left += current.offsetLeft;
current = current.offsetParent;
}
return left;
}
*客户区的大小
clientWidth：
元素内容的宽度加上左右内边距的宽度。
clientHeight：
元素内容的高度加上上下内边距的高度
*元素的滚动的大小
scrollHeight 表示在没有滚动条的情况下，元素内容区的总高度。
scrollWidth 表示在没有滚动条的情况下，元素内容区的总宽度。
scrollTop 表示由于滚动条的存在，元素上方被隐藏的像素数。可以用它来改变滚动条的位置。
scrollLeft 表示由于滚动条的存在，元素左侧被隐藏的像素数。可以用它开改变滚动条的位置。
例如，返回顶部的按钮的例子。
function scrollToTop(element){
if(element.scrollTop != 0){
element.scrollTop = 0;
}
}
*确定元素的大小
getBoundingClientRect()方法看不太懂，mark下。
========================================================================
js中的事件总结：
1、事件捕获和事件冒泡
2、DOM2级事件处理程序
添加事件：addEventListener()
删除事件：removeEventListener()
它们都接受三个参数，第一个参数为事件类型，第二个参数为事件触发的函数，第三个参数是一个布尔类型。ture表示在捕获阶段
调用事件处理程序，false表示在冒泡阶段调用事件处理程序。
要为一个按钮添加事件的例子：
btn.addEventListener("click",function(){alert("btn")},false);
值得注意的是，通过addEventListener()添加的事件只能用removeEventListener()删除，而且保证它们所传入的参数
必须一致才能删除，所有要满足这个规则的话，就有一个问题，就是传入匿名函数的事件将不会被删除。
IE中的事件处理程序：
添加事件：attachEvent()
删除事件:detachEvent()
它们都接受两个参数，第一个参数接受事件类型，这里与addEventListener()不用的是事件类型为基础的事件类型，
即事件类型全是on开头的事件类型，第二个参数接收触发的执行函数。该方法全部采用事件冒泡的方式来调用
事件。值得注意的一点是，attachEvent()执行环境是全局的执行环境，所以在attachEvent()中this的值是window。
3 、计算鼠标位置的事件
clientX：返回鼠标相对于浏览器视口的横坐标。
clientY：返回鼠标相对于浏览器视口的纵坐标。
pageX：鼠标相对于页面的横坐标。
pageY：鼠标相对于页面的纵坐标。
screenX：鼠标相对于屏幕的横坐标。
screenY：鼠标相对于屏幕的纵坐标。
4、鼠标滚轮滚动的事件
mousewheel事件，鼠标滚轮滚动时触发，存在一个wheelDelta属性，根据方向分正负，都是120的倍数，所以可根据wheelDelta属性
来判断鼠标滚动的方向。
5、移动端的触摸与手势事件
touchstart() 当手指触摸屏幕时触发。
touchend() 当手指从屏幕上移开时触发。
touchmove() 当手指在屏幕上连续滑动的时候触发。
touchcancel() 当系统停止跟踪触摸的时候触发。
将NodeList转换为数组
var array = Array.prototype.slice.call(NodeList,0);
将arguments对象转换为数组
var array = Array.prototype.slice.call(arguments,0);
==========================================================
1、js中字符串的操作方法
charAt()可以传入一个索引，返回字符串在该索引处的字符，可以简化，直接用[]中括号里加索引值就能达到相同的效果。
concat() 可以将字符串和字符串连接起来。
slice() 和substring() 可以传入一个或两个参数，传入一个参数时返回第一个索引到字符串尾部的子字符串。传入
第二个参数时返回第一个到第二个索引之间的子字符串。
substr() 传入一个参数时和上边作用一样，传入第二个参数的时候返回从第一个索引到第二个参数个数的子字符串。
indexOf()和lastIndexOf()返回给定字符在字符串中的索引，indexOf从头开始，lastIndexOf从字符串的尾部开始。
2、js中数组的操作方法
join() 方法接收一个参数，将数组转换成字符串并以传入的参数进行分割。
push() 方法接收参数，将参数放入数组的结尾，并返回修改后数组的长度。
pop() 方法从数组的末尾移除一项，并将移除的项返回。
shift() 方法移除数组的第一项并返回该项。
unshift() 方法以第一项的添加给数组，并返回修改后数组的长度。
数组中非常强大的方法：
splice() 提供两个参数的时候，是删除，即第一个参数是要删除的起始项，和要删除的项数。
splice() 如果三个参数，第二个参数为0时，即要删除的项数为0，第一个参数为起始项，可以有第三个，四个或更多的参数，表示从
死一个参数项起，插入后面该项，此时第二个参数为0。
如果第二个参数不为0，就是替换功能，即先从起始项删除相应长度的项，再插入后面传入参数的各个项。
3、HTTP超文本传输协议
分为4个过程：
建立连接
发送请求
发送响应
关闭连接
4、js中的闭包：
闭包在javascript高级程序设计一书中被解释为是指有权访问另一个函数作用域中变量的函数，简单解释可以分为两种，在函数中
作为返回值，作为参数传递。
关于作用域：在javascript中没有块级作用域，而且在javascript中只有函数可以声明一个作用域，而且作用域是在函数声明的时候
就创建的。
关于执行下文：执行上下文是真实存在的，javascript程序在刚执行的时候会自动进入全局环境的执行上下文，在执行上下文中定义
事先声明的变量。然后每调用一个函数，就会在该函数的作用域中创建该函数的上下文执行环境，在函数的作用域中为函数中自己
的变量赋值。当函数执行完毕后，会销毁函数的执行上下文环境。
再次关于闭包：因为闭包是函数中引用另一个函数作用域中变量的函数，所以在调用完外层函数的时候，按常理本应该销毁该函数的
上下文执行环境的，但是因为在函数中还存在一个引用该函数作用域中的变量的函数，所有如果该函数的上下文执行环境被销毁的话
那么引用该函数作用域的值得那个函数将取不到值，所以该函数的上下文执行环境将不会被销毁，这样当调用引用该函数作用域中的
变量的那个函数时，它们两个的上下文执行环境都在内存中，这就是闭包，闭包会增加开销。
5、js中ajax的应用：
首先在javascript中使用ajax的步骤：
1、创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
2、用open()函数建立与服务器的连接：
xhr.open("GET","url",true);
3、用send()函数像服务器发送请求
xhr.send(null);
4、处理结果
处理结果采用xhr的onreadystatechange事件来监听xhr.readyState属性，当属性为4的时候，表示请求发送成功，
并且有返回的数据。可以根据数据进行对页面的操作。
注意：在发送post的时候，需要同时发送一个去请求头。才能正确使用post的一部请求。
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
6、js中的this对象
先总结一句话，this永远指向调用该函数的对象。
============================================================
7、javascript中的对象和其他面向对象的语言有什么差别？
一般传统的面向对象语言都有类的概念，通过类可以创建任意多个具有相同属性和方法的对象，二javascript中却没有类的概念，
ECMAscript中把对象定义为无序属性的集合，其属性可以包含基本值，对象或函数。换句话说，对象是一组没有特定顺序的值，
对象的每一个属性和方法都有一个特定的名字，而每个名字都映射到一个值。
8、web语义化的作用：
为了在没有css的情况下，网页也能呈现很好的内容结构，代码结构。
增强了用户体验，title，alt，label标签的活用
有利于SEO，和搜索引擎建立良好的沟通，有利于爬虫抓取更多的有效的信息。
便于团队的开发和维护，语义化更具有可读性。
9、IE6的浮动双边距bug：
在IE6中，如果为一个元素设置了浮动以后，同时又为元素设置了左右边距，那么在IE6中会产生比实际大的边距。
解决方案是为浮动的元素加上_display:inline;
10、css解决IE中的兼容性问题：
采用渐进识别的方式来解决IE中的问题。
在末尾加上\9可以分离出IE678。
然后再在前面加上+可以分离出IE67。
然后再在前面加上_可以分离出IE6。
例如：
.bb{
background:#ffeedd;所有识别
background:#445566\9; IE678可以识别
+background:#222222; IE67可以识别
_background:#667788; IE6可以识别
}
11、万能的清除浮动的方法：
clearfix:after{
content:‘.‘;
height:0;
visibility:hidden;
display:block;
clear:both;
}
12、js中的new操作符干了什么？
创建了一个空对象，并将this变量引用该对象，同时还继承了该函数的原型。
=============================================
1、js中的BOM对象：(浏览器对象模型)
*window对象：
window对象在ECMAscript中扮演着global对象，定义在window中的对象会自动被加入到global对象当中去，但是这两个对象还是
有一点的小差别，就是定义在window上的对象可以被delete操作符删除，直接定义在global中的对象不能被delete操作符删除。
*window对象的location对象：
window对象中的location对象是非常常用的。location对象常用的属性有几个：
host：返回服务器名称和端口号
hostname：返回不带端口号的服务器名称
href：返回当前页面完整的URL，location的toString()方法返回相同的值。
pathname：返回URL下的目录名或文件名
port：返回URL中指定的端口号
search：返回URl中的查询字符串（以？开头地址栏的参数字符串）
注意：重要的解析查询字符串的方法
该方法主要分为以下的步骤：
1、去掉开头的问号。
2、以&为符号用split将字符串分割成数组（现在数组的每个元素都是name=value的形式）；
3、建立将要返回的保存查询字符串的对象。
4、然后用for循环遍历，再用“=”分割，取数组中第1位和第2位保存值。
5、将值装入到所要返回的对象中去。
function getQueryStringArgs(){
var qStr = (location.search.length > 0 ? qStr.substring(1) : " ");//去掉开头的？
var arg = {};
items = (qStr.length > 0 ? qStr.split("&") : []);
item = null;
name = null;
value = null;
for(var i = 0; i < items.length; i++){
item = items[i].split("=");
name = item[0];
value = item[1];
if(name.length){
arg[name]= value;
}
}
return arg;
}
*window对象中的navigator对象：
onLine检测浏览器是否连接了互联网。
*用navigator对象检测浏览器的插件
用数组，window.navigator.plugins获取插件的数组。数组里可以访问插件的name，和decription属性。
IE中不支持上述方法，IE中用ActiveXObject检测插件。
*window对象中的history对象：
history对象中的最基本的方法就是go()方法：
go()方法可以接收一个数字作为参数，数字可以是正数（正数表示向前进），也可以是负数（负数表示向后退），
例如，window.history.go(1)//表示向前进一页。
window.history.go(-1)//表示向后推一页
go()方法也可以接收字符串作为参数，接收字符串的意义就是跳到地址包含那个字符串的最近的记录的位置。
history比较常用的方法是back()和forward()方法，顾名思义，back()方法就是向后退一页，forward()方法就是向前进一页。
2、js中的事件对象
js在处理事件时，都会生成一个event事件对象。event对象中保留着很多经常用得属性和方法：
preventDefault() 取消事件的默认行为
stopPropagation 取消事件的冒泡行为
target 只读的属性，指向事件的目标，由冒泡引起的事件会指向最先引起事件的元素。
如果不冒泡则指向当前绑定事件的元素。与currentTarget和this所指的对象相同。
3、jquery中的模拟事件
$().focus();
$().click();
4、js中的引用类型
Object
Array
Date
RegExp
Function
特殊的引用类型：
Boolean
Number
其中Number中常用的几个方法
toString() 参数传几就是转换为几进制的数输出来
toFixed() 参数传几，就是以存在几位小数点的浮点数输出来
js 中的基本类型
Undefined??
Null
??Boolean
??Number
String
5、js中对数组的迭代
感觉能用的着的：
every()
判断数组中的每一个元素是否满足特定的条件，如果全部为true才返回true，否则返回false。
filter()
过滤数组中满足特定条件的数，返回满足的数组。
map()
对数组中每一个元素执行特定的方法，返回执行后的结果数组
forEach()
不返回任何值，相当于for
some()
与every正好相反，判断每一个元素是否满足特定的条件，如果有一个伪true就返回true。
它们的用法为：
var numbers = [1,2,3,4,5,6,7];
var result = numbers.filter(function(item,index,array){
return (item > 2)；
});
alert(result);// [2,3,4,5,6,7]
6、兼容浏览器的bind绑定事件方法
function bind(element,eventType,callback){
if(typeof el.addEventListener === ‘function‘){
el.addEventListener(eventType,callback,false);
}else if(typeof el.attachEvent ===‘function‘){
el.attachEvent(‘on‘ + eventType,callback);
}
}
}
7、js中原型链是什么？
访问一个对象的属性时，现在基本属性中找，如果没有，再沿着_proto_这条链向上找，这就是原型链
8、js中的作用域链
js中的作用域链的定义：当代码在执行环境中执行的时候，就会创建一个作用域链。用途是保证对执行环境有权访问的所有变量和函数的
有序访问。
作用域链的最前端都是当前执行代码所在环境的变量
9、延长作用域链
try-catch语句中的catch语句
with语句
这两个语句都会将作用域链的前端添加一个对象，对于with语句，with语句会将指定的对象添加到作用域中，
对于catch语句，会创建一个新的变量对象，其中包含的是被抛出的错误对象的声明。
10、解析JSON
JSON.stringify() 将json对象解析成字符串
JSON.parse() 将字符串转化为js对象
eval也可以实现相同将json解析为js对象的功能，但是说不安全，所以很少用。
11、js中什么是原型？
创建的每一个函数，都有一个原型属性，该属性指向一个原型对象，这个原型对象中包含着该类对象所有共享的属性和方法。
这就是原型。
12、函数中的callee
使用方法：arguments.callee 指向拥有该arguments的函数
13、apply()和call()
在特定的作用域中调用函数。
call()和apply()真正的用武之地在于可以扩充函数赖以运行的作用域，其最大的好处就是对象与方法之间不再有任何的耦合关系。
bind()方法会创建一个函数的实例，其this的值会被绑定到bind()的参数中去。
14、http状态码为304，表示请求的资源并没有被修改，可以直接使用浏览器缓存的版本。
503,表示服务器接收到请求，但没有处理。可能是服务器过载或维护。
403，禁止访问。
15、js跨域问题：
*CORS
使用CORS(跨域资源共享) 实现跨域，背后的思想就是使用自定义的http请求头部与服务器进行沟通，从而决定请求是成功还是
失败。
*JSONP
JSON withing padding，本质上是被包含在函数中调用json。(回调函数的名字，一般是在请求中指定的)
一般分为两个部分，
实际用法是：
动态的创建script元素，使用时为<script>元素添加一个src属性，这里可以指明一个跨域的URL。
JSONP简单易用，优点是可以访问响应到的文本，支持浏览器和服务器之间的双向通信。
*通过修改document.domain来跨子域
用来解决同一个页面中不同iframe中的跨域问题，可以取到iframe的window属性，但是取不到window以下的属性，方法是
修改两个页面的document.domain等于上一级父级域名。
*使用window.name
*图像Ping
原理是一个网页可以从任何网页加载图像，不用考虑跨域还是不跨域。通过图像Ping的方式，浏览器得不到任何的数据，
而可以根据load和error的方法确定服务器是否接收到了响应。
图像Ping只能用于浏览器与服务器之间的单向通信。
*Comet
简称为服务器推送，如果AJAX是浏览器向服务器请求数据的方式，则Comet是服务器向浏览器推送数据的方式。
Comet的方式分为长轮询和流的方式。
长轮询：
浏览器发起一个到服务器的请求，服务器一直保持连接打开，知道有数据可发送时就向浏览器发送
数据，浏览器接收完数据并关闭连接。随后浏览器又发起了一个请求，这一过程持续不断。
http流：浏览器只和服务器建立一次http连接，然后连接一直打开，由服务器周期性的向浏览器发送数据，
客户端需要比较接收到的数据，分辨出哪些事新数据。
16、docType位于文档的最前面，告知浏览器以何种模式来渲染文档。
在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
17、js延迟加载的方式
*动态创建脚本
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "client.js";
document.body.appendChild(script);
*使用defer
<script type ="" src="" defer="defer"></script>
*使用async
<script type="" async src=""></script>
18、一句话实现单词首字母大写的方法，除了用css3中的text-transform:capitalize;
19、js中实现继承的方式
1、借用原型链继承
2、借用构造函数继承
3、组合式继承
4、原型式继承
5、寄生式继承
6、寄生组合式继承
20、js中创建对象的方式
1、工厂模式
2、构造函数模式
3、原型模式