Text類型：表示可以按字面意思解釋的純文本內容，可以是轉義后的HTML字符，不能包含HTML代碼。
特殊屬性和方法：createTextNode() normalize()--去除空的文本節點以及合并兩個相鄰的文本節點 splitText(num)--將一個文本節點按照傳入的位置值分隔成兩個文本節點

DOM的擴展：(SelectorsAPI和HTML5兩部分)

SelectorsAPI部分
querySelector()和querySelectorAll()方法：Document和Element類型節點調用。
eg.var target = document.querySelector(".abc/#abc/div");//querySelectorAll()得到的是集合。

HTML5部分
getElementsByClassName()方法、scrollIntoView()方法（相當于錨點定位）

DOM2和DOM3(在DOM1基礎上引入了更多的交互能力)：

DOM2級樣式部分
①通過style對象訪問css屬性(通過style標簽在HTML中定義的屬性)，屬性含中劃線改為駝峰
document.getElementById("abc").style.width = "100px";
document.getElementById("abc").style.backgroundColor = "red";
②cssText屬性：設置多項屬性變化最快捷的方式
document.getElementById("abc").style.cssText = "width: 10px; height: 20px; color: red;……"
③getComputedStyle()方法：(三種定義方式)計算后的樣式的取值
var testItem = document.getElementById("abc")
document.defaultView.getComputedStyle("testItem").width//只讀屬性，不可更改設置。
④元素大小
偏移量：offsetHeight(元素可見高度+上下邊框高度+水平滾動條寬度)、offsetWidth、offsetLeft(元素左邊框距離其父元素的距離)、offsetRight【都為只讀屬性，每次訪問重新計算】
客戶區大小：clientWidth(元素內容寬度+左右邊框寬度)、clientHeight【都為只讀屬性，每次訪問重新計算】
滾動大小：scrollHeight(元素可見+滾動掉的+隱藏掉的的高度)、scrollWidth、scrollLeft(向左滾動掉的距離)、scrollTop
getBoundingClientRect()方法：該方法返回一個對象，包含四個屬性left、right、top、bottom，表示相對視口的位置（當前瀏覽器時候的左上角為(0,0)）

DOM2級遍歷
NodeIterator類型和TreeWalker類型
document.createNodeIterator(root, whatToShow, filter, false)方法創建NodeIterator實例,其中root為遍歷的起點，whatToShow為顯示的節點類型(特定值)，filter為顯示節點的過濾器函數(自定義)，最后一個參數可忽略。
NodeIterator類型有個方法：nextNode()和previousNode(),表示深度遍歷的方向(向前、向后)
遍歷的過程：從給定的root根節點開始遍歷，由以上兩種方法確定方向向下遍歷。

    
Hello world!
    

        
list item 1
        
list item 2
        
list item 3
    

//想要遍歷div元素中的所有元素
var testItem = document.getElementById("test");
var iterator = document.createNodeIterator(testItem, NodeFilter.SHOW_ELEMENT, null, false);
var node = iterator.nextNode();
while(node!=null){
    alert(node.tagName);
    node = iterator.nextNode();
}
//輸入 DIV P B UL LI LI LI
//若只想輸出li標簽，可通過定義過濾器函數實現
var filter = function(node) {
    return node.tagName.toLowerCase() == "li"? NodeFilter.FILTER_ACCEPT: NodeFilter.FILTER_SKIP;
}
//NodeFilter.FILTER_ACCEPT表示接受該節點，NodeFilter.FILTER_SKIP表示跳過該節點

TreeWalker類型包含了NodeIterator類型的功能，更強大的是遍歷方向的多樣性
parentNode()、firstChild()、lastChild()、nextSibling()、previousSibling()
過濾器的屬性，增加一個NodeFilter.FILTER_REJECT表示跳過該節點包括該節點的整個子樹。

DOM2范圍控制(略)

DOM事件（JavaScript與HTML交互的橋梁）

DOM2級事件規定：事件流---事件捕獲階段->目標階段-->事件冒泡階段（可在一、三階段操作事件）
事件處理程序:
①HTML事件處理程序：

function sayHi(){
    alert("hellow world")
}
//缺點，js和HTML耦合度高，加載HTML代碼時js代碼未加載（時差），作用域可能不同

②DOM0級事件處理程序：

var testItem = document.getElementById("test");
testItem.onclick = function() {
    alert("hellow world")
};
//移除事件處理程序 testItem.onclick = null;

