????最近學(xué)習(xí)過(guò)程中剛好接觸到了DOM，根據(jù)課上代碼的使用與老師講解大概了解了一下疼燥。課后我查了維基百科件余、MDN與阮一峰的JavaScript標(biāo)準(zhǔn)參考教程中關(guān)于DOM的介紹，加深了對(duì)DOM的了解肠虽。以下我對(duì)所查到資料與課上的筆記進(jìn)行整理幔戏，簡(jiǎn)單介紹一下DOM是個(gè)什么東西。畢竟剛剛才學(xué)到DOM税课，知識(shí)總結(jié)肯定不夠全面闲延，后續(xù)對(duì)DOM掌握到一定程度我會(huì)再重新整理修改一下。
DOM（Document Object Model）文檔對(duì)象模型韩玩，是JavaScript操作網(wǎng)頁(yè)的接口垒玲。它的作用是將網(wǎng)頁(yè)轉(zhuǎn)為一個(gè)JavaScript對(duì)象，從而可以用腳本進(jìn)行各種增刪減改內(nèi)容的操作找颓。
瀏覽器會(huì)根據(jù)DOM模型將HTML文檔解析成一系列的節(jié)點(diǎn)（node：DOM的最小組成單位）合愈，再由這些節(jié)點(diǎn)組成一個(gè)樹狀結(jié)構(gòu)（DOM tree）』魇ǎ或者也可以這么說(shuō)佛析，DOM模型用一個(gè)邏輯樹表示一個(gè)文檔，樹的每個(gè)分支的終點(diǎn)都是一個(gè)節(jié)點(diǎn)（node）彪蓬，每個(gè)節(jié)點(diǎn)都包含著對(duì)象（Object）寸莫。DOM的方法可以讓你用特定的方式操作這個(gè)樹，用這些方法可以改變文檔結(jié)構(gòu)档冬、樣式以及內(nèi)容膘茎。所有的節(jié)點(diǎn)和最終的樹狀結(jié)構(gòu)都有規(guī)范的對(duì)外接口（API）。
注意：DOM并不是一個(gè)編程語(yǔ)言捣郊，它只是一個(gè)接口規(guī)范辽狈，可以用各種語(yǔ)言實(shí)現(xiàn)。DOM并不是JavaScript語(yǔ)法的一部分呛牲，但是如果沒(méi)有DOM刮萌，JavaScript語(yǔ)言就沒(méi)有辦法控制網(wǎng)頁(yè)。
-
節(jié)點(diǎn)類型（nodeType）
- 節(jié)點(diǎn)的類型有七種：
Document（Node.DOCUMENT_NODE=== 9）：整個(gè)文檔樹的頂層節(jié)點(diǎn)
DocumentType（Node.DOCUMENT_TYPE_NODE=== 10）：doctype標(biāo)簽（比如<!DOCTYPE html>）
Element（Node.ELEMENT_NODE=== 1）：網(wǎng)頁(yè)的各種HTML標(biāo)簽（比如<body>娘扩、<a>等）
Attribute：網(wǎng)頁(yè)元素的屬性（比如class="right"）
Text（Node.TEXT_NODE=== 3）：標(biāo)簽之間或標(biāo)簽包含的文本
Comment（Node.COMMENT_NODE=== 8）：注釋
DocumentFragment（Node.DOCUMENT_FRAGMENT_NODE=== 1）：文檔的片段
瀏覽器提供一個(gè)原生的節(jié)點(diǎn)對(duì)象Node着茸，上面這七種節(jié)點(diǎn)都繼承了Node壮锻，因此具有一些共同的屬性和方法。
節(jié)點(diǎn)（Node）有一個(gè)屬性nodeType表示Node的類型涮阔，它是一個(gè)整數(shù)猜绣，其數(shù)值分別表示相應(yīng)的Node類型。
根據(jù)以上知識(shí)如果我們需要判斷一個(gè)Node是否是元素敬特，可以如以下代碼所示判斷：
if(Node.nodeType === 1){
console.log('Node is a Element');
}
-
常用的DOM操作API
1.creatElement
createElement通過(guò)傳入指定的一個(gè)標(biāo)簽名來(lái)創(chuàng)建一個(gè)元素掰邢，代碼如下：
var div = document.creatElement('div')
上面代碼新建一個(gè)<div>的節(jié)點(diǎn)
2.appendChild
appendChild接受一個(gè)節(jié)點(diǎn)對(duì)象作為參數(shù)，將其作為最后一個(gè)子節(jié)點(diǎn)伟阔，插入當(dāng)前節(jié)點(diǎn)辣之。該方法的返回值就是插入文檔的子節(jié)點(diǎn)。代碼如下：
var div = document.createElement('div');
document.body.appendChild(div);
上面代碼新建一個(gè)<div>的節(jié)點(diǎn)并將其插入document.body的尾部皱炉。
3.nodeName
nodeName屬性返回節(jié)點(diǎn)的名稱怀估。
// HTML 代碼如下
// <div id="div1">hello world</div>
var div = document.getElementById('div1');
div.nodeName // "DIV"
上面代碼中，元素節(jié)點(diǎn)<div>的nodeName屬性就是大寫的標(biāo)簽名DIV合搅。
如果想要得到小寫的標(biāo)簽名多搀，則可修改為：div.nodeName.lowercase()
4.textContent
textContent屬性返回當(dāng)前節(jié)點(diǎn)和它的所有后代節(jié)點(diǎn)的文本內(nèi)容。
// HTML 代碼為
// <div id="divA">This is <span>some</span> text</div>
document.getElementById('divA').textContent
// This is some text
textContent屬性自動(dòng)忽略當(dāng)前節(jié)點(diǎn)內(nèi)部的 HTML 標(biāo)簽灾部，返回所有文本內(nèi)容康铭。它的屬性是可讀寫的，給該屬性一個(gè)值梳猪，會(huì)創(chuàng)建一個(gè)新的文本節(jié)點(diǎn)麻削，替換所有原來(lái)的子節(jié)點(diǎn)。它還有一個(gè)好處春弥，就是自動(dòng)對(duì) HTML 標(biāo)簽轉(zhuǎn)義。
document.getElementById('divA').textContent = 'Hello World'
// 原先div內(nèi)容被修改為Hello World
5.nextSibling
nextSibling屬性返回緊跟在當(dāng)前節(jié)點(diǎn)后面的第一個(gè)同級(jí)節(jié)點(diǎn)叠荠。如果當(dāng)前節(jié)點(diǎn)后面沒(méi)有同級(jí)節(jié)點(diǎn)匿沛，則返回null。
注意：如果當(dāng)前節(jié)點(diǎn)后面有空格榛鼎，那我們拿到的節(jié)點(diǎn)便是文本節(jié)點(diǎn)逃呼，與預(yù)期的不符，故需要進(jìn)行處理一下者娱，使用while循環(huán)遍歷所有子節(jié)點(diǎn)來(lái)找出正確的節(jié)點(diǎn)抡笼。
6.previousSibling
previousSibling屬性返回當(dāng)前節(jié)點(diǎn)前面的、距離最近的一個(gè)同級(jí)節(jié)點(diǎn)黄鳍。如果當(dāng)前節(jié)點(diǎn)前面沒(méi)有同級(jí)節(jié)點(diǎn)推姻，則返回null。
注意：previousSibling與nextSibling注意點(diǎn)相同框沟。
7.parentNode與parentElement
對(duì)于一個(gè)節(jié)點(diǎn)來(lái)說(shuō)藏古，它的父節(jié)點(diǎn)只可能是三種類型：元素節(jié)點(diǎn)（element）增炭、文檔節(jié)點(diǎn)（document）和文檔片段節(jié)點(diǎn)（documentfragment）。
parentNode屬性返回當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)拧晕。
parentElement屬性返回當(dāng)前節(jié)點(diǎn)的父元素節(jié)點(diǎn)隙姿。
8.firstChild與lastChild
firstChild屬性返回當(dāng)前節(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn)，如果當(dāng)前節(jié)點(diǎn)沒(méi)有子節(jié)點(diǎn)厂捞，則返回null输玷。
lastChild屬性返回當(dāng)前節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)，如果當(dāng)前節(jié)點(diǎn)沒(méi)有子節(jié)點(diǎn)靡馁，則返回null饲嗽。用法與firstChild屬性相同。
// HTML 代碼如下
// <p id="p1"><span>First span</span></p>
var p1 = document.getElementById('p1');
p1.firstChild.nodeName // "SPAN"
上面代碼中奈嘿，p元素的第一個(gè)子節(jié)點(diǎn)是span元素貌虾。
注意：firstChild返回的除了元素節(jié)點(diǎn)，還可能是文本節(jié)點(diǎn)或注釋節(jié)點(diǎn)裙犹。
9.childNodes
childNodes屬性返回一個(gè)類似數(shù)組的對(duì)象（NodeList集合）尽狠，成員包括當(dāng)前節(jié)點(diǎn)的所有子節(jié)點(diǎn)。使用該屬性中返回的length值叶圃，可以遍歷某個(gè)節(jié)點(diǎn)的所有子節(jié)點(diǎn)袄膏。
var div = document.getElementById('div1');
var children = div.childNodes;
for (var i = 0; i < children.length; i++) {
// ...
}
注意：除了元素節(jié)點(diǎn)，childNodes屬性的返回值還包括文本節(jié)點(diǎn)和注釋節(jié)點(diǎn)掺冠。如果當(dāng)前節(jié)點(diǎn)不包括任何子節(jié)點(diǎn)沉馆，則返回一個(gè)空的NodeList集合。由于NodeList對(duì)象是一個(gè)動(dòng)態(tài)集合德崭，一旦子節(jié)點(diǎn)發(fā)生變化斥黑，立刻會(huì)反映在返回結(jié)果之中。
