4.3 節點查找(Traversing)

以這個 html 為例：

<p class="para">段落一</p>
<p class="para">段落二</p>

<div id="my_block">
  <h1>h1 標題</h1>
  <ul class="my_list">
    <li><a href="#" class="link">連結二</a></li>
    <li><a href="#" class="link">連結三</a></li>
    <li><a href="#" class="link">連結四</a></li>
  </ul>
  <a href="#" class="link">連結一</a>
</div>

<p class="para">段落三</p>
<p class="para">段落四</p>

往內層找

.querySelector() 與 .querySelectorAll()

往內層找元素，回傳的會是 NodeList，可以使用 .forEach() 函式。

例：

.children

找到第一層的子元素。回傳的會是 HTMLCollection，無法使用 .forEach()函式。

例：

.firstElementChild 與 .lastElementChild

找到第一個子元素、找到最後一個子元素。

例：

找第 n 個子元素

透過 querySelector 往內層找，以及使用 :nth-child()：

var my_block = document.getElementById("my_block");

var nth_child = my_block.querySelector("ul.my_list > li:nth-child(2)");

例：

往同層找

.previousElementSibling

找到同層的前一個元素。

例：

.nextElementSibling

找到同層的下一個元素。

例：

往父層找

.parentElement

找到最近的父元素。

例：

.closest()

往父層找，找到指定的元素。

例：