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

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

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

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

除了根節(jié)點(diǎn)，其他節(jié)點(diǎn)都有三種層級(jí)關(guān)系:

父節(jié)點(diǎn)關(guān)系（parentNode）：直接的那個(gè)上級(jí)節(jié)點(diǎn)

子節(jié)點(diǎn)關(guān)系（childNodes）：直接的下級(jí)節(jié)點(diǎn)

同級(jí)節(jié)點(diǎn)關(guān)系（sibling）：擁有同一個(gè)父節(jié)點(diǎn)的節(jié)點(diǎn)

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

console.log(document)    //#document   頁(yè)面上的內(nèi)容

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

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

Document對(duì)象繼承于Node對(duì)象 Node對(duì)象繼承于EventTarget對(duì)象

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

DOM無(wú)論是使用的還是得到的都應(yīng)該是對(duì)象

getElementById()方法

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

getElementsByName()方法
通過(guò)name屬性獲取
由于name屬性不唯一 得到的結(jié)果可能是多個(gè) 所以為Elements
因?yàn)榈玫降氖且粋€(gè)集合 如果想取到對(duì)應(yīng)的值 需要添加索引值

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

getElementsByTagName
通過(guò)TagName屬性獲取 與name屬性相同

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

getElementsByClassName
通過(guò)ClassName屬性獲取 與name屬性相同 存在兼容問(wèn)題

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

文本節(jié)點(diǎn)(Text) ---> 文本節(jié)點(diǎn)的內(nèi)容

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

通過(guò)指定元素查找它的父節(jié)點(diǎn) 可以用Node對(duì)象的parentNode屬性實(shí)現(xiàn)

    
Xayah
    
Lucian
    
Vayne


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

通過(guò)parentElement屬性 獲取其父元素節(jié)點(diǎn)

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

區(qū)別:

父節(jié)點(diǎn)(parentNode) 并沒(méi)有指定節(jié)點(diǎn)的父節(jié)點(diǎn)是哪一個(gè)類型的節(jié)點(diǎn)

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

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

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

可以通過(guò)Node對(duì)象的childNodes firstChild lastChild 屬性實(shí)現(xiàn)

獲取所有子節(jié)點(diǎn)
childNodes用于獲取指定節(jié)點(diǎn)的所有子節(jié)點(diǎn)
返回一個(gè)只讀的NodeList對(duì)象 并且是一個(gè)動(dòng)態(tài)的NodeList對(duì)象

    
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]

獲取第一個(gè)子節(jié)點(diǎn)
Node對(duì)象提供的firstChild屬性用于獲取指定節(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn)
如果當(dāng)前節(jié)點(diǎn)無(wú)子節(jié)點(diǎn) 則返回null

    
Xayah
    
Lucian
    
Vayne



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

獲取最后一個(gè)子節(jié)點(diǎn)
Node對(duì)象提供的lastChild屬性用于獲取指定節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)

    
Xayah
    
Lucian
    
Vayne



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

previousSibling 獲取指定節(jié)點(diǎn)的上一個(gè)兄弟節(jié)點(diǎn)

    
Xayah
Lucian
    
Vayne


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

nextSibling 獲取指定節(jié)點(diǎn)的下一個(gè)兄弟節(jié)點(diǎn)

    
Xayah
    
Lucian
Vayne


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