---
# System prepended metadata

title: 遍歷周邊 DOM 節點
tags: [ALPHACampWeek3]

---

###### tags:`ALPHACampWeek3`

遍歷周邊 DOM 節點
===
抓法
---
![](https://i.imgur.com/sR6MCrw.png)

用.childNodes會抓到空白之小陷阱
---
- 會包括縮排
document.querySelector('table').childNodes

- 不會包括縮排，統一用這個
document.querySelector('table').children[1]

抓表格中的第一欄
---
[用灌籃高手得分版為例](https://codepen.io/ks0dcongra/pen/PoJMGoE)

```javascript=
const rows = document.querySelectorAll('.static-board tbody tr')
for (let i = 0; i < rows.length; i++ ) {
  console.log(rows[i].firstElementChild.innerText) 
}
```
- 以上是查找 tr 的例子，也有可能你直接去抓到表格的第一欄：
```javascript=
const cells = document.querySelectorAll('.static-board tbody tr td:first-child')
for (let i = 0; i < cells.length; i++ ) {
  console.log(cells[i].innerText)
}
```

- ES6 的 forEach，這是 NodeList 唯一支援的迭代器：
```javascript=
document.querySelectorAll('.static-board tbody tr td:first-child').forEach( item => console.log(item.innerText) )
```