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

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

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

HTML5部分
getElementsByClassName()方法、scrollIntoView()方法（相當(dāng)于錨點(diǎn)定位）

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

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

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

    
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標(biāo)簽，可通過(guò)定義過(guò)濾器函數(shù)實(shí)現(xiàn)
var filter = function(node) {
    return node.tagName.toLowerCase() == "li"? NodeFilter.FILTER_ACCEPT: NodeFilter.FILTER_SKIP;
}
//NodeFilter.FILTER_ACCEPT表示接受該節(jié)點(diǎn)，NodeFilter.FILTER_SKIP表示跳過(guò)該節(jié)點(diǎn)

TreeWalker類型包含了NodeIterator類型的功能，更強(qiáng)大的是遍歷方向的多樣性
parentNode()、firstChild()、lastChild()、nextSibling()、previousSibling()
過(guò)濾器的屬性，增加一個(gè)NodeFilter.FILTER_REJECT表示跳過(guò)該節(jié)點(diǎn)包括該節(jié)點(diǎn)的整個(gè)子樹(shù)。

DOM2范圍控制(略)

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

DOM2級(jí)事件規(guī)定：事件流---事件捕獲階段->目標(biāo)階段-->事件冒泡階段（可在一、三階段操作事件）
事件處理程序:
①HTML事件處理程序：

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

②DOM0級(jí)事件處理程序：

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

③DOM2級(jí)事件處理程序：

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

IE事件處理程序：

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

事件對(duì)象（event對(duì)象）

觸發(fā)某個(gè)DOM事件時(shí)，會(huì)產(chǎn)生一個(gè)event對(duì)象，里面記錄著所有與事件有關(guān)的信息。
event常用屬性：currentTarget(當(dāng)前元素)、target(事件目標(biāo))==>無(wú)事件委托時(shí)currentTarget=target=this，發(fā)生委托時(shí)==>currentTarget=this=事件注冊(cè)元素(一般父元素)，target=事件目標(biāo)元素(子元素)
阻止特定事件的默認(rèn)行為：在event.cancelable == true時(shí)，用event.preventDefault()方法
阻止事件的冒泡行為：事先查看event.bubbles == true,表示支持冒泡，用event.stopPropagation()。

事件類型（待續(xù)）

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

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

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

window是BOM的核心對(duì)象，表示一個(gè)瀏覽器實(shí)例。它還充當(dāng)著ECMAScript中的Global對(duì)象，因此網(wǎng)頁(yè)中定義的變量、對(duì)象、函數(shù)等都是它的屬性。

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

對(duì)象：
location對(duì)象：是window的屬性，也是document的屬性，即為應(yīng)用同一屬性。
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(),八個(gè)屬性三個(gè)方法)。
navigation對(duì)象：記錄瀏覽器相關(guān)參數(shù)。
screen對(duì)象：記錄顯示器相關(guān)參數(shù)。
history對(duì)象：go()、back()、forward()方法。