es5学习笔记——拜读JavaScript高级程序设计（持续更新）

摘要：当以非构造函数形式被调用时，等同于。并且，函数执行完毕后，其活动对象不会被销毁，因为匿名函数的作用域链仍然在引用这个活动对象。知道闭包被销毁，创建函数的活动对象才会被回收。

本着尽可能多的完善基础知识，打好基础，做一条有梦想的咸鱼。

基本数据类型：Undefined,Null,Boolean,Number,String,一种复杂数据类型Object

undefined // 如果值未定义或者不存在
boolean // boolean
string // string
number // number 
object // 对象或者null，null被认为是一个空对象的引用
function // 函数，函数也是对象，但其存在特殊性，故此定义为function类型

typeof NaN //number
// ecmascript 定义了isNaN()函数来检测是否为数值

1.**如果有一个数是布尔值，则比较之前将其转换为数值： false => 0 true=> 1,再与其他数进行比较**
2.字符串与数值。字符串转化为数值
3.对象执行valueOf
4.null == undefined //true
5.比较相等性之前，不能将null、undefined转换成其他的任何值
NaN不等于任何值
对象必须是同一个对象的引用

5.JavaScript没有块级作用域

在if、for语句中定义的变量（var）可以在{}外面访问到，即使if未执行。也会被定义（声明提升）

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

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"]

预定义字符集

	 // 水平制表符
 // 空格
v // 垂直制表符
f // 换页符

 // 回车

 // 换行符
cA: cZ // 控制符
u000-uFFFF // 十六进制Unicode编码
x00: xFF // 十六进制ASCII编码
. // 匹配任意字符。
除外
d // 匹配任意数字
D // 匹配任意非数字
w // [a-zA-Z0-9_]
W // [^a-zA-Z0-9_]
s // 匹配空白符
S // 匹配非空白符
 // 匹配单词边界
B // 匹配非单词边界

反向引用number 数字代表捕获组序号

/<(w+)>(.+)/ // 可以匹配类似balala

正则表达式的捕获
利用String对象的match()方法，使用局部正则表达式会返回一个包含匹配信息的数组，此时该方法与正则表达式的exec()结果一致，但是使用全局匹配的时候，则返回的是全局匹配的匹配结果。

    var html = "
hello world!
";
    var results = html.match(/<(/?)(w+)([^>]*?)>/);
    var all = html.match(/<(/?)(w+)([^>]*?)>/g);
    var exec = /<(/?)(w+)([^>]*?)>/g.exec(html);
    console.log(results); // ["
", "", "div", " class="test"", index: 0, input: "
hello world!
"] //["匹配正则表达式的字符串", "捕获组"+, index: number, input:str]
    console.log(all); // ["
", "", "", "", "", "
"]
    console.log(exec); // ["
", "", "div", " class="test"", index: 0, input: "
hello world!
"]

捕获组的引用，利用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(/^ss*/, ""),
        ws = /s/,
        i = str.length;
    while (ws.test(str.charAt(--i)));
    return str.slice(0, i+1);
}        

函数本质上是对象，所以函数名实际上也是一个指向函数对象的指针，不会与某个函数绑定，因此，一个函数可以有多个名字（指针）。

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()均会返回函数的代码。

Boolean,Number,String这三个基本类型都存在包装类型，表现类似对象，在基本类型上调用方法时，会将基本类型转换成基本包装类型，执行完又销毁。
----常用的字符串操作方法
replace()参数为字符串时，替换一个，参数为正则表达式时，指定g会替换所有匹配子串。

encodeURI() // 针对整个uri编码
decodeURI() // 解码encodeUEI
encodeURIComponent() // 替换所有非字母数字字符
decodeURIComponent() // 解码encodeURIComponent

var num = Math.floor(Math.random() * count + minNum) // 产生总数为count的范围为minNum ~ minNum+count

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);

内联命名函数
内联命名函数
闭包
闭包是指那些能够访问独立(自由)变量的函数 (变量在本地（全局）使用，但定义在一个封闭的作用域中)。换句话说，这些函数可以“记忆”它被创建时候的环境。
闭包类似于作用域链的效果，但区别在于，闭包包含的是创建环境下面的所有变量，并且是变量的最后一个值。其原因在于在闭包被调用时，原函数的作用域链已经不存在了，所有变量都已经走完流程，保存了其最后存在的值。

    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, azerty

DOM事件处理函数中的 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
内联事件处理函数中的 this
当代码被内联处理函数调用时，它的this指向监听器所在的DOM元素：

  Show this

模仿块级作用域
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,5
14.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
history对象
history.go(); // num, str
history.back();
history.forward();
检测当前页是否为第一个页面
if(history.length == 0) {
    //这应该是用户打开窗口的第一个页面
}
15.DOM
文档的子节点
document.documentElement属性始终指向页面的元素。
document.body属性指向元素。
document.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,可以通元素、响应头部或者直接设置charset属性修改这个值。
自定义数据属性
data- 目的是为了给元素提供与渲染无关的信息，或者提供语义信息（firefox 6+ ，Chrome），可以通过dataset属性访问。
插入标记
innerHTML, outerHTML内存与性能问题，在替换原有节点时，并没有删除原有节点上面的事件处理程序或者引用了其他JavaScript对象子树，需要手动清除
scrollIntoView()
通过滚动浏览器窗口或者某个容器元素，调用元素就会出现在视口中
IE文档模式
// 决定ie浏览器可以使用哪个版本所支持的功能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: 被隐藏在内容区域上方的像素