NODE型別

js中所有的節點型別都繼承自Node型別，因此所有節點都享受這相同的基本屬性和方法。

• nodeType屬性，用於表明節點型別。最常用的是NODE.ELEMENT_NODE(1), NODE.TEXT_NODE(3).
• nodeName和nodeValue屬性：前者儲存原書的標籤名，nodeValue是始終為null
• 節點關係：每個節點都有一個childNodes屬性，其中儲存著一個NodeList物件。NodeList是一種類陣列物件，用於儲存有序的節點，可以通過方括號來訪問這些節點。nodelist的獨特之處在於，它實際上基於dom結構動態執行查詢的結果，因此dom結構的變化能夠自動反映到nodelist物件中。
• Array.prototype.slice(someNode.childNodes,0)
• 每個節點都有parentNode屬性，該屬性指向文件樹中的父節點。previousSibling, nextSibling屬性，可以訪問同一列表中的其它節點。firstChild, lastChild指向第一個和最後一個節點。hasChildNodes()在節點包含一個或多個子節點的時候返回true。
• 操作節點：appendChild():用於向childNodes列表新增一個節點，新增節點後，childNodes新添的節點及相應的關係都會更新。如果傳入到appendChild()的節點已經是文件的一部分，那結果就是將該節點從原來的位置轉移到新位置。
• insertBefore()方法：傳兩個引數：要插入的節點和作為參照的節點，插入節點後，被插入的節點會變成參照節點的前一個同胞節點。
• replaceChild():接受兩個引數：要插入的節點和要替換的。
• removeChild():一個引數：要刪除的
• cloneNode():用於建立呼叫這個方法的節點的一個完全相同的副本。cloneNode()方法接受一個bool引數，表示是否執行深複製，當為true，執行深複製，也就是複製節點和整個子節點樹，在引數為false的情況下，執行淺複製，即複製節點本身。這樣要通過appendChild()等才能將它新增到文件中。
• normalize():唯一的作用就是處理文件中的文字節點，由於解析器的實現或dom操作等原因，可能會出現文字節點不包括文字，因此當在某個節點上呼叫這個方法時，就會在該節點的後代節點上刪除空文字節點或合併為一個文字節點。

Document型別

節點資訊：
1 document.documentElement==document.firstChild,都指向頁面中的html元素。
2 document.body指向頁面中的body元素。
3 document.doctype來訪問標籤。
文件資訊：
1 document.title,用於取得和設定文件的資訊。
2 與網頁請求有關的三個請求：url,domain,referrer; referer是取得來源頁面的url，在這三個屬性中，只有domain是可以修改的，但是有同源的限制，並且只有鬆散的可以成功。當頁面中包含來自其他子域的框架或者內嵌框架時，能夠設定document.domain就非常方便了，由於跨域安全限制，來自不同子域的頁面無法通過js通訊，通過將每個頁面的document.domain設定為相同的值，這些頁面就可以互相訪問物件包含的js物件。
查詢元素
1 提供了兩個方法：getElementById()和getElementsByTagName()如果頁面中多個元素的ID相同，getElementById()只返回第一個元素。getElementsByTagName返回一個nodelist，在html文件中，這個方法會返回一個htmlcollection物件，作為一個動態的集合，可以使用方括號或item返回物件中的項，這個物件還有一個方法，是namedItem(),使用這個方法可以通過元素的name特性取得集合中的項。不僅可以通過方括號[0]來訪問，還可以傳入name來訪問[‘myimage’]。
2，第三個方法：getElementsByName():返回帶有給定name的所有元素，最常見的使用方法是取得單選按鈕。
特殊集合
這些集合都是htmlcollection物件
document.anchors 包含文件中所有帶name特性的a元素
document.forms 包含文件中所有的form元素
document.images 包含文件中所有的image元素
document.links 包含文件中所有帶href的a元素
文件屬性
document.write():寫入文件

Element型別

