v8 與 dom 的詳細實現，而我們日常開發中在 devtools 看到畫面並不是 dom，而是渲染樹，是 DOM 和 CSSOM 的組合。
1 2 3 4 5 6 7 8
// 前兩行執行後， v8 dom wrapper 與 c++ DOM 的綁定關係就完成 var div = document.createElement("div"); div.innerHTML = "<p><span>foo</span></p>"; // 測試下面程式碼 div.xxx = 123; document.body.appendChild(div); div = null; document.body.lastChild.xxx; // 123
透過生成 Dom 的 api 會建立出映射，並存放在記憶體中，讓我們能夠進行操作，且不會被GC 回收。
由此圖我們可以瞭解，只要建造出映射，就算我們取消記憶體位置指向，映射仍會存在，DOM 仍然可以訪問，**若要取消映射，只能透過 DOM api remove**。
DOM 是 JS 操作頁面的介面，但是 JS 不能直接對 DOM 增刪改查只能透過宿主提供 DOM API 間接操作。
1.JS 夠過與 DOM 的映射關係操作頁面 2.頁面內容的控制 3.表格、表單資料事件 4.監聽各種使用者互動 5.懶加載其他資源 6.組件化、工程化開發複雜的應用
那有哪些可以創建元素，建立映射的方法呢?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
1.Element.innerHTML 2.DOMParser var parser = newDOMParser(); const htmlString = "<strong>Beware of the leopard</strong>"; const doc3 = parser.parseFromString(htmlString, "text/html"); 3.Document.createElementNS document.createElementNS('p','endition') -><endition></endition> 4.Document.createElement 5.Document.write 6.Document.createDocumentFragment DocumentFragments 是 DOM 節點(Nodes)。他們不會成為 DOM主幹的一部份，需要append加入 DOM 樹。 7.Document.createTextNode 建立文字節點 ...
Dom 的組成
標準定義的 DOM 由三大部分構成: 1.節點 2.事件 3.選擇區域(Range AP)
節點(Node)
標籤是 HTML 的基本單位，如:p、div、h1、input 等。 節點是 DOM 的基本單位，一個具有標準結構化模型的文件，有 Element、Text、註解等,共有 12 種節點MDN。
其中 Element <=> HTML 標籤，是互相對應的關係。
1
<h2>hello world!<h2>
h2 是標籤，在 DOM 內部會生成兩個節點。
Element Node:h2
Text Node:”hello world!”
Document 文件 指任何一個結構化的文件： XML Document - 一個 XML 標準模型的文件 HTML Document - 一個 HTML 標準模型的文件 JSON Document - 一個 JSON 標準模型的文件
瀏覽器的 document 對象是一個 DOM wrapper object 綁定整顆 DOM 的根，並掛載於 Global Object 上(如記憶體布局圖)，它們互相繼承(document -> HTMLDocument.prototype -> Document.prototype -> Node.prototype)，並可以往上回溯至 object.prototype。
Element 元素
屬於程式語言中的語義，在 HTML 中叫 Tag、在 CSS 的表現中稱作 盒 Box。 所謂的操作 DOM 就是對 節點 Node 做 增刪改查、監聽、綁事件。
Document.createRange() - Range 物件。(可用來當富文本切割) - var range = document.createRange(); range.setStart(startNode, startOffset); range.setEnd(endNode, endOffset);
Document.caretRangeFromPoint() - var range = document.caretRangeFromPoint(float x, float y); - 返回一个 Range 对象（指定坐标的文档片段）。 ---
Element.insertAdjacentHTML() -insertAdjacentHTML() 把傳入的字串解析成 HTML 或 XML，並把該節點插入到 DOM 樹指定的位置。 -它不會重新解析被使用的元素，因此他不會破壞該元素裡面原有的元素。 - element.insertAdjacentHTML(position, text); - position like top - d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');
Element.insertAdjacentText() - 将一个给定的文本节点插入在相对于被调用的元素给定的位置。 - element.insertAdjacentText(position, element); - position like top - para.insertAdjacentText('afterbegin',textInput.value);
