4.7 DOM 節點查找

以這個 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()

• querySelector()：抓取出找到的第一個。

• querySelectorAll()：抓取出所有符合的。

執行 JS：

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

// 例：querySelectorAll
var sub_all_nodes = my_block.querySelectorAll("a.link");
//console.log(sub_all_nodes);
for(let i = 0; i < sub_all_nodes.length; i++){
  //console.log(i);
  //console.log(sub_all_nodes[i]);
  //sub_all_nodes[i].classList.add("add_border");
}


// 例：querySelector
//var the_node = my_block.querySelector("a.link");
//console.log(the_node);
//the_node.classList.add("add_border");

例：

.children

執行JS：

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

var children_nodes = my_block.children;

//console.log(children_nodes);

for(let i = 0; i < children_nodes.length; i++){
  //console.log(i);
  children_nodes[i].classList.add("add_border");
}

例：

往同層找

.previousElementSibling

找到同層的前一個元素。

執行 JS：

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

var previous_child = my_block.previousElementSibling;
previous_child.classList.add("add_border");

例：

.nextElementSibling

找到同層的下一個元素。

執行 JS：

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

var next_sibling = my_block.nextElementSibling;
next_sibling.classList.add("add_border");

例：

往父層找

.closest()

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

執行 JS：

var my_list = document.getElementsByClassName("my_list")[0];

var my_div = my_list.closest("div#my_block");
my_div.classList.add("add_border");

例：