iT邦幫忙

2021 iThome 鐵人賽

DAY 22
1
Modern Web

舌尖上的JS系列 第 22

D22 - 走!去瀏覽器自己挑要吃哪個 node

前言

HTML 的內容在 DOM TREE 上到底怎麼呈現? 今天就來講講樹上的節點有哪些,及要怎麼取得這些節點!

DOM 節點分類

整份 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

光看表格不太理解可以搭配以下圖示,將一段程式碼轉化為節點呈現

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 -->

選取 DOM node 的方法

選取單一個物件
document.getElementById
querySelector

選取多個物件
document.getElementsByTagName
document.getElementsByClassName
querySelectorAll

// 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

到底 HTMLCollection 和 NodeList 差在哪裡呢?

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 開頭,繼續看看第五類到底是什麼狀態

5xx Server Error 伺服器錯誤

代表錯誤發生,且這錯誤發生的原因跟「伺服器」有關。伺服器因為發生錯誤或例外狀況 (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 是什麼時候才會修復好呢 (ಥ_ಥ)

Reference

008天重新認識 JavaScript
JavaScript 技術手冊
What's the Difference between DOM Node and Element?
HTML DOM 方法
MDN - 502
wiki HTTP 狀態碼


上一篇
D21 - 走!去瀏覽器吃 好味雙響 BOM DOM 飯
下一篇
D23 - 走!去瀏覽器用 create & append 加餐
系列文
舌尖上的JS30

尚未有邦友留言

立即登入留言