es5學習筆記——拜讀JavaScript高級程序設計（持續更新）

本着儘量多的完善基礎知識，打好基礎，作一條有夢想的鹹魚。

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也會指向參數所給出的做用域。

1. 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, 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<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,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<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: 被隱藏在內容區域上方的像素