前言

今天來先聊聊該如何選取節點吧！

怎麼做才能選取出節點呢?

找尋需要的DOM元素主要有兩種方法：

1. 直接搜尋並選取出該需要的節點：

   // 選出一個class是title的節點
   document.querySelector('.title')
   

2. 採用遍歷的方式選取，即先透過某個特定節點，在藉由這個節點順著樹狀結構的路徑來找出週邊的其他節點：

   // 透過class是title的節點來找到他的下一個元素是什麼
   document.querySelector('.title').nextElementSibling
   

這樣光看語法可能會產生很多的問號，那麼現在就來說明一下DOM選取節點的語法吧！

第一種方法，直接選取出需要的節點：
DOM在選取節點上的語法很靈活且非常多種，目前最常被使用的應該是querySelector，看上面的語法會發現querySelector括號內的語法好像很眼熟，沒錯，那正是CSS選擇器的寫法，也就是告訴我們querySelector是使用特定的CSS選擇器來尋找需要的節點。

而當我們需要選取的節點並非只有一個時(像是有序或無序列表中的li通常不會存在好幾個)，如果還是使用querySelector會發現它僅會選取出眾多個節點中的第一個，若是想取出所有節點則需使用querySelectorAll來選取出所有目標節點：

// 選取出所有li節點
document.querySelectorAll('li')

這時候會發現它會回傳一個NodeList，要留意的地方在於NodeList雖然看以來和JS裡的陣列很像，但它並不完全等同於陣列，只能說它是類似陣列，它能進行的操作也不如JS裡的陣列靈活，僅能進行簡單的查看長度length、遍歷內容forEach及使用index來存取特定項目。

除了querySelector系列外，另外比較常使用應該是getElementBy系列，它和querySelector不同除了在於選取的方式是採用字串來搜尋外，最大的不同是在於querySelector選取出的節點是靜態的，而getElementBy選取出的節點則是動態的，這是什麼意思呢?簡單來說，getElementBy系列有點像會自動更新的感覺，當選取出某個節點時，該節點內的內容如果有變動，getElementBy系列也會跟著變化，但querySelector則是選取出當下的節點內容，即使之後內容有所變動，除非再重新選取否則並不會跟著變化。

第二種方法，採用遍歷的方式選取：
我們知道DOM是採用樹狀結構的方式來呈現，而在這種結構裡可以藉由橫向的兄弟關係或縱向的父子關係來找尋需要的節點，而這個方法中常用的語法：

// 選取出.title節點的父節點
document.querySelector('.title').parentElement

// 選取出.title節點上一個節點(可以當作找到哥哥或姐姐)
document.querySelector('.title').previousElementSibling

// 選取出.title節點下一個節點(可以當作找到弟弟或妹妹)
document.querySelector('.title').nextElementSibling

// 選取出.title節點的第一個子節點
document.querySelector('.title').firstElementChild

// 選取出.title節點的最後一個子節點
document.querySelector('.title').lastElementChild

// 選取出.title節點中的所有子節點(找出孩子們)
document.querySelector('.title').children

雖然上面都只有使用一段遍歷的方式來展現語法，但實際上是可以接續著繼續找哦，例如：

// 先選取出.title節點的父節點再往下找到父節點下的第一個子節點
document.querySelector('.title').parentElement.firstElementChild