摘要：是操作網頁的接口，全稱為文檔對象模型。它的作用是將網頁轉為一個對象，從而可以用腳本進行各種操作節點的最小組成單位叫做節點。

DOM 是 JavaScript 操作網頁的接口，全稱為“文檔對象模型”（Document Object Model）。它的作用是將網頁轉為一個 JavaScript 對象，從而可以用腳本進行各種操作

DOM 的最小組成單位叫做節點（node）。文檔的樹形結構（DOM 樹），就是由各種不同類型的節點組成

一個文檔的所有節點，按照所在的層級，類似樹狀結構 它有一個頂層節點，下一層都是頂層節點的子節點，然后子節點又有自己的子節點

除了根節點，其他節點都有三種層級關系:

父節點關系（parentNode）：直接的那個上級節點

子節點關系（childNodes）：直接的下級節點

同級節點關系（sibling）：擁有同一個父節點的節點

Document對象提供了訪問和更新HTML頁面內容的屬性和方法
Document對象作為DOM訪問和更新HTML頁面內容的入口 可以定位HTML頁面中的元素 或者創建新的元素

console.log(document)    //#document   頁面上的內容

Document對象的屬性和方法被定義在prototype原型中

console.log(Document.prototype)   //一個包含很多屬性和方法的對象

Document對象繼承于Node對象 Node對象繼承于EventTarget對象

console.log(Document.prototype instanceof Node)  //true
console.log(Node.prototype instanceof EventTarget) //true
console.log(Document.prototype instanceof EventTarget) //true

DOM無論是使用的還是得到的都應該是對象

getElementById()方法

    var buttonElement =document.getElementById("btn");
    console.log(buttonElement instanceof Object)  //true

getElementsByName()方法
通過name屬性獲取
由于name屬性不唯一 得到的結果可能是多個 所以為Elements
因為得到的是一個集合 如果想取到對應的值 需要添加索引值

 
 var btn=document.getElementsByName("btn")[0]

getElementsByTagName
通過TagName屬性獲取 與name屬性相同

 
 var btn=document.getElementsByTagName("button")[0]

getElementsByClassName
通過ClassName屬性獲取 與name屬性相同 存在兼容問題

 
 var btn=document.getElementsByClassName("btn")[0]

querySelector()方法
通過CSS選擇器定位第一個匹配的元素
接收參數 表示選擇器 可以包含一個或多個CSS選擇器 多個用逗號分隔

  
querySelectorAll()方法
通過CSS選擇器定位所有匹配的元素
返回一個NodeList集合
var liList=document.querySelectorAll("li);
創建節點
創建元素節點
Document對象提供了createElement()方法創建元素節點
var buttonElement=document.crateElement("button");
創建文本節點
Document對象提供了createTextNode()方法創建元素節點
接收一個參數 是文本節點中的內容 是一個字符串
var text=document.createTextNode("我是文本內容")
創建屬性節點
Document對象提供了createAttribute()方法創建元素節點
接受一個參數 為節點的屬性名稱
創建屬性節點方法只具有屬性名稱 沒有屬性值
var attributeNode=document.createAttributeNode("id")   //為元素添加一個id屬性
Node對象
Node對象主要提供了用于解析DOM節點樹結構的屬性和方法
Node對象是解析DOM節點結構的主要入口
繼承關系
Node對象繼承于EventTarget對象  EventTarget是一個用于接收事件的對象
console.log(Node.prototype instanceof EventTarget)   //true
Document對象和Element對象都繼承于Node對象
console.log(Document.prototype instanceof Node)  //true
console.log(Element.prototype instanceof Node)   //true
測試Node對象
Node對象是DOM底層封裝的對象  所以并不能通過直接打印Node對象來查看它的屬性或者方法

判斷節點類型
Node對象中提供了nodeName nodeType nodeValue  分別用于獲取指定節點的節點名稱  節點類型  節點值

nodeName 用于獲取指定節點的節點名稱

var btn =document.getElementById("btn");
console.log(btn.nodeName)   //BUTTON

不同的節點類型 nodeName返回的節點名稱不同 :

元素節點(Element) ---> 元素節點的節點名

屬性節點(Attribute) ---> 屬性節點的屬性名

文本節點(Text) ---> #text

文檔節點(Document) ---> #document

var btn =document.getElementById("btn");
console.log(btn.nodeType)  //1

不同的節點類型 nodeType返回的節點名稱也不同:

元素節點(Element) ---> 1

屬性節點(Attribute) ---> 2

文本節點(Text) ---> 3

文檔節點(Document) ---> 9

按鈕
var btn =document.getElementById("btn");
console.log(btn.nodeValue);   // null

不同的節點類型 nodeValue返回的節點類型也不同:

元素節點(Element) ---> null

屬性節點(Attribute) ---> 屬性節點的屬性值

文本節點(Text) ---> 文本節點的內容

文檔節點(Document) ---> null

通過指定元素查找它的父節點 可以用Node對象的parentNode屬性實現

    
Xayah
    
Lucian
    
Vayne


 var abm =document.getElementById("abm");
 var parent =abm.parentNode;
 console.log(parent); //  
...

通過parentElement屬性 獲取其父元素節點

console.log(abm.parentElement)  //
...

區別:

父節點(parentNode) 并沒有指定節點的父節點是哪一個類型的節點

父元素節點(parentElement) 指定了節點的父節點一定是元素節點

獲取html的父節點 為document文檔節點
但document文檔節點并不是元素節點

var html=document.documentElement;
console.log(html.parentNode)    //文檔節點
console.log(html.parentElement)  //null

可以通過Node對象的childNodes firstChild lastChild 屬性實現

獲取所有子節點
childNodes用于獲取指定節點的所有子節點
返回一個只讀的NodeList對象 并且是一個動態的NodeList對象

    
Xayah
    
Lucian
    
Vayne



var parent =document.getElementById("parent");
var children=parent.childNodes;
console.log(children)  //NodeList(7)?[text, li, text, li#abm, text, li, text]

獲取第一個子節點
Node對象提供的firstChild屬性用于獲取指定節點的第一個子節點
如果當前節點無子節點 則返回null

    
Xayah
    
Lucian
    
Vayne



var parent =document.getElementById("parent");
console.log(parent.firstChild) //#text   第一個li前的換行

獲取最后一個子節點
Node對象提供的lastChild屬性用于獲取指定節點的最后一個子節點

    
Xayah
    
Lucian
    
Vayne



var parent =document.getElementById("parent");
console.log(parent.lastChild)   //#text 最后一個li后的換行

previousSibling 獲取指定節點的上一個兄弟節點

    
Xayah
Lucian
    
Vayne


var abm=document.getElementById("abm");
console.log(abm.previousSibling)  //
Xayah

nextSibling 獲取指定節點的下一個兄弟節點

    
Xayah
    
Lucian
Vayne


var abm=document.getElementById("abm");
console.log(abm.nextSibling)  //
Vayne