1.DOM
文檔對象模型（DOM）是HTML和XML文檔的編程接口
它提供了對文檔結構化表述，并定義了一種方式可以使從程序中對該結構進行訪問，從而改變文檔的結構，樣式和內容
任何HTML或XML文檔都可以用DOM表示一個由節點構成的層級結構
節點分很多類型，每種類型對應著文檔中不同的信息和（或）標記，也都有自己不同的特性、數據和方法，而且與其他類型有某種關系，如下所示：
<html><head><title>Page</title></head><body><p>Hello World!</p ></body> </html>
DOM像原子包含著亞原子微粒那樣，也有很多類型的DOM節點包含著其他類型的節點。接下來我們先看看其中的三種：
<div><p title="title">content</p> </div>
上述結構中，div、p就是元素節點，content就是文本節點，title就是屬性節點
2.操作
日常前端開發，我們都離不開DOM操作
在以前，我們使用Jquery、zepto等庫來操作DOM，之后在vue、Angular，react等框架出現后，我們通過操作數據來控制DOM（絕大多數時候），越來越少的直接去操作DOM
但這并不代表原生操作不重要。相反，DOM操作才能有助于我們理解框架深層的內容
下面就來分析DOM常見的操作，主要分為：
- 創建節點
- 查詢節點
- 更新節點
- 添加節點
- 刪除節點
2.1 創建節點
2.1.1.createElement
創建新元素，接收一個參數，及要創建元素的標簽名
const devEl = document.createElement('div')2.1.2.createTextNode
創建一個文本節點
const textEl = document.createTextNode('Hello World!')2.1.3.createDocumentFragment
創建一個文檔片段，這是一個重要的DOM優化技術
const fragment = document.createDocumentFragment()
DocumentFragment 的特點：
- 輕量級容器 - 不是真實DOM的一部分，存在于內存中
- 性能優化 - 避免頻繁的DOM操作引起重排和重繪
- 批量操作 - 可以先構建復雜結構，再一次性插入
- 插入后消失 - 插入DOM時只有子節點被插入，fragment本身消失
使用示例：
// 創建文檔片段
const fragment = document.createDocumentFragment()
?
// 批量創建元素
for(let i = 0; i < 100; i++) {const li = document.createElement('li')li.textContent = `項目 ${i}`fragment.appendChild(li) ?// 在內存中操作，不觸發重排
}
?
// 一次性插入到DOM
const ul = document.createElement('ul')
ul.appendChild(fragment) ?// 所有li被轉移到ul中
document.body.appendChild(ul)
?
console.log(fragment.childNodes.length) // 0，fragment已經空了性能對比：
// 普通方式 - 每次appendChild都可能觸發重排
const container1 = document.getElementById('container1')
for(let i = 0; i < 1000; i++) {const div = document.createElement('div')container1.appendChild(div) // 頻繁DOM操作
}
?
// Fragment方式 - 只觸發一次重排
const fragment = document.createDocumentFragment()
for(let i = 0; i < 1000; i++) {const div = document.createElement('div')fragment.appendChild(div) // 內存操作
}
document.getElementById('container2').appendChild(fragment) // 一次性插入2.1.4.createAttribute
創建屬性節點，可以是自定義屬性
const dataAttribute = document.createAttribute('custom')
console.log(dataAttribute);2.2.獲取節點
2.2.1.querySelector
傳入任何有效的css選擇器，即可選中單個DOM元素（首個）：
1 document.querySelector('.element')
2 document.querySelector('#element')
3 document.querySelector('div')
4 document.querySelector('[name="username"]')
5 document.querySelector('div + p > span')如果頁面上沒有指定的元素時，返回null
2.2.2.querySelectorAll
返回一個包含節點子樹內所有與之相匹配的Element節點列表，如果沒有相匹配的，則返回一個空節點列表
const notLive = document.querySelectorAll("p");需要注意的是，該方法返回的是一個NodeList的靜態實例，它是一個靜態的“快照”，而非"實時"的查詢
關于獲取DOM元素的方法還有如下：
1 document.getElementById('id屬性值');返回擁有指定id的對象的引?
2 document.getElementsByClassName('class屬性值');返回擁有指定class的對象集合
3 document.getElementsByTagName('標簽名');返回擁有指定標簽名的對象集合
4 document.getElementsByName('name屬性值'); 返回擁有指定名稱的對象結合
5 document/element.querySelector('CSS選擇器'); 僅返回第—個匹配的元素
6 document/element.querySelectorAll('CSS選擇器'); ?返回所有匹配的元素
7 document.documentElement; 獲取頁?中的HTML標簽
8 document.body; 獲取頁?中的BODY標簽
9 document.all['']; 獲取頁?中的所有元素節點的對象集合型除此之外，每個DOM元素還有parentNode、childNodes、firstChild、lastChild、nextSibling、previousSibling屬性，關系如下圖所示
2.3.更新節點
2.3.1.innerHTML
不但可以修改一個DOM節點的文本內容，還可以直接通過HTML片段修改DOM節點內部的子樹
// 獲取<p id="p">...</p >
var p = document.getElementById('p'); // 設置?本為abc:
p.innerHTML = 'ABC'; // <p id="p">ABC</p > // 設置HTML:
p.innerHTML = 'ABC <span style="color:red">RED</span> XYZ';
// <p>...</p >的內部結構已修改2.3.2.innerText、textContent
自動對字符串進行HTML編碼，保證無法設置任何HTML標簽
1 // 獲取<p id="p-id">...</p >
2 var p = document.getElementById('p-id');
3 // 設置?本 :
4 p.innerText = '<script>alert("Hi")</script>';
5 // HTML被?動編碼 ，?法設置?個<script>節點 :
6 // <p id="p-id"><script>alert("Hi")</script></p >兩者的區別在于讀取屬性時，innerText不返回隱藏元素的文本，而textContent返回所有文本
2.3.3.style
DOM節點的style屬性對應所有的css，可以直接獲取或設置。遇到-需要轉化為駝峰命名
1 // 獲取<p id="p-id">...</p >
2 const p = document.getElementById('p-id');
3 // 設置CSS:
4 p.style.color = '#ff0000';
5 p.style.fontSize = '20px'; // 駝峰命名
6 p.style.paddingTop = '2em';2.4.添加節點
2.4.1.innerHTML
如果這個DOM節點是空的，例如，<div></div>,那么直接使用innerHTML = '<span></span>>'就可以修改DOM節點的內容，相當于添加了新的DOM節點
如果這個DOM節點不是空的，那就不能這么做，因為innerHTML會直接替換掉原來的所有子節點
2.4.2.appendChild
把一個子節點添加到父節點的最后一個子節點
舉個例子
<!-- HTML結構 --> <p id="js">JavaScript</p > <div id="list"><p id="java">Java</p > ? ? <p id="python">Python</p ><p id="scheme">Scheme</p > </div>
添加一個p元素
1 const js = document.getElementById('js')
2 js.innerHTML = "JavaScript"
3 const list = document.getElementById('list');
4 list.appendChild(js);現在HTML結構變成了下面
1 <!-- HTML結構 --> 2 <div id="list"> 3 ? ? <p id="java">Java</p > 4 ? ? <p id="python">Python</p > 5 ? ? <p id="scheme">Scheme</p > 6 ? ? <p id="js">JavaScript</p > ?<!-- 添加元素 --> 7 </div>
上述代碼中，我們是獲取DOM元素后再進行添加操作，這個js節點是已經存在當前文檔樹中，因此這個節點首先會從原先的位置刪除，再插入到新的位置
如果動態添加新的節點，則先創建一個新的節點，然后插入到指定的位置
1 const list = document.getElementById('list'), 2 const haskell = document.createElement('p');
3 haskell.id = 'haskell';
4 haskell.innerText = 'Haskell';
5 list.appendChild(haskell);2.4.3.insertBefore
把子節點插入到指定位置，使用方法如下：
parentElement.insertBefore(newElement, referenceElement)
子節點會插入到reference Element之前
2.4.4.setAttribute
在指定元素中添加一個屬性節點，如果元素中已有該屬性改變屬性值
1 const div = document.getElementById('id')
2 div.setAttribute('class', 'white');//第?個參數屬性名， 第?個參數屬性值2.5.刪除節點
刪除一個節點，首先要獲得該節點本身以及它的父節點，然后，調用父節點的removeChild把自己刪掉
1 // 拿到待刪除節點 :
2 const self = document.getElementById('to-be-removed');
3 // 拿到?節點 :
4 const parent = self.parentElement;
5 // 刪除 :
6 const removed = parent.removeChild(self);
7 removed === self; // true刪除后的節點雖然不在文檔樹中了，但其實它還在內存中，可以隨時再次添加到別的位置
(中))
如何訓練自己的數據集（食物分類）)
