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

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

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

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

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

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

子節(jié)點關系（childNodes）：直接的下級節(jié)點

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

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

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選擇器定位第一個匹配的元素
接收參數(shù) 表示選擇器 可以包含一個或多個CSS選擇器 多個用逗號分隔

  
querySelectorAll()方法
通過CSS選擇器定位所有匹配的元素
返回一個NodeList集合
var liList=document.querySelectorAll("li);
創(chuàng)建節(jié)點
創(chuàng)建元素節(jié)點
Document對象提供了createElement()方法創(chuàng)建元素節(jié)點
var buttonElement=document.crateElement("button");
創(chuàng)建文本節(jié)點
Document對象提供了createTextNode()方法創(chuàng)建元素節(jié)點
接收一個參數(shù) 是文本節(jié)點中的內容 是一個字符串
var text=document.createTextNode("我是文本內容")
創(chuàng)建屬性節(jié)點
Document對象提供了createAttribute()方法創(chuàng)建元素節(jié)點
接受一個參數(shù) 為節(jié)點的屬性名稱
創(chuàng)建屬性節(jié)點方法只具有屬性名稱 沒有屬性值
var attributeNode=document.createAttributeNode("id")   //為元素添加一個id屬性
Node對象
Node對象主要提供了用于解析DOM節(jié)點樹結構的屬性和方法
Node對象是解析DOM節(jié)點結構的主要入口
繼承關系
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對象來查看它的屬性或者方法

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

nodeName 用于獲取指定節(jié)點的節(jié)點名稱

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

不同的節(jié)點類型 nodeName返回的節(jié)點名稱不同 :

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

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

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

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

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

不同的節(jié)點類型 nodeType返回的節(jié)點名稱也不同:

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

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

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

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

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

不同的節(jié)點類型 nodeValue返回的節(jié)點類型也不同:

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

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

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

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

通過指定元素查找它的父節(jié)點 可以用Node對象的parentNode屬性實現(xiàn)

    
Xayah
    
Lucian
    
Vayne


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

通過parentElement屬性 獲取其父元素節(jié)點

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

區(qū)別:

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

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

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

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

可以通過Node對象的childNodes firstChild lastChild 屬性實現(xiàn)

獲取所有子節(jié)點
childNodes用于獲取指定節(jié)點的所有子節(jié)點
返回一個只讀的NodeList對象 并且是一個動態(tài)的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]

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

    
Xayah
    
Lucian
    
Vayne



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

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

    
Xayah
    
Lucian
    
Vayne



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

previousSibling 獲取指定節(jié)點的上一個兄弟節(jié)點

    
Xayah
Lucian
    
Vayne


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

nextSibling 獲取指定節(jié)點的下一個兄弟節(jié)點

    
Xayah
    
Lucian
Vayne


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