dom

1 .js操作網(wǎng)頁(yè)的接口，他的作用是將網(wǎng)頁(yè)轉(zhuǎn)換一個(gè)可以進(jìn)行腳本操作的js對(duì)象?？梢允褂胐ocument.querySelector()來(lái)查看，大致就是這個(gè)樣子
2 .瀏覽器根據(jù)DOM模型，將結(jié)構(gòu)化的文檔，html,xml解析成一系列的節(jié)點(diǎn)，再由這些節(jié)點(diǎn)組成樹(shù)狀的結(jié)構(gòu)

節(jié)點(diǎn)

1 .一共有7種類(lèi)型，所有的7種節(jié)點(diǎn)，都繼承了瀏覽器提供的一個(gè)原生節(jié)點(diǎn)對(duì)象Node.因此都有一些共同的屬性和方法。

節(jié)點(diǎn)樹(shù)

1 .瀏覽器原生的document節(jié)點(diǎn)，代表整個(gè)文檔
2 .一個(gè)文檔的所有節(jié)點(diǎn)，按照所在的層級(jí)，可以抽象成一種樹(shù)狀結(jié)構(gòu)，就是dom樹(shù)。
3 .三種層級(jí)關(guān)系：父節(jié)點(diǎn)關(guān)系，子節(jié)點(diǎn)關(guān)系，同級(jí)節(jié)點(diǎn)關(guān)系

node接口

1 .所有dom節(jié)點(diǎn)對(duì)象都繼承了node接口，擁有一些共同的屬性和方法，這是操作dom的基礎(chǔ)

屬性

1 .nodeType:返回一個(gè)整數(shù)值，表示節(jié)點(diǎn)的類(lèi)型,還有對(duì)應(yīng)常量可以進(jìn)行比較來(lái)判斷節(jié)點(diǎn)的類(lèi)型
2 .nodeName:返回節(jié)點(diǎn)的名稱(chēng)
3 .nodeValue:返回節(jié)點(diǎn)的文本值。只有文本節(jié)點(diǎn)和注釋節(jié)點(diǎn)有文本值，其余的節(jié)點(diǎn)都返回null.
4 .textConetnt:返回當(dāng)前節(jié)點(diǎn)和他所有帶節(jié)點(diǎn)的文本內(nèi)容，自動(dòng)忽略當(dāng)前節(jié)點(diǎn)內(nèi)部的html標(biāo)簽，直接返回所有的文本內(nèi)容。而且該屬性是可以讀寫(xiě)的。
5 .baseUrl:返回當(dāng)前網(wǎng)頁(yè)的絕對(duì)路徑，這個(gè)值一般是當(dāng)前網(wǎng)址的url，但是可以使用html的base標(biāo)簽，來(lái)改變屬性的值。
6 .ownerDocument：返回當(dāng)前節(jié)點(diǎn)所在的頂層文檔對(duì)象，即document對(duì)象
7 .nextSibling:緊跟當(dāng)前節(jié)點(diǎn)后面的第一個(gè)同級(jí)節(jié)點(diǎn)，如果后面沒(méi)有，則返回neull

while(el !==null){
  el=el.nextSibling
//遍歷所有子節(jié)點(diǎn)
}

8 .previousSibling:返回當(dāng)前節(jié)點(diǎn)前面的，距離最近的一個(gè)同級(jí)節(jié)點(diǎn)，如果沒(méi)有，返回null。
9 .parentNode:返回當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)。只會(huì)有三種類(lèi)型：element,document,documentfragment，其中，document和documentfragment的父節(jié)點(diǎn)都是null
10 .parentElement:返回當(dāng)前節(jié)點(diǎn)的父元素節(jié)點(diǎn)。如果當(dāng)前沒(méi)有父節(jié)點(diǎn)，或者符父節(jié)點(diǎn)類(lèi)型不是元素節(jié)點(diǎn)，則返回null.其實(shí)等于上面的以第一個(gè)
11 .firstChild,lastchild:返回的除了元素節(jié)點(diǎn)，還可能是文本節(jié)點(diǎn)或者注釋節(jié)點(diǎn)，如果代碼元素之間有空白字符，會(huì)導(dǎo)致firstChild返回文本節(jié)點(diǎn)
12 .childNodes:返回一個(gè)類(lèi)似數(shù)組的對(duì)象，成員包含當(dāng)前節(jié)點(diǎn)的所有子節(jié)點(diǎn)。是一個(gè)NodeLis集合，他是動(dòng)態(tài)的，如果子節(jié)點(diǎn)發(fā)生變化，立刻會(huì)反映在結(jié)果之中
13 .isConnected:當(dāng)前節(jié)點(diǎn)是否在文檔之中，新創(chuàng)建的節(jié)點(diǎn)，沒(méi)有插入的時(shí)候這個(gè)屬性都是false