③DOM2級事件處理程序：

testItem.addEventListener("click", function(){
    alert("hellow world")
},false);
//三參true表示捕獲階段處理事件，false冒泡階段處理，通過removeEventListener()移除事（僅限命名函數）

IE事件處理程序：

testItem.attachEvent("onclick", function(){});

事件對象（event對象）

觸發某個DOM事件時，會產生一個event對象，里面記錄著所有與事件有關的信息。
event常用屬性：currentTarget(當前元素)、target(事件目標)==>無事件委托時currentTarget=target=this，發生委托時==>currentTarget=this=事件注冊元素(一般父元素)，target=事件目標元素(子元素)
阻止特定事件的默認行為：在event.cancelable == true時，用event.preventDefault()方法
阻止事件的冒泡行為：事先查看event.bubbles == true,表示支持冒泡，用event.stopPropagation()。

事件類型（待續）

①window對象下的整體事件：
load(可發生在img、script標簽上，主要發生在window對喜愛那個上)、unload、resize、scroll
②焦點事件：blur、focus(均不支持冒泡)
③鼠標和滾輪事件:
9個鼠標事件mousedown、mouseup、click、dbclick、mouseenter、mouseover、mouseleave、mouseout、mousemove，一個滾輪事件mousewheel。
鼠標的位置信息：event中的clientX、clientY確定鼠標的視窗位置，pageX，pageY確定鼠標的頁面位置(包含發生滾動的部分)，screenX、screenY確定鼠標的物理屏幕位置。
click事件過程：mousedown->mouseup->click
dbclick事件過程：mousedown->mouseup->click->mousedown->mouseup->dbclick
Android和iOS設備：不支持dbclick事件，輕擊觸發mousemove事件。
無障礙性（略）
④鍵盤事件
keydown（按任意鍵觸發），keypress（按任意可影響輸入字符鍵觸發）、keyup（釋放按鍵觸發）--以上可取到哦輸入的鍵碼，如ASCII碼。
textInput事件：相當于keypress事件，不同的是前者需可編輯區域觸發，后者焦點事件觸發，前者需實際字符鍵觸發，后者刪除鍵也可以，對象中有data屬性，保存輸入的字符的字符串表示。
⑤觸摸和手勢事件
觸摸事件：touchstart、touchmove（手指滑動時觸發，此事件默認滾動，可在此阻止滾動事件-preventDefault()）、touchend.
在移動端觸摸屏幕發生的事件依次為：touchstart->mouseover->mousemove->mousedown->mouseup->click->touchend.
手勢事件：兩只手指觸摸屏幕時(同一元素)會產生手勢，gesturestart(一個手指在屏幕上，另一只手指觸屏時發生)、gesturechange(兩只手指在屏幕上，任何一個手指移動時觸發)、gestureend(任何一個手指從屏幕移開時觸發)

事件委托：基于事件的冒泡機制，把子元素的事件委托給上級元素處理，減少了冗余代碼，增強了頁面性能。（對一類事件最少可定義一次，例如整個文檔在最外層定義一個click事件）

三、BOM是瀏覽器對象模型,是ECMAScript操作瀏覽器的API。

window是BOM的核心對象，表示一個瀏覽器實例。它還充當著ECMAScript中的Global對象，因此網頁中定義的變量、對象、函數等都是它的屬性。

window對象瀏覽器相關的屬性和方法：
screenLeft和screenTop表示窗口相對屏幕的位置(moveTo()和moveBy()表示移動窗口的方法)。
innerWidth和innerHeight表示視窗的大小(resizeTo()和resizeBy()表示改變視窗的方法)。
open()和close()方法表示打開和關閉某一URL的方法。
setTimeout()和setInterval()表示延時調用和間歇調用方法(毫秒數表示此毫秒后將任務添加到任務隊列)。
alert()、confirm()和prompt()為系統彈出提示框方法。

對象：
location對象：是window的屬性，也是document的屬性，即為應用同一屬性。
https://test.com.cn:8080/search/#info?wd=javascript(protocol「https：」、host「test.com.cn:8080」、hostname「test.com.cn」、port『8080』、pathname「search」、hash『info』、search「?wd=javascript」、href『完整url』和assign()、replace()、reload(),八個屬性三個方法)。
navigation對象：記錄瀏覽器相關參數。
screen對象：記錄顯示器相關參數。
history對象：go()、back()、forward()方法。