一触幼、DOM
文檔對(duì)象模型 (DOM) 是 HTML 和 XML 文檔的編程接口
它提供了對(duì)文檔的結(jié)構(gòu)化的表述硼瓣，并定義了一種方式可以使從程序中對(duì)該結(jié)構(gòu)進(jìn)行訪問，從而改變文檔的結(jié)構(gòu)置谦，樣式和內(nèi)容
任何 HTML或XML文檔都可以用 DOM表示為一個(gè)由節(jié)點(diǎn)構(gòu)成的層級(jí)結(jié)構(gòu)
節(jié)點(diǎn)分很多類型堂鲤，每種類型對(duì)應(yīng)著文檔中不同的信息和（或）標(biāo)記，也都有自己不同的特性媒峡、數(shù)據(jù)和方法瘟栖，而且與其他類型有某種關(guān)系，如下所示：
<html>
<head>
<title>Page</title>
</head>
<body>
<p>Hello World!</p >
</body>
</html>
DOM像原子包含著亞原子微粒那樣谅阿，也有很多類型的DOM節(jié)點(diǎn)包含著其他類型的節(jié)點(diǎn)半哟。接下來我們先看看其中的三種：
<div>
<p title="title">
content
</p >
</div>
上述結(jié)構(gòu)中，div签餐、p就是元素節(jié)點(diǎn)寓涨，content就是文本節(jié)點(diǎn)，title就是屬性節(jié)點(diǎn)
二贱田、操作
日常前端開發(fā)缅茉，我們都離不開DOM操作
在以前，我們使用Jquery男摧，zepto等庫來操作DOM蔬墩，之后在vue，Angular耗拓，React等框架出現(xiàn)后拇颅，我們通過操作數(shù)據(jù)來控制DOM（絕大多數(shù)時(shí)候），越來越少的去直接操作DOM
但這并不代表原生操作不重要乔询。相反樟插，DOM操作才能有助于我們理解框架深層的內(nèi)容
下面就來分析DOM常見的操作，主要分為：
- 創(chuàng)建節(jié)點(diǎn)
- 查詢節(jié)點(diǎn)
- 更新節(jié)點(diǎn)
- 添加節(jié)點(diǎn)
- 刪除節(jié)點(diǎn)
創(chuàng)建節(jié)點(diǎn)
createElement
創(chuàng)建新元素竿刁，接受一個(gè)參數(shù)黄锤，即要?jiǎng)?chuàng)建元素的標(biāo)簽名
const divEl = document.createElement("div");
createTextNode
創(chuàng)建一個(gè)文本節(jié)點(diǎn)
const textEl = document.createTextNode("content");
createDocumentFragment
用來創(chuàng)建一個(gè)文檔碎片，它表示一種輕量級(jí)的文檔食拜，主要是用來存儲(chǔ)臨時(shí)節(jié)點(diǎn)鸵熟，然后把文檔碎片的內(nèi)容一次性添加到DOM中
const fragment = document.createDocumentFragment();
當(dāng)請(qǐng)求把一個(gè)DocumentFragment 節(jié)點(diǎn)插入文檔樹時(shí)，插入的不是 DocumentFragment自身负甸，而是它的所有子孫節(jié)點(diǎn)
createAttribute
創(chuàng)建屬性節(jié)點(diǎn)流强，可以是自定義屬性
const dataAttribute = document.createAttribute('custom');
consle.log(dataAttribute);
獲取節(jié)點(diǎn)
querySelector
傳入任何有效的css 選擇器痹届，即可選中單個(gè) DOM元素（首個(gè)）：
document.querySelector('.element')
document.querySelector('#element')
document.querySelector('div')
document.querySelector('[name="username"]')
document.querySelector('div + p > span')
如果頁面上沒有指定的元素時(shí)，返回 null
querySelectorAll
返回一個(gè)包含節(jié)點(diǎn)子樹內(nèi)所有與之相匹配的Element節(jié)點(diǎn)列表打月，如果沒有相匹配的队腐，則返回一個(gè)空節(jié)點(diǎn)列表
const notLive = document.querySelectorAll("p");
需要注意的是，該方法返回的是一個(gè) NodeList的靜態(tài)實(shí)例奏篙，它是一個(gè)靜態(tài)的“快照”柴淘，而非“實(shí)時(shí)”的查詢
關(guān)于獲取DOM元素的方法還有如下，就不一一述說
document.getElementById('id屬性值');返回?fù)碛兄付╥d的對(duì)象的引用
document.getElementsByClassName('class屬性值');返回?fù)碛兄付╟lass的對(duì)象集合
document.getElementsByTagName('標(biāo)簽名');返回?fù)碛兄付?biāo)簽名的對(duì)象集合
document.getElementsByName('name屬性值'); 返回?fù)碛兄付Q的對(duì)象結(jié)合
document/element.querySelector('CSS選擇器'); 僅返回第一個(gè)匹配的元素
document/element.querySelectorAll('CSS選擇器'); 返回所有匹配的元素
document.documentElement; 獲取頁面中的HTML標(biāo)簽
document.body; 獲取頁面中的BODY標(biāo)簽
document.all['']; 獲取頁面中的所有元素節(jié)點(diǎn)的對(duì)象集合型
除此之外报破，每個(gè)DOM元素還有parentNode悠就、childNodes千绪、firstChild充易、lastChild、nextSibling荸型、previousSibling屬性盹靴，關(guān)系圖如下圖所示
更新節(jié)點(diǎn)
innerHTML
不但可以修改一個(gè)DOM節(jié)點(diǎn)的文本內(nèi)容，還可以直接通過HTML片段修改DOM節(jié)點(diǎn)內(nèi)部的子樹
// 獲取<p id="p">...</p >
var p = document.getElementById('p');
// 設(shè)置文本為abc:
p.innerHTML = 'ABC'; // <p id="p">ABC</p >
// 設(shè)置HTML:
p.innerHTML = 'ABC <span style="color:red">RED</span> XYZ';
// <p>...</p >的內(nèi)部結(jié)構(gòu)已修改
innerText瑞妇、textContent
自動(dòng)對(duì)字符串進(jìn)行HTML編碼稿静，保證無法設(shè)置任何HTML標(biāo)簽
// 獲取<p id="p-id">...</p >
var p = document.getElementById('p-id');
// 設(shè)置文本:
p.innerText = '<script>alert("Hi")</script>';
// HTML被自動(dòng)編碼，無法設(shè)置一個(gè)<script>節(jié)點(diǎn):
// <p id="p-id"><script>alert("Hi")</script></p >
兩者的區(qū)別在于讀取屬性時(shí)辕狰，innerText不返回隱藏元素的文本改备，而textContent返回所有文本
style
DOM節(jié)點(diǎn)的style屬性對(duì)應(yīng)所有的CSS，可以直接獲取或設(shè)置蔓倍。遇到-需要轉(zhuǎn)化為駝峰命名
// 獲取<p id="p-id">...</p >
const p = document.getElementById('p-id');
// 設(shè)置CSS:
p.style.color = '#ff0000';
p.style.fontSize = '20px'; // 駝峰命名
p.style.paddingTop = '2em';
添加節(jié)點(diǎn)
innerHTML
如果這個(gè)DOM節(jié)點(diǎn)是空的悬钳，例如，<div></div>偶翅，那么默勾，直接使用innerHTML = '<span>child</span>'就可以修改DOM節(jié)點(diǎn)的內(nèi)容，相當(dāng)于添加了新的DOM節(jié)點(diǎn)
如果這個(gè)DOM節(jié)點(diǎn)不是空的聚谁，那就不能這么做母剥，因?yàn)?code>innerHTML會(huì)直接替換掉原來的所有子節(jié)點(diǎn)
appendChild
把一個(gè)子節(jié)點(diǎn)添加到父節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)
舉個(gè)例子
<!-- HTML結(jié)構(gòu) -->
<p id="js">JavaScript</p >
<div id="list">
<p id="java">Java</p >
<p id="python">Python</p >
<p id="scheme">Scheme</p >
</div>
添加一個(gè)p元素
const js = document.getElementById('js')
js.innerHTML = "JavaScript"
const list = document.getElementById('list');
list.appendChild(js);
現(xiàn)在HTML結(jié)構(gòu)變成了下面
<!-- HTML結(jié)構(gòu) -->
<div id="list">
<p id="java">Java</p >
<p id="python">Python</p >
<p id="scheme">Scheme</p >
<p id="js">JavaScript</p > <!-- 添加元素 -->
</div>
上述代碼中，我們是獲取DOM元素后再進(jìn)行添加操作形导，這個(gè)js節(jié)點(diǎn)是已經(jīng)存在當(dāng)前文檔樹中环疼，因此這個(gè)節(jié)點(diǎn)首先會(huì)從原先的位置刪除，再插入到新的位置
如果動(dòng)態(tài)添加新的節(jié)點(diǎn)朵耕，則先創(chuàng)建一個(gè)新的節(jié)點(diǎn)炫隶，然后插入到指定的位置
const list = document.getElementById('list'),
const haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.appendChild(haskell);
insertBefore
把子節(jié)點(diǎn)插入到指定的位置，使用方法如下：
parentElement.insertBefore(newElement, referenceElement)
子節(jié)點(diǎn)會(huì)插入到referenceElement之前
setAttribute
在指定元素中添加一個(gè)屬性節(jié)點(diǎn)憔披，如果元素中已有該屬性改變屬性值
const div = document.getElementById('id')
div.setAttribute('class', 'white');//第一個(gè)參數(shù)屬性名等限，第二個(gè)參數(shù)屬性值爸吮。
刪除節(jié)點(diǎn)
刪除一個(gè)節(jié)點(diǎn)，首先要獲得該節(jié)點(diǎn)本身以及它的父節(jié)點(diǎn)望门，然后形娇，調(diào)用父節(jié)點(diǎn)的removeChild把自己刪掉
// 拿到待刪除節(jié)點(diǎn):
const self = document.getElementById('to-be-removed');
// 拿到父節(jié)點(diǎn):
const parent = self.parentElement;
// 刪除:
const removed = parent.removeChild(self);
removed === self; // true
刪除后的節(jié)點(diǎn)雖然不在文檔樹中了，但其實(shí)它還在內(nèi)存中筹误，可以隨時(shí)再次被添加到別的位置