方法

1 .appendChild():如果參數(shù)節(jié)點(diǎn)DOM是已經(jīng)存在的節(jié)點(diǎn)，appendChild方法會(huì)將其從原來(lái)的位置，移動(dòng)到新位置。
2 .hasChildNodes():返回一個(gè)布爾值，表示當(dāng)前節(jié)點(diǎn)是否有子節(jié)點(diǎn)

hasChildNodes()
firstChild!==null
node.childNodes && node.childNodes.length>0

3 .cloneNode()
4 .insertBefore(node,target) node:要插入的節(jié)點(diǎn)，target:要插入的位置
5 .removeChild(n):刪除里面的一個(gè)子節(jié)點(diǎn)，這個(gè)方法是在父節(jié)點(diǎn)上面調(diào)用的

//刪除所有子節(jié)點(diǎn)
var el=document.getElementById('p')
while(el.firstChild){
  el.removeChild(el.firstChild);
}

6 .replaceChild(old,new)
7 .contains(node):檢查這個(gè)參數(shù)節(jié)點(diǎn)是否滿足一下三個(gè)條件

1.參數(shù)節(jié)點(diǎn)為當(dāng)前節(jié)點(diǎn)
2 .參數(shù)節(jié)點(diǎn)為當(dāng)前節(jié)點(diǎn)的子節(jié)點(diǎn)
3 .參數(shù)節(jié)點(diǎn)為當(dāng)前節(jié)點(diǎn)的后代節(jié)點(diǎn)

8 .compareDocumentPosition()：返回一個(gè)7個(gè)比特位的二進(jìn)制值，表示參數(shù)節(jié)點(diǎn)與當(dāng)前節(jié)點(diǎn)的關(guān)系.兩個(gè)節(jié)點(diǎn)是否相同，是否在同一文檔，誰(shuí)在誰(shuí)的前面
9 .isEqualNode():返回一個(gè)布爾值，檢查兩個(gè)節(jié)點(diǎn)是否相同。節(jié)點(diǎn)的類(lèi)型，屬性，子節(jié)點(diǎn)
10 .isSameNode():返回一個(gè)布爾值，表示兩個(gè)節(jié)點(diǎn)是否為同一節(jié)點(diǎn)
11 .getRootNode()返回當(dāng)前節(jié)點(diǎn)所在文檔的根節(jié)點(diǎn)，和ownerDocument屬性的作用一樣

nodeList接口

1 .單個(gè)對(duì)象集合的數(shù)據(jù)結(jié)構(gòu)
2 .nodelist可以包含各種類(lèi)型的節(jié)點(diǎn)，HtmlCollection只能包含html節(jié)點(diǎn)
3 .獲取Nodelist實(shí)例。

1.Node.childNodes
2.document.querySelectorAll()等節(jié)點(diǎn)搜索方法

屬性

1 .length:里面節(jié)點(diǎn)的個(gè)數(shù)
2 .是一個(gè)類(lèi)數(shù)組的結(jié)構(gòu)，如果想要使用數(shù)組的方法，可以把它轉(zhuǎn)為數(shù)組結(jié)構(gòu)
3 .可能是一個(gè)動(dòng)態(tài)集合，也可能是一個(gè)靜態(tài)集合.目前，只有node.childNodes返回的是一個(gè)個(gè)動(dòng)態(tài)集合，即dom新增或者刪除一個(gè)相關(guān)節(jié)點(diǎn)，都是立刻反映在NodeList實(shí)例。
4 .item(n)：返回對(duì)應(yīng)位置的數(shù)組元素，但是所有類(lèi)似數(shù)組的對(duì)象，都可以使用[]方括號(hào)來(lái)取出，所以一般是不用這個(gè)方法的

方法

1 .forEach
2 .for循環(huán)
3 .keys()
4 .values()
5 .entries():和對(duì)象的三個(gè)方法一樣，返回對(duì)應(yīng)的遍歷器

