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 状态码
Day-22 更加灵活的神经网路，我们可以做哪些变化
今天我们来还债 XDD，还之前跳过的很多解释，还有如何更加灵活的调整神经网路 那就让我们一步一步来...
[Day-2] 探索Dev C++
我今天要来记录探索Dev C++的过程 还有C++的基本架构 我所使用的开发环境是Dev C++ 上...
修复：隐藏受保护的作业系统档案选项在资料夹选项中丢失
在Windows中，默认情况下看不到具有隐藏的系统属性档案。即使在「资料夹选项」中启用了「显示档案和...
Python 练习
今天我们也要来解APCS的题目，今天是105年10月29的实作题第三题，那我们就开始吧! 题目 解答...
Day12 Docker File
昨天已经用PostgreSQL做了范例，今天要轮到PHP当主角了，从DockerHub下载下来最原始...