1 html元素
所有html元素都由htmlelement型別表示，該類直接繼承了element並添加了一些屬性，新增的這些屬性分別對應於每個html中存在的標準特性。

• id:元素在文件中的唯一標示符
• title：有關元素的附加說明
• lang:元素內容的語言程式碼
• dir:語言的方向
• className:與元素的class屬性對應
  這幾個屬性都是可寫的

2 取得特性
操作特性的dom方法有三個：getAttribute();setAttribute();removeAttribute();特性的名稱是不區分大小寫的。自定義特性應該加上data-字首以便驗證。

有兩類特殊的特性：第一類特性就是style，再通過getattribute訪問時，返回的是一個文字。在通過屬性訪問時，則返回一個物件。由於style屬性是用於以程式設計方式訪問元素樣式，因此並沒有對映到style特性。

第二類是onclick等事件處理程式，在元素上使用，返回的是js程式碼，通過getattribute訪問，是文字。

綜上，一般不經常使用getattribute(),而是隻有在取得自定義特殊值的時候，才會使用getattribute方法。

3.attributes屬性
element型別是使用attributes屬性的唯一一個dom節點型別，attributes屬性包含一個NamedNodeMap,元素每一個特性都由一個attr節點表示，每個節點都儲存在NamedNodeMap中，該物件有如下方法。

• getNameItem(name):返回nodeName屬性等於name的節點
• removeNameItem(name):從列表中移除nodeName屬性等於name的節點
• setNameItem(node)向列表中新增節點
• item(pos)：返回位於數字pos位置處的節點。

一般多用於遍歷：
element.attributes[i].nodeName
element.attributes[i].nodeValue

4.建立元素
document.createElement()可以建立新元素，也為新元素設定了ownerDocument屬性。要把新元素新增到文件樹中，可以使用appendChild()等。

5 用js建立表格
p283

6 理解NodeList和NameNodeMap和HTMLCollection,每當文件結構發生變化時，它們都會得到更新。

DOM擴充套件

兩個方法：querySelector()方法和querySelectorAll方法，其中querySelector接受一個css選擇符，返回與該模式匹配的第一個元素，如果沒有匹配元素，則返回null。通過document類呼叫queryselector方法時，只會在元素後代的範圍內查詢匹配的元素。

querySelectorAll()方法，但是返回的是所有的匹配元素而不僅僅是一個元素，這個方法返回的是nodelist例項，而其底層實現則類似與一組元素的快照，而非不斷對文件進行搜尋，與querySelector類似，能夠呼叫querySelectorAll方法的型別包括document,documentFragment和element

matchesSelector()方法：這個方法接受一個引數，即css選擇符，如果呼叫元素與該元素符匹配，則返回true,否則，返回false

元素遍歷
dom元素新增加了5個屬性

• childElementCount:返回子元素的個數
• firstElementChild:指向第一個子元素
• lastElementChild:指向最後一個子元素
• previousElementSibling:指向前一個同輩元素
• nextElementSibling:指向後一個同輩元素

與類相關的擴充
1 getElementByClassName():也可以傳入多個類名，既可以在元素上呼叫也可以在document上呼叫。
2 classList屬性：是新集合型別DOMTokenList的例項，可以使用方括號，此外還有其他方法：

• add(value)
• contains()
• remove()
• toggle()

焦點管理
document.activeElement屬性，這個屬性始終會引用dom中當前獲得焦點的元素，元素獲得焦點的方式是頁面載入，使用者輸入或呼叫focus()。預設情況下。文件剛剛載入完成時，儲存的是document.body,文件載入期間，值為null

HTMLDocument的變化
1 readyState屬性：loading /complete
2 相容模式：
3 head屬性： document.head
4 自定義資料屬性：新增字首data-, 可以通過dataset屬性來訪問自定義元素屬性的值（以點的形式訪問是沒有data字首的）

插入標記：
1 innerHTML:返回與呼叫元素的所有子節點對應的html標記