HTMLCollection

1 .以為是一個(gè)節(jié)點(diǎn)對(duì)象的集合，但是只能包含元素節(jié)點(diǎn)，沒(méi)有其他類(lèi)型的節(jié)點(diǎn)
2 .返回的也是一個(gè)類(lèi)似數(shù)組的對(duì)象，但是沒(méi)有forEach方法，只有for循環(huán)遍歷
3 .htmlcolltction實(shí)例都是動(dòng)態(tài)集合，節(jié)點(diǎn)的變化都會(huì)實(shí)時(shí)反映在結(jié)合中
4 .length,item方法也有
5 .namedItem()參數(shù)是一個(gè)字符串，表示id屬性或者name屬性，返回對(duì)應(yīng)的元素節(jié)點(diǎn)，如果沒(méi)有對(duì)應(yīng)的節(jié)點(diǎn)，則返回null.

parentNode

1 .節(jié)點(diǎn)對(duì)象除了繼承Node接口之外，還會(huì)繼承其他接口
2 .parentNode表示當(dāng)前節(jié)點(diǎn)時(shí)一個(gè)父節(jié)點(diǎn)，提供一些處理子節(jié)點(diǎn)的方法
3 .如果當(dāng)前節(jié)點(diǎn)是父節(jié)點(diǎn)，會(huì)繼承parentNode接口，由于只有元素節(jié)點(diǎn)，文檔節(jié)點(diǎn)和文檔片段節(jié)點(diǎn)擁有子節(jié)點(diǎn)，因此只有這三類(lèi)節(jié)點(diǎn)會(huì)繼承parentNode接口
4 .childen屬性返回一個(gè)HTMLCollection實(shí)例，成員是當(dāng)前節(jié)點(diǎn)的所有元素子節(jié)點(diǎn)，該屬性只讀。
5 .childen屬性只包含元素子節(jié)點(diǎn)，不包含其他類(lèi)型的子節(jié)點(diǎn)（比如文本節(jié)點(diǎn)），如果沒(méi)有元素類(lèi)型的子節(jié)點(diǎn)，返回值HTMLCollection實(shí)例的length屬性為0
6 .firstElementChild:返回當(dāng)前節(jié)點(diǎn)的第一個(gè)元素子節(jié)點(diǎn)。document的第一個(gè)元素子節(jié)點(diǎn)是HTML
7 .lastElementChild:document的最后一個(gè)元素子節(jié)點(diǎn)也是html
8 .childElementCount:表示當(dāng)前節(jié)點(diǎn)的所有元素子節(jié)點(diǎn)的數(shù)目

繼承的方法

1 .append():追加一個(gè)或者多個(gè)子節(jié)點(diǎn)，位置是最后一個(gè)元素子節(jié)點(diǎn)的后面，這個(gè)方法不僅可以增加元素節(jié)點(diǎn)，也可以增加文本節(jié)點(diǎn)
2 .preappend():位置是第一個(gè)元素子節(jié)點(diǎn)的前面

ChildNode接口

1 .如果一個(gè)節(jié)點(diǎn)有父節(jié)點(diǎn)，那么該節(jié)點(diǎn)就繼承了childNode接口

繼承方法

1 .remove()：這個(gè)竟然是子節(jié)點(diǎn)調(diào)用的
2 .before():在當(dāng)前節(jié)點(diǎn)的前面，插入一個(gè)或者多個(gè)同級(jí)節(jié)點(diǎn)
3 .after():在當(dāng)前節(jié)點(diǎn)的后面，插入一個(gè)或者多個(gè)同級(jí)節(jié)點(diǎn)
4 .replacewith(el)：使用節(jié)點(diǎn)參數(shù)，替換當(dāng)前節(jié)點(diǎn)，參數(shù)可以使元素節(jié)點(diǎn)，也可以是文本節(jié)點(diǎn)。

document節(jié)點(diǎn)

1 .doucment節(jié)點(diǎn)對(duì)象代表整個(gè)文檔，每張網(wǎng)頁(yè)都由自己的document對(duì)象，只要瀏覽器開(kāi)始載入HTML文檔，該對(duì)象就存在了，可以直接使用。
2 .iframe里面，iframe節(jié)點(diǎn)的contentDocument屬性
3 .ajax里面，使用XMLHttpRequest對(duì)象的responseXML屬性
4 .document對(duì)象繼承了EventTarget接口，Node接口，ParentNode接口，這些接口的方法都是可以使用的

