本着尽可能多的完善基础知识，打好基础，做一条有梦想的咸鱼。
1.数据类型
基本数据类型：Undefined,Null,Boolean,Number,String,一种复杂数据类型Object
2.typeof操作符检测变量的数据类型：
undefined // 如果值未定义或者不存在
boolean // boolean
string // string
number // number
object // 对象或者null，null被认为是一个空对象的引用
function // 函数，函数也是对象，但其存在特殊性，故此定义为function类型
3.NaN
typeof NaN //number
// ecmascript 定义了isNaN()函数来检测是否为数值
4.相等操作符遵循的基本规则
1.**如果有一个数是布尔值，则比较之前将其转换为数值： false => 0 true=> 1,再与其他数进行比较**
2.字符串与数值。字符串转化为数值
3.对象执行valueOf
4.null == undefined //true
5.比较相等性之前，不能将null、undefined转换成其他的任何值
NaN不等于任何值
对象必须是同一个对象的引用
5.JavaScript没有块级作用域
在if、for语句中定义的变量（var）可以在{}外面访问到，即使if未执行。也会被定义（声明提升）
6.检测数组
Object.prototype.toString.call(arr) //"[object Array]" Object原生toString()方法，会返回一个[object NativeConstructorName]格式的字符串
value instanceof Array //如果来自不同全局执行环境将无法真确解析
Array.isArray(arr) //IE9+
sort()//传递一个比较函数作为参数，默认字符串排序，比较函数传递两个参数，用来设定比较规则，（默认第一个参数代表小值，第二个参数代表大值）compare(min, max) min-max 返回正数表示降序排列。返回负数表示升序排列，0表示两数相等
兼容性有限制的方法：isArray,indexOf,lastIndexOf,every,some,filter,forEach,map,reduce,reduceRight IE9+、Firefox 3+、Safari 4+、Open 10.5+、Chrome
7.正则表达式
1.定义方式：
// 对象字面量
var expreession = / pattern / flags; //pattern可以是任何形式的正则表达式，flags标签，表示匹配遵循的模式。g=>全局多次匹配; i=> 忽略大小写; m=>多行匹配
// 构造函数
var expression = new RegExp(string, flags)
//es3中正则表达式始终共享一个RegExp实例，构造函数则会创建新的实例，es5做出了修正，使每次都会创建行实例，IE9+、Firefox、Chrome都据此做出了修改。
2.实例方法
// exec()接受字符串作为参数，返回包含第一个匹配项信息的数组，或者null（无匹配）
// 数组包含额外两个属性： index/input
// test()接受字符串作3.详细
字符^ 匹配一个字符串开始。与[合用，[^]表示选择[]之外的某一个元素。
字符$ 匹配一个字符串结尾
? 匹配0或1次
+ 匹配1或者多次
* 匹配0或者多次{n, m} 匹配n~m次
+? 非贪婪式匹配。匹配一个满足条件的字符就结束
+? 重复1次或更多次，但尽可能少重复
*? 重复任意次，但尽可能少重复
?? 重复0次或1次，但尽可能少重复
//非贪婪匹配模式
//?? 匹配一次或者0次但是尽可能少的次数
var test1 = 'acdcsfsdc'.match(/(a.??c)/i);
console.log(test1); // ["ac", "ac", index: 0, input: "acdcsfsdc"]
//匹配一次或者多次，尽可能少重复
var test2 = 'acdcsfsdc'.match(/(a.+?c)/i);
console.log(test2); // ["acdc", "acdc", index: 0, input: "acdcsfsdc"]
//匹配任意次，尽可能少
var test3 = 'acdcsfsdc'.match(/(a.*?c)/i);
console.log(test3); // ["ac", "ac", index: 0, input: "acdcsfsdc"]预定义字符集
\t // 水平制表符
\b // 空格
\v // 垂直制表符
\f // 换页符
\r // 回车
\n // 换行符
\cA: \cZ // 控制符
\u000-\uFFFF // 十六进制Unicode编码
\x00: \xFF // 十六进制ASCII编码
. // 匹配任意字符。\n除外
\d // 匹配任意数字
\D // 匹配任意非数字
\w // [a-zA-Z0-9_]
\W // [^a-zA-Z0-9_]
\s // 匹配空白符
\S // 匹配非空白符
\b // 匹配单词边界
\B // 匹配非单词边界
反向引用number 数字代表捕获组序号
/<(\w+)>(.+)</\1>/ // 可以匹配类似<tag>balala</tag>正则表达式的捕获
利用String对象的match()方法，使用局部正则表达式会返回一个包含匹配信息的数组，此时该方法与正则表达式的exec()结果一致，但是使用全局匹配的时候，则返回的是全局匹配的匹配结果。
var html = '<div class="test"><b>hello</b> <i>world!</i></div>';
var results = html.match(/<(\/?)(\w+)([^>]*?)>/);
var all = html.match(/<(\/?)(\w+)([^>]*?)>/g);
var exec = /<(\/?)(\w+)([^>]*?)>/g.exec(html);
console.log(results); // ["<div class="test">", "", "div", " class="test"", index: 0, input: "<div class="test"><b>hello</b> <i>world!</i></div>"] //['匹配正则表达式的字符串', '捕获组'+, index: number, input:str]
console.log(all); // ["<div class="test">", "<b>", "</b>", "<i>", "</i>", "</div>"]
console.log(exec); // ["<div class="test">", "", "div", " class="test"", index: 0, input: "<div class="test"><b>hello</b> <i>world!</i></div>"]捕获组的引用，利用replace()替换
"fontFamily".replace(/([A-Z])/g, -$1).toLowerCase() // font-family非捕获性捕获组
(?: )
replace利用函数进行替换
-
当替换值是一个函数的时候。每个匹配都会调用该函数并带有一串参数列表
匹配的完整文本 匹配的捕获，一个捕获对应一个参数 匹配索引 源字符串
function upper(all, letter) {
return letter.toUpperCase();
}
var elem = "border-bottom-width".replace(/-(\w)/g, upper);
console.log(elem); // borderBottomWidth
// foo=1&foo=2&blah=a&blah=b&foo=3转换成foo=1,2,3&blah=a,b
function compress(source) {
var keys = {};
source.replace(/([^=&]+)=([^=&]*)/g, function (full, match1, match2) {
keys[match1] = (keys[match1] ? keys[match1] + "," : "") + match2;
return '';
});
var result = [];
for (var key in keys) {
result.push(key + "=" + keys[key]);
}
return result.join('&');
}
compress('foo=1&foo=2&blah=a&blah=bc&foo=3'); // foo=1,2,3&blah=a,bc// 利用正则表达式修剪字符串---为了兼容低版本浏览器如IE8不支持.trim()
// 方案1，适用短字符串
function trim(str) {
return (str || '').replace(/^\s+|\s+$)/g, '');
}
// 方案2， 适用长字符串
function trim(str) {
var str = str.replace(/^\s\s*/, ''),
ws = /\s/,
i = str.length;
while (ws.test(str.charAt(--i)));
return str.slice(0, i+1);
} 8.Function类型
函数本质上是对象，所以函数名实际上也是一个指向函数对象的指针，不会与某个函数绑定，因此，一个函数可以有多个名字（指针）。
1.声明方式：
function fn(arg1, arg2) {
// TODO 字面量声明方式会使函数声明提升，即即使声明在后面，也可以在前面访问到该函数。
}
var fn = function (arg1, arg2) {
// TODO 函数表达式声明，必须声明后才可以访问
}
what(); // 函数声明
var what = function () {
console.log('函数表达式');
}
what(); // 函数表达式
function what() {
console.log('函数声明');
}
console.log('3')
what(); // 函数表达式2.内部属性
(1)arguments // 包含callee属性，指向arguments所有者
function factorial(num) {
if (num<=1) {
return 1;
} else {
return num * arguments.callee(num - 1)
}
}(2)this // 引用函数据以执行的环境对象
(3)caller // 调用当前函数的函数的引用，如果在全局调用，caller值为null; 严格模式不支持
function outer () {
inner();
}
function inner () {
alert(arguments.callee.caller);
}
outer(); // 显示outer函数的源代码3.prototype属性 保存引用类型的实例方法。不可枚举。
4.call(),apply()
这两个方法属于函数非继承方法，接受2+参数，第一个参数为函数将要运行的作用域，函数将在这个参数代表的作用域下运行，剩下的（apply只接受两个参数，第二个参数为参数数组或者arguments对象）参数为函数的参数。
window.color = 'red';
var o = {color: 'blue'};
function sayColor () {
alert(this.color);
}
sayColor(); // red
sayColor.call(this); // red
sayColor.call(window); // red
sayColor.call(o); // blue
5.bind()方法，会创建一个函数实例，this会被绑定到传给bind()函数的值。即使在全局调用这个函数实例，this也会指向参数所给出的作用域。
- toString(),toLocalString(), valueOf()均会返回函数的代码。
9.基本包装类型
Boolean,Number,String这三个基本类型都存在包装类型，表现类似对象，在基本类型上调用方法时，会将基本类型转换成基本包装类型，执行完又销毁。
----常用的字符串操作方法
replace()参数为字符串时，替换一个，参数为正则表达式时，指定g会替换所有匹配子串。
10.global对象
encodeURI() // 针对整个uri编码
decodeURI() // 解码encodeUEI
encodeURIComponent() // 替换所有非字母数字字符
decodeURIComponent() // 解码encodeURIComponent
11.Math对象产生随机数
var num = Math.floor(Math.random() * count + minNum) // 产生总数为count的范围为minNum ~ minNum+count
12.理解对象
1.理解原型
构造函数的原型，相当于创建新的对象实例的时候从Object对象继承过来的属性和方法，实例对象可以保存原型对象中属性的引用，创建同名属性也和Object对象一样，只会覆盖原型上的相应的属性和方法，而不会改变他们。实例的[[prototype]]指针指向的是构造器的原型，当重写原型后，实例就不再能够访问到新原型的方法属性了。
function Person() {
this.name = '吴豆腐';
this.age = 23;
}
Person.prototype.job = "Web Developer";
Person.prototype.sayName = function () {
console.log(this.name);
}
console.log(Person); // function () {this.name = '吴豆腐'; this.age = 23}; 无法访问到job属性和sayName方法。类似直接访问Object对象。
var person = new Person();
console.log(person); // {age: 23, name: '吴豆腐', __proto__: {constructor: Person(), job: "Web Developer", sayName: function () {console.log(this.name)}}} **chrome浏览器会将prototype里面的属性展现在__proto__属性下**。
var person1 = new Person();
person1.name = 'LChing';
person1.job = 'student';
console.log(person.sayName === person1.sayName); // true指向同一个函数对象。
var keys = Object.keys(person); // 返回一个包含所有可枚举属性的字符串数组。
console.log(keys); // ["name", "age"]
原型模式存在的问题：如果prototype中包含引用类型，那么实例中所做的修改将反映到其他实例上。故此，引用类型均使用构造函数模式创建
补充说明引用类型:基本类型的值（Undefined,Null,Number,String,Boolean）的访问是按值访问。引用类型的值的访问是按引用访问，JavaScript不允许直接访问内存中的位置，也就是说不能直接操作对象的内存空间。在操作对象时，实际上是操作对象的指针。（更严密的说法是:当复制保存着对象的某个变量时，操作的是对象的引用，但是在为对象添加属性时，操作的是实际的对象。）鉴于此，prototype中包含的引用类型也是一个指向内存的指针，改变它的值就会反映到其他的引用上面。
2.理解继承
function SuperType() {
this.color = ['red', 'blue', 'green'];
}
function SubType() {
}
SubType.prototype = new SuperType();
var instance1 = new SubType();
instance1.color.push('yellow');
console.log(instance1.color); // ["red", "blue", "green", "yellow"]
var instance2 = new SubType();
console.log(instance2.color); // ["red", "blue", "green", "yellow"]
var instance3 = new SuperType();
instance3.color.push('black');
console.log(instance3.color); // ["red", "blue", "green", "black"]
var instance4 = new SuperType();
console.log(instance4.color); // ["red", "blue", "green"]
//借用构造函数来解决原型中引用类型的问题
//通过apply()和call()方法可以在将来创建的对象上执行构造函数SuperType
function SubType1() {
SuperType.call(this);
}
var instance5 = new SubType1();
console.log(instance5); //SubType1({color: [...], __proto__: Object})组合继承，结合构造函数和原型继承的优势，避免引用类型污染，发挥函数复用优势。
function SuperType(name) {
this.name = name;
this.color = ['red', 'blue', 'yellow'];
}
SuperType.prototype.sayName = function () {
alert(this.name);
}
function SubType(name, age) {
SuperType.call(this, name);
this.age = age;
}
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function () {
alert(this.age);
}
var instance1 = new SubType('吴豆腐', 23);
console.log(instance1);
组合继承的缺点是，无论在什么情况下，我们都会调用两次超类型构造函数。一次在创建子类型原型的时候，一次是在子类型构造函数的内部。
因此形成了寄生组合式继承范式：
// 创建函数构造器
// 第一次读这个的时候，是刚刚入门的时候，当时感觉玄而又玄，但是现在却能有一个较深刻的体会
// 此方式不过是常见的优化方式，创造者看到原型中存在一些不必要的属性，就自己封装一个函数去剔除这些属性。
// 改写subType的原型。
// 当以非构造函数形式被调用时，Object 等同于 new Object()。
function inHeritPrototype(subType, superType) {
var prototype = Object(superType.prototype);
prototype.constructor = subType;
subType.prototype = prototype;
}
function SuperType(name) {
this.name = name;
this.colors = ['red', 'blue', 'green'];
}
SuperType.prototype.sayName = function () {
alert(this.name);
}
function SubType(name, age) {
// 在创建子类实例属性的时候，调用超类型构造函数。此时超类型的作用域指向新的实例属性。而子类型的原型指针依然指向的是子类构造器，不会继承超类型的原型。
SuperType.call(this, name);
this.age = age;
}
// 下面这个函数的调用重写了子类型的原型，使其继承了超类型的原型，创建子类型的实例时，实例的原型指针指向这里。
inHeritPrototype(SubType, SuperType);
var instance = new SubType('LChing', 23);
console.log(instance);
13.函数表达式
内联命名函数
内联命名函数
闭包
闭包是指那些能够访问独立(自由)变量的函数 (变量在本地（全局）使用，但定义在一个封闭的作用域中)。换句话说，这些函数可以“记忆”它被创建时候的环境。
闭包类似于作用域链的效果，但区别在于，闭包包含的是创建环境下面的所有变量，并且是变量的最后一个值。其原因在于在闭包被调用时，原函数的作用域链已经不存在了，所有变量都已经走完流程，保存了其最后存在的值。
function fn1() {
var result = new Array();
for (var i = 0; i < 10; i++) {
result[i] = function () {
return i ;
};
}
return result;
}
var arr = fn1();
console.log(arr[1]()); // 10在匿名函数从fn1()中返回后，它的作用域链被初始化为包含fn1()函数的活动对象和全局变量对象。这样，匿名函数就可以访问在fn1()中定义的所有变量。并且，函数fn1()执行完毕后，其活动对象不会被销毁，因为匿名函数的作用域链仍然在引用这个活动对象。换句话说，当函数fn1()执行完毕后，其执行环境的作用域链会被销毁，但它的活动对象任然在内存中，匿名函数在执行时就会访问这个活动对象，故此此时访问到的是一个静态的活动对象，所有变量值将是它最终存在在活动对象中的值。 知道闭包被销毁，创建函数的活动对象才会被回收。
this
this对像是在运行时基于函数的执行环境绑定的。
全局上下文：this指向全局对象；
函数上下文：直接调用，非严格模式下，指向全局，严格模式下，在未指定请况下，为undefined
function f2(){
"use strict"; // 这里是严格模式
return this;
}
f2() === undefined; // true对象方法中的this：
var o = {
prop: 37,
f: function() {
return this.prop;
}
};当 o.f() 被调用时，函数内的this将绑定到o对象。this的指向取决于函数被调用的方式和调用者。
原型链中的this
相同的概念在定义在原型链中的方法也是一致的。如果该方法存在于一个对象的原型链上，那么this指向的是调用这个方法的对象，表现得好像是这个方法就存在于这个对象上一样。
var o = {
f : function(){
return this.a + this.b;
}
};
var p = Object.create(o);
p.a = 1;
p.b = 4;
console.log(p.f()); // 5在这个例子中，对象p没有属于它自己的f属性，它的f属性继承自它的原型。但是这对于最终在o中找到f属性的查找过程来说没有关系；查找过程首先从p.f的引用开始，所以函数中的this指向p。也就是说，因为f是作为p的方法调用的，所以它的this指向了p。这是JavaScript的原型继承中的一个有趣的特性。
构造函数中的 this
当一个函数被作为一个构造函数来使用（使用new关键字），它的this与即将被创建的新对象绑定。
构造函数的返回问题，如果未指定return，则返回通过this设定的对象值。指定择只返回return里面的值。
call 和 apply
使用 call 和 apply 函数的时候要注意，如果传递的 this 值不是一个对象，JavaScript 将会尝试使用内部 ToObject 操作将其转换为对象。因此，如果传递的值是一个原始值比如 7 或 'foo' ，那么就会使用相关构造函数将它转换为对象，所以原始值 7 通过new Number(7)被转换为对象，而字符串'foo'使用 new String('foo') 转化为对象，例如：
function bar() {
console.log(Object.prototype.toString.call(this));
}
bar.call(7); // [object Number]bind 方法
ECMAScript 5 引入了 Function.prototype.bind。调用f.bind(someObject)会创建一个与f具有相同函数体和作用域的函数，但是在这个新函数中，this将永久地被绑定到了bind的第一个参数，无论这个函数是如何被调用的。
function f(){
return this.a;
}
var g = f.bind({a:"azerty"});
console.log(g()); // azerty
var o = {a:37, f:f, g:g};
console.log(o.f(), o.g()); // 37, azertyDOM事件处理函数中的 this
当函数被用作事件处理函数时，它的this指向触发事件的元素（一些浏览器在使用非addEventListener的函数动态添加监听函数时不遵守这个约定）。
// 被调用时，将关联的元素变成蓝色
function bluify(e){
console.log(this === e.currentTarget); // 总是 true
// 当 currentTarget 和 target 是同一个对象是为 true
console.log(this === e.target);
this.style.backgroundColor = '#A5D9F3';
}
// 获取文档中的所有元素的列表
var elements = document.getElementsByTagName('*');
// 将bluify作为元素的点击监听函数，当元素被点击时，就会变成蓝色
for(var i=0 ; i<elements.length ; i++){
elements[i].addEventListener('click', bluify, false);
}内联事件处理函数中的 this
当代码被内联处理函数调用时，它的this指向监听器所在的DOM元素：
<button onclick="alert(this.tagName.toLowerCase());">
Show this
</button>模仿块级作用域
javascript从来不会告诉你是否多次声明了同一个变量；遇到这种情况，它会对后续的声明视而不见，但是却会执行后续声明中的变量初始化。
function outputNumbers(count) {
for (var i=0; i < count; i++) {
console.log(i);
}
var i;
console.log(i);
}
outputNumbers(5); // 0,1,2,3,4,514.BOM
窗口位置
var leftPos = (typeof window.screenLeft == 'number') ? window.screenLeft : window.screenX;
var topPos = (typeof window.screenTop == 'number') ? window.screenTop : screenY;但是各个浏览器对窗口位置的表现不一致。
移动窗口
window.moveTo(x, y) // 移动至（x,y）
window.moveBy(x, y) // 向x,y方向移动
窗口位置
各个浏览器对窗口大小的解析不一致，但是视口却表现基本一致
var pageWidth = window.innerWidth;
var pageHeight = window.innerHeight;
if (typeof pageWidth != 'number') {
if (document.compatMode == 'CSS1Compat') {
pageWidth = document.documentElement.clientWidth;
pageHeight = document.documentElement.clientHeight;
} else {
pageWidth = document.body.clientWidth;
pageHeight = document.body.clientHeight;
}
}
}移动设备有差别
location对象
保存当前文档信息，并将它的url解析为独立的片段。
查询字符串参数数组：
function getQueryStringArgs() {
var qs = (location.search.length > 0 ? location.search.substring(1) : ""),
args = {},
items = qs.length ? qs.split("&") : [],
item = null,
name = null,
value = null,
i = 0,
len = items.length;
for (i=0; i<len; i++) {
item = items[i].split('=');
name = decodeURIComponent(item[0]);
value = decodeURIComponent(item[1]);
if (name.length) {
args[name] = value;
}
}
return args;
}history对象
history.go(); // num, str
history.back();
history.forward();
检测当前页是否为第一个页面
if(history.length == 0) {
//这应该是用户打开窗口的第一个页面
}15.DOM
文档的子节点
document.documentElement属性始终指向页面的<html>元素。
document.body属性指向<body>元素。
document.doctype属性指向<!DOCTYPE>元素>(浏览器支持不一致)
文档信息
document.title当前页面的标题
document.URL显示地址栏中完整的信息
document.domain 包含页面的域名
document.referrer 包含链接到当前页面的页面URL
这些信息都存在于请求的http头部
域名设置有限制必须同域且只能取交集。
查找元素
document.getElementById()根据元素id获取元素引用，返回元素的引用或者null。
document.getElementsByTagName(),返回HTMLCollection对象
document.getElementsByName(),返回HTMLCollection对象，如单选按钮具有相同name属性，不同id，根据name获取单选按钮。
element类型
1.获取特性
getAttribute(),setAtrribute(),removeAttribute(),特性名不区分大小写，自定义属性加上'data-'前缀区分;一般更推荐通过属性来设置特性，如elem.class = 'my-class';
2.创建元素
document.createElement("tagName");
3.元素子节点elem.childNodes,IE与其他浏览器表现不一致，IE以外其他浏览器会将tag之间的空白作为一个节点。在节点执行操作之前，需要检测节点类型
for (var i=0, len=elem.childNodes.length; i < len; i++) {
if (elem.childNodes[i].nodeType === 1) {
// 是元素节点则执行某些操作
}
}4.DocumentFragment类型，可以包含和控制节点，但不会像完整的文档那样占用额外的资源。可以作为仓库使用，给文档一次添加多个子元素
var fragment = document.createDocumentFragment(),
ul = document.getElementById('my-lists'),
li = null,
i;
for (i=0; i < 10; i++) {
li = document.createElement("li");
li.appendChild(document.createTextNode("Item " + (i + 1)));
fragment.appendChild(li);
}
ul.appendChild(fragment);
console.log(fragment.childNodes); // []
文档片段继承了Node的所有方法，如果将文档中的节点添加到文档片段中，就会从文档树中移除该节点，如果将文片段中的子节点添加到文档树中，文档片段中也不会再存在相应的子节点。
选择符API
兼容性IE 8+、Firefox 3.5+、Safari 3.1+、Chrome、Opera 10+
1.queryseSelector()接受一个css选择符，返回与该模式匹配的第一个元素，如果没有则返回null。
var body = document.querySelector("body"), // 取得body元素
myDiv = document.querySelector("#my-div"), // 取得id为my-div的元素
selected = document.querySelector('.selected'), // 取得类为.selected的第一个元素
img = document.querySelector('img.button'); // 取得类为"button"的第一个图像元素
通过Document类型调用querySelector()方法时，会在文档元素的范围内查找匹配的元素；通过Element类型调用querySelector()方法时，只会在该元素后代元素范围内查找匹配的元素。
2.querySelectorAll()接受一个css选择符，返回一个NodeList的实例。
3.元素遍历，为了弥补ie浏览器对元素间的空白节点不返回文本节点，而其他浏览器返回的差异，新定义了一组元素选择属性（IE9+）
childElementCount 返回子元素（不包含文本节点和注释）的个数；
firstElementChild 指向第一个子元素
lastElementChild 指向最后一个元素
previousElementSibling: 指向前一个同辈元素
nextElementSibling: 指向后一个同辈元素
HTML5(DOM)
1.getElementsByClassName();根据元素名获取元素可以在元素或者document对象上调用该方法。只会检索调用者后代。
2.classList属性(Firefox 3.6+ Chrome)
包含aad(value),contains(value),remove(value),toggle(value)方法。
焦点管理
document.activeElement保存当前页面获得了焦点的元素，元素获取焦点的方式有页面加载、用户输入和在代码中调用focus()。文档刚加载完成是，document.activeElement中保存的是document.body元素的引用。在加载过程中，为null
document.hasFocus()方法确认文档是否获取了焦点。通过检测文档是否获取了焦点，可以确认用户是不是正在与页面交互。
字符集属性
document.charset,可以通<meta>元素、响应头部或者直接设置charset属性修改这个值。
自定义数据属性
data- 目的是为了给元素提供与渲染无关的信息，或者提供语义信息（firefox 6+ ，Chrome），可以通过dataset属性访问。
插入标记
innerHTML, outerHTML内存与性能问题，在替换原有节点时，并没有删除原有节点上面的事件处理程序或者引用了其他JavaScript对象子树，需要手动清除
scrollIntoView()
通过滚动浏览器窗口或者某个容器元素，调用元素就会出现在视口中
IE文档模式
// 决定ie浏览器可以使用哪个版本所支持的功能Edge：始终以最新的文档模式来渲染页面
<meta http-equiv="X-UA-Compatible" content="Edge">children属性
返回元素的元素节点，兼容性IE5+(包含注释节点)、IE9+
DOM2 和 DOM3
访问元素样式
style对象修改元素样式，包含通过html的style特性指定的所有样式信息，css设置的无法取得
element.style.cssText属性一次可以设置多个属性值，并覆盖原css属性
dom2增强了document.defaultView,提供getComputedStyle属性获取元素的css样式，但是IE不支持
提供元素的currentStyle属性来获取，均为只读属性
元素大小
1.偏移量
offsetHeight：元素垂直方向占用空间大小
offsetWidth: 元素水平方向占用空间大小
offsetLeft: 元素左边框至包含元素左内边框之间的像素距离
offsetTop：元素上边框至包含元素上边框的像素距离
2.客户区大小
clientWidth 和 clientHeight不包含边框
3.滚动大小
scrollHeight：在没有滚动条的情况下，元素内容的高度
scrollWidth： 在没有滚动条的情况下，元素内容的宽度
scrollLeft: 被隐藏在内容区域左侧的像素
scrollTop: 被隐藏在内容区域上方的像素
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。