1. DOM（Document Object Model）

2018年通用版本是 DOM 3 DOM的作用：對Html文件進行增刪改查

DOM文件樹： （Object =>） 祖先 Node => Document建立Html標籤；Text 建立文字；Element 建立其他元素標籤；Comment 建立註釋…

2. Node 介面

2. 1 屬性

• childNodes //獲取的NodeList是動態集合，和querySelector()不同
• firstChild
• innerText
• lastChild
• nextSibling //會獲取到文字節點的
• nodeName
• nodeType
• nodeValue
• outerText
• ownerDocument
• parentElement
• parentNode
• previousSibling //會獲取到文字節點的
• textContent

2.1.1 innerText，innerHtml，outerText，outerHtml 和textContent 的區別

在獲取內容時：

innerText 是返回的是標籤內部所有文字內容（包括空格），不包括標籤本身； innerHtml 是返回標籤內部所有內容，包括內部的 Html 標籤；

outerText 非標準，不要用，所以不講解 outerHtml 是 返回目標標籤 + innerHtml 的內容

在寫入內容時：

<div id="test"><span>替換前</span></div>   // 都以此示例
//網頁開啟是：替換前

document.getElementById('test').innerText= "<div>替換後</div>"; 
// 原Html變為：<div id="test">&lt;div&gt;替換後&lt;/div&gt;</div>
//網頁開啟是： <div>替換後</div>

document.getElementById('test').innerHtml= "<div>替換後</div>"; 
// 原Html變為：<div id="test"><div>替換後</div></div>
//網頁開啟是： 替換後

document.getElementById('test').outerHtml= "<div>替換後</div>"; 
// 原Html變為：<div>替換後</div>
//網頁開啟是： 替換後
 

textContent 與 innerText 的區別：

• textContent 會獲取所有元素的內容，包括 <script> 和 <style> 元素，然而 innerText 不會。
• innerText 受 CSS 樣式的影響，並且不會返回隱藏元素的文字，而textContent會。
• 由於 innerText 受 CSS 樣式的影響，它會觸發重排（reflow），但textContent 不會。
• 與 textContent 不同的是, 在 Internet Explorer (對於小於等於 IE11 的版本) 中對 innerText 進行修改， 不僅會移除當前元素的子節點，而且還會永久性地破壞所有後代文字節點（所以不可能再次將節點再次插入到任何其他元素或同一元素中）。

textContent 與 innerHtml 的區別：

innerHTML 返回 HTML 文字。通常，為了在元素中檢索或寫入文字，人們使用innerHTML。但是，textContent通常具有更好的效能，因為文字不會被解析為HTML。此外，使用textContent可以防止 XSS 攻擊。

2.1.2 nodeType

Node.ELEMENT_NODE === 1  //true，元素節點
Node.TEXT_NODE === 3     //true，文字節點
xxx.nodeType === 3       //可用來檢驗xxx是一個元素節點還是元素中的文字

2.1.3 nodeName

nodeName獲取的標籤 只有svg返回小寫

2. 2 方法

• appendChild()
• cloneNode() //加上引數true就是深拷貝，拷貝該節點及其內部所有東西，不加是淺拷貝，只拷貝節點，還需其他方法新增到html中
• contains()
• hasChildNodes()
• insertBefore()
• isEqualNode()
• isSameNode()
• removeChild() //仍然在記憶體中，只是不反映到html上
• replaceChild() //也是在記憶體中的
• normalize() // 常規化

3. Document 介面

3. 1 屬性

• body
• characterSet
• childElementCount
• children
• doctype
• documentElement
• domain
• fullscreen
• head
• hidden
• images
• links
• location
• onxxxxxxxxx
• origin
• plugins //瀏覽器使用的外掛
• readyState
• referrer //哪個網址推薦來的
• scripts
• scrollingElement
• styleSheets
• title
• visibilityState

3. 2 方法

• close()
• createDocumentFragment()
• createElement()
• createTextNode()
• execCommand()
• exitFullscreen()
• getElementById()
• getElementsByClassName()
• getElementsByName()
• getElementsByTagName()
• getSelection()
• hasFocus()
• open()
• registerElement()
• write()
• writeln()
• querySelector()
• querySelectorAll()

4. 不懂就用MDN，不懂就用MDN，不懂就用MDN

5. 虛擬DOM

待續。。。