屬性

1 .document.defaultView屬性返回document對(duì)象所屬的window對(duì)象，如果當(dāng)前文檔不屬于window對(duì)象，該屬性返回null.
2 .document.doctype:html文檔的文檔類(lèi)型，指向<DOCTYPE>節(jié)點(diǎn)，如果網(wǎng)頁(yè)內(nèi)有聲明DTD,該屬性返回null
3 .document.documentELement:當(dāng)前文檔的根元素節(jié)點(diǎn),root。是document的第二個(gè)子節(jié)點(diǎn)，緊跟在document.doctype節(jié)點(diǎn)后面，html網(wǎng)頁(yè)的該屬性，一般是HTML節(jié)點(diǎn)
4 .document.body:指向body節(jié)點(diǎn)。
5 .document.head:指向head節(jié)點(diǎn)，這兩個(gè)屬性總是存在的，如果網(wǎng)頁(yè)源碼里面省略了head或者body。瀏覽器會(huì)自動(dòng)創(chuàng)建
6 .document.scrollingelement:返回文檔的滾動(dòng)元素，也就是說(shuō)，當(dāng)文檔整體滾動(dòng)時(shí)，到底是哪個(gè)元素在滾動(dòng)
7 .document.activeElement:返回當(dāng)前獲得焦點(diǎn)的DOM元素，通常是input,textare,select等表單元素，如果當(dāng)前沒(méi)有焦點(diǎn)元素，返回body元素或者null
8 .document.fullscreenElement:返回當(dāng)前以全屏狀態(tài)展示的dom元素，如果不是全屏，返回null
9 .document.links:返回所有設(shè)定了href屬性的a或者area節(jié)點(diǎn)
10 .document.froms:返回所有form表單節(jié)點(diǎn)。
11 .document.images:返回頁(yè)面所有的圖片節(jié)點(diǎn)
12 .document.embes，documet.plugins，都返回embed節(jié)點(diǎn)。
13 .document.script：返回所有script節(jié)點(diǎn)
14 .document.styleSheets
15 .以上返回的都是HTMLCollection集合
16 .文檔靜態(tài)信息
17 .document.documentURL:返回當(dāng)前的文檔的網(wǎng)址
18 .document.domain:返回當(dāng)前文檔的域名，次級(jí)域名的網(wǎng)頁(yè)可以把document.domian 設(shè)為對(duì)應(yīng)的上級(jí)域名。修改之后，域名相同的兩個(gè)網(wǎng)頁(yè)，可以獲取對(duì)方的資源，比如設(shè)置cookie
19 .document.lcaotion:對(duì)象是瀏覽器提供的原生對(duì)象，提供URL相關(guān)的信息和操作方法
20 .document.lastMOdified:表示當(dāng)前文檔最后修改時(shí)間，是一個(gè)字符串，想要進(jìn)行時(shí)間比較的時(shí)候必須先轉(zhuǎn)化為時(shí)間
21 .document.title:返回當(dāng)前文檔的標(biāo)題，這個(gè)值是可以修改的，一旦被修改之后，返回修改之后的值。
22 .document.characterSet:返回當(dāng)前文檔的編碼：utf-8
23 .document.referrer:返回一個(gè)字符串，表示當(dāng)前文檔的訪問(wèn)者來(lái)自哪里,如果無(wú)法獲取來(lái)源，或者用戶直接鍵入網(wǎng)址而不是從其他網(wǎng)頁(yè)點(diǎn)擊進(jìn)入，返回一個(gè)空字符串
24 .document.dir:返回一個(gè)字符串，表示文字方向，只有兩個(gè)可能的值一個(gè)是從左到右，一個(gè)是從右到左。
25 .document.compatMode:返回瀏覽器處理文檔的模式，可能的值為backCompat:向后兼容，CSSlCopat:嚴(yán)格模式
26 .和文檔狀態(tài)有關(guān)的一些屬性值
27 .document.hidden:返回一個(gè)布爾值，表示當(dāng)前頁(yè)面是否可見(jiàn)。最小化，瀏覽器切換了tab都是導(dǎo)致頁(yè)面不可見(jiàn)，使得document.hidden返回true.配合page visibility api使用
28 .docyment.visibilityState:返回文檔的可見(jiàn)狀態(tài)

