在瀏覽器執行Javascript的時候，其中一個就是DOM，DOM的全名叫做文檔物件模型（Document Object Model），它將HTML的元素轉換成一個個的物件和節點（node），節點形成樹狀的結構，但要注意不同類型的內容會變成不同的節點，像元素會變成元素節點，而文字是文字節點，包含註釋也會變成一個節點。
DOM tree會以Document為根部，接著發展其他節點：
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div id="box1">First Box</div>
<div id="box2">Second Box</div>
</body>
</html>
window是一個內建的全域變數，也是一個物件，但這個全域的物件依照環境而定，像是在Node.js中是以global來稱全域。
window物件包含一個屬性，就是上面所指的Document物件。如果使用window.document或者document，就可以看到HTML結構。
比如說我使用about:blank打開空白頁，在DevTools輸出document。點開來就只有構成HTML網頁最基本的架構：
接下來是有在MDN看到DOM interface，讓我好奇在這裡的interface到底是什麽：瀏覽器提供Web API，讓我們可以用比較簡單的方式去執行複雜的功能，今天的主題DOM就是其中一個用來控制HTML或CSS的API。而Web API都是基於object去建立的。
每一個API都有一個或多個interface，代表這些物件的方法跟屬性，所以DOM會有一些DOM interface，去達成我們的需求，例如在Document這個interface，有很多可以使用的方法。
DOM的節點本身是物件，再來會內建一些方法跟屬性，如果有事件的話，則會產生一個event target（事件目標）繼承物件，往下還會有node去繼承，繼承的順序如下：
內建物件←event target（事件目標）←Node（節點）←Element（元素）←HTMLElement（HTML元素）…
讓我們打開看text node的資訊，最下面有個[[prototype]]，往上會是CharacterData、Node、EventTarget…
總共有十二種節點，這些節點的繼承不是一條線的，只是不同節點最後都會指向Node及EventTarget這兩個[[prototype]]。
我之前一直有個誤會。
<ul class = "data">
<li>hotpotFlavor:<i>Spicy Sichuan</i></li>
<li>hotpotIngredients:<i>Beef slices, Tofu, Enoki mushrooms, Napa cabbage</i></li>
<li>beveragePairing:<i>Jasmine tea</i></li>
</ul>
假設有這樣的結構，並且對<ul>選取子代的node，會有一組Nodelist。
Nodelist的內容是這樣的：
我一度以為是text是<li>的內容，後來才意識這是不合理的，因為回過頭看上面提供的資料，在textContent中寫的是：\n ，而不是像hotpotFlavor的文字。
在Node: firstChild property範例中，下文也提到一樣的事情。
Where does HTML DOM start? window? document? document.defaultView?
iThome鐵人賽
看影片追技術