DOM 冷知識－在一個範圍內找出元素

這個真的不知道。

簡述

原本以為元素都只能這樣子找：

<div class="block">
  <input type="text">
</div>

<div class="block">
  <input type="text">
</div>

<div class="block">
  <input type="text">
</div>

<div class="block">
  <input type="text">
</div>

JavaScript：

const input1 = document.querySelectorAll('input[type=text]')[0]
const input2 = document.querySelectorAll('input[type=text]')[1]
const input3 = document.querySelectorAll('input[type=text]')[2]
const input4 = document.querySelectorAll('input[type=text]')[3]

console.log(input1)
console.log(input2)
console.log(input3)
console.log(input4)

其實可以把範圍縮小

這樣子做其實也可以：

// 取得所有 .block 元素
const blocks = document.querySelectorAll('.block')
// 遍歷每個 .block 元素
// （注意是 Array-like-object 所以才能用 for..of）
for (let block of blocks) {
  console.log(block.querySelector('input[type=text]')) 
}

這樣子的搜索範圍就會是：

• blocks[0] 下面的第一個 <input>
• blocks[1] 下面的第一個 <input>
• blocks[2] 下面的第一個 <input>
• 以此類推

所以其實你平常用 document.querySelector 的意思是「document 下面的第一個 <input>」

這是一個仔細想想會覺得很合理，但平常卻都沒發現的事情，太有趣了！