1.visible:頁(yè)面可見(jiàn)，但并不代表著焦點(diǎn)可見(jiàn)。
2 .hidden:頁(yè)面不可見(jiàn)，有可能窗口最小化，或者瀏覽器切換到了另一個(gè)tab
3 .prerender:頁(yè)面正處于可渲染狀態(tài)，對(duì)于用戶來(lái)說(shuō)，改頁(yè)面不可見(jiàn)
4 .unloaded:頁(yè)面從內(nèi)存里面卸載了。

29 .document.readyState:當(dāng)前文檔的狀態(tài)

1.loading:加載html代碼階段
2.ineractive:加載外部資源階段
//html文檔解析完成，包括script腳本
3.complate:加載完成
//瀏覽器等待圖片，樣式表，字體文件等外部資源加載完成，一旦全部加載完成，變成complete.

30 .document.cookie:用來(lái)操作瀏覽器cookie
31 .document.designMode:屬性控制當(dāng)前文檔是否可編輯，一旦設(shè)置為on，用戶就可以編輯整個(gè)文檔的內(nèi)容。

方法

1 .document.open():清除當(dāng)前文檔所有內(nèi)容，使得文檔處于可寫(xiě)狀態(tài)，方便document.write方法寫(xiě)入內(nèi)容
2 .document.close():關(guān)閉上一個(gè)方法打開(kāi)的文檔
3 .document.write()這個(gè)寫(xiě)入方法是js標(biāo)準(zhǔn)化之前就存在的方法，innerHTML完全可以替代這個(gè)方法進(jìn)行寫(xiě)入，避免使用wirte方法
4 .document.querySelector(),document.querySlectorAll()：接受一個(gè)css選擇器作為參數(shù)，返回對(duì)應(yīng)的節(jié)點(diǎn)。兩個(gè)方法都支持復(fù)雜的css選擇器，但是不支持偽類(lèi)選擇.這兩個(gè)方法不僅可以定義在document,在元素節(jié)點(diǎn)上也是可以調(diào)用的。
5 .document.getElementsByTagName():搜索返回HTML標(biāo)簽名，返回符合條件的元素，返回值是HTMLCollection,返回的成員順序就是他們?cè)谖臋n中出現(xiàn)的順序
6 .docuemnt.getElementsByName()
7 .document.getElementsByClassName()
8 .docuement.getElementById()：
9 .document.elementFromPoint(x,y):根據(jù)x,y坐標(biāo)來(lái)選擇最近的元素
10 .document.createElement()生成元素節(jié)點(diǎn)
11 .document.createTextNode(0生成文本節(jié)點(diǎn)
12 .document.createAttribute()生成一個(gè)新的屬性節(jié)點(diǎn)
13 .document.createComment()生成一個(gè)注釋節(jié)點(diǎn)，并返回該節(jié)點(diǎn)
14 .document.createDOcumentFragment()生成一個(gè)空的文檔片段對(duì)象,對(duì)新對(duì)象做的任何操作，都不會(huì)引發(fā)頁(yè)面的重新渲染。
15 .document.createEvent()：生成一個(gè)事件對(duì)象，該對(duì)象可以被dispatchEvent方法使用，觸發(fā)指定事件

1.UIEvents
2.MouseEvents
3.MutationEvents
4.HTMLEvents

16 .document.addEventListener()，document.removeEventListener(),
documentdispatchEvent()觸發(fā)一個(gè)事件
17 .document.hasFocus():當(dāng)前文檔中是否有元素被激活或者獲得焦點(diǎn)
18 .document.adopNode()：將某個(gè)節(jié)點(diǎn)極其子節(jié)點(diǎn)，從原來(lái)所在的文檔或者documentfragment里面移除，歸屬當(dāng)前的document對(duì)象，返回插入后的新節(jié)點(diǎn)。
19 .document.importNode():從原來(lái)所在的文檔或documentFragment里面，拷貝某個(gè)節(jié)點(diǎn)極其子節(jié)點(diǎn)，讓他們歸屬當(dāng)前document對(duì)象
20 .document.createtNodeIterator():返回一個(gè)子節(jié)點(diǎn)遍歷器，用來(lái)遍歷所有子節(jié)點(diǎn)
21 .document.createtTreeWalker()返回一個(gè)dom的子樹(shù)遍歷器，返回的是TreeWalker實(shí)例
22 .