HTML 的內容在 DOM TREE 上到底怎麼呈現？ 今天就來講講樹上的節點有哪些，及要怎麼取得這些節點！
整份 HTML 文件中的內容會轉成節點 node，除了 tag 會轉成節點外，空白及註解也各是一種類的節點，可以透過屬性 nodeType 查詢節點的種類，
主要節點分類如下：
| 節點 | 對應數值 | 說明 |
|---|---|---|
| Node.ELEMENT_NODE | 1 | 表示元素的 element 節點（有使用<>包裹的標籤） |
| Node.COMMENT_NODE | 8 | 註解 |
| Node.TEXT_NODE | 3 | 文字字元，包括空白及換行字元 |
| Node.DOCUMENT_NODE | 9 | 文件 Document 節點 |
| Node.DOCUMENT_TYPE_NODE | 10 | 表示文件類型的 DocumentType 節點，例如 HTML5 的 。 |
| Node.PROCESSING_INSTRUCTION_NODE | 7 | XML document such as |
| Node.DOCUMENT_FRAGMENT_NODE | 11 | A DocumentFragment node |
光看表格不太理解可以搭配以下圖示，將一段程式碼轉化為節點呈現
parentNode：取得父節點firstChild：第一個子節點lastChild：最後一個子節點previousSibling：前一個兄弟節點nextSibling：下一個兄弟節點childNodes：所有子節點
// body 標籤的父節點為 html tag
document.body.parentNode // <html>...</html>
document.body.parentNode.nodeType === Node.ELEMENT_NODE // htmltag 為 ELEMENT_NODE
// body 標籤的上一個兄弟節點為 head
// 由於中間有空白字元也算一個節點，因此使用兩次的 previousSibling
document.body.previousSibling.previousSibling // <head>...</head>
// body 標籤的第一個子節點為空白字元
// comment node 為第一個空白字元的下一個兄弟節點
document.body.firstChild.nextSibling // <!-- Page Body -->
選取單一個物件document.getElementByIdquerySelector
選取多個物件document.getElementsByTagNamedocument.getElementsByClassNamequerySelectorAll
// getElementById
let paragraph = document.getElementById('p')
paragraph.textContent = '完賽倒數9天'
// getElementsByTagName
// 回傳 HTMLCollection
let divCollection = document.getElementsByTagName('div')
divCollection[0].textContent // 第一個div
// document.getElementsByClassName
// 回傳 HTMLCollection
let divCollection2 = document.getElementsByClassName('content')
divCollection2[1].textContent // 第二個div
// document.querySelector
// querySelector 返回第一個符合的元素
let firstDiv = document.querySelector('div')
firstDiv.textContent // 第一個div
// document.querySelector
// nodeList
let divList = document.querySelectorAll('div')
divList[0] // 第一個div
NodeList：節點的集合，可以包含元素和其他節點，如：comment node 、 text node 等。
HTMLCollection：元素集合，只有 Element node。
| 相同 | 不同 |
|---|---|
| 都是類陣列物件 ， 都有length屬性 都有元素的getter，叫做item | NodeList的元素是Node， HTMLCollection的元素是Element。 |
本來今天想透過 codepen 的實作來帶入取元素的過程，結果今天codepen 居然 掛 掉 惹 ！
為什麼要這樣對我～～～ ༼ ༎ຶ ෴ ༎ຶ༽
桑心崩潰憂傷難過之餘，順便來學習一下 status code 的知識吧👍👍👍（振作好快，拍拍）
從 codepen 掛掉的頁面顯示為，Error 502 Bad Gateway，這是什麼意思呢？
網頁上的這三個數字，其實正確名稱為 HTTP Status Code，指 網頁伺服器超文字傳輸協定 回應狀態的 3 位數字代碼，簡單一點說就是，登入網頁時，瀏覽器會向 server 發訊息請求資源，HTTP Status Code 就是 server 的反饋消息，而這些消息的號碼被分為五類，根據三位數字的第 1 碼可以判定是屬於哪一類。
RFC 2616 所定義的 HTTP/1.1 中，五類狀態碼分別為：
- 1xx Informationa - 參考資訊
- 2xx Successful - 成功
- 3xx Redirection - 重新導向
- 4xx Client Error - 用戶端錯誤
- 5xx Server Error - 伺服器錯誤
而這次 codepen 的 502 error code 就是屬於伺服器錯誤的 5 開頭，繼續看看第五類到底是什麼狀態
代表錯誤發生，且這錯誤發生的原因跟「伺服器」有關。伺服器因為發生錯誤或例外狀況 (Exception) 而無法完成要求 (Request) 時，就會回應 5xx 的錯誤。
500 Internal Server Error - 內部伺服器錯誤。501 Not Implemented – 標頭值指定未實作的設定。502 Bad Gateway - Web 伺服器在作為閘道器或者代理工作的伺服器嘗試執行請求時，從上游伺服器接收到無效的回應。503 Service Unavailable - 服務無法使用。 這是 IIS 6.0 專用的錯誤碼。504 Gateway Timeout - 閘道逾時。505 HTTP Version Not Supported - 不支援的 HTTP 版本。
原來如此，長知識了呢！
但重點是， codepen 是什麼時候才會修復好呢 (ಥ_ಥ)
008天重新認識 JavaScript
JavaScript 技術手冊
What's the Difference between DOM Node and Element?
HTML DOM 方法
MDN - 502
wiki HTTP 狀態碼
iThome鐵人賽
看影片追技術