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()
往父層找,找到指定的元素。
例: