發現把東西視為理所當然，在更深入的時候就會遇到困難。需要來好好理解 DOM Document。在看 W3School 介紹 HTML DOM 時，有一個觀念會被一直強調。

DOM是一個樹狀模型中，所有東西都是結點（node）。
所有結點分為 ACDET：

1. document 根（document）
2. HTML 元素（element）
3. 屬性 (attribute)
4. 文字（text）
5. 註解（comment）

當 HTML文件被載入瀏覽器的時候，就會產生一個 document 物件做為根節點。而 document 物件 是所有節點的擁有者，並提供屬性跟方法去操控其他結點。

Element object
NodeList object（集合，有序）
Attr object
NamedNodeMap object（集合，沒有順序）
Style Object

思考：
Attr Object 和 Style Object 在哪？結果發現自己總是把CSS 調整的 style 跟 HTML 本身的 attribute 搞懂。Attribute 是跟 HTML 標籤一起出現的，例如我們使用 placeholder 去提示要輸入的訊息。而屬性分為兩種，content（HTML）跟 IDL (JavaScript)，也可以自定屬性。補充資料。內容為更多屬性介紹，作者：PJ

完整的 attribute 列表

說明：
當我們開始操控 JS ，我們會使用 document 的方法，去抓取節點。然後用串接（chain）的方式，進行之後動作。下面的例子，我們選取到的不是單一元素，因為有多個 P tag，行程所謂的 Node list ，再藉由 item 去選取到要針對的元素。

document.getElementsByTagName("P").item(0).innerHTML;

所以排下來的順序大概是這樣的：
Document > Element + NodeList > Attr + NamedNodeMap + style + DOM Events > style

知道順序後，可以開始整理自己習慣的指令跟操作了。