---
# System prepended metadata

title: 第五週課程重點筆記
tags: [秋季班, JS 課程重點筆記, JS直播班, 六角學院, '2021']

---

# 第五週課程重點筆記
###### tags: `JS 課程重點筆記` `2021` `JS直播班` `秋季班` `六角學院`

## :mag_right: DOM (Document Object Model)

![](https://i.imgur.com/CgkEaB2.png)




### :one: Document 物件
網頁本身就是一個很大包的物件，裡面有各種屬性。

### :two: 選取 Document 物件內的標籤 ( 用 JS 選取 )
document.querySelector("h1")

### :three: 把 JS 傳送到畫面上
- .textContent：只會修正**文字節點(text)**，不會更動 element(元素標籤)
- .innterHTML：更動 html 標籤

----

## :mag_right: forEach ( 遍歷，陣列資料處理方法 )


### 陣列有幾筆資料，function 就跑幾次

- 基本結構：

```javascript=

let data = [10, 20, 30, 40]

data.forEach(function(value, index, array){
    console.log(value, index, array)
})

```

- function 跑完後，{ } **內部記憶體就會清空、歸零**。

```javascript=
let array = [2, 3, 5]

array.forEach(function(item){
    
    let total = 0;
    total += item;
    console.log(total) //2, 3, 5
    
})


```

- forEach 參數對應的資訊：

|                 | 參數對應的資訊       |        值        |
| --------------- | -------------------- |:----------------:|
| **value, item** | 陣列中個別的值       |  10, 20, 30, 40  |
| **index**       | 這是陣列的第幾筆資料 |    0, 1, 2, 3    |
| **array**       | 陣列的全貌           | [10, 20, 30, 40] |

## :mag_right: forEach 篩選資料
### 搭配 if 判斷式，可進行篩選資料的工作

### forEach 組新資料
- 透過 forEach 迴圈可以逐筆帶入資料
- forEach 將每一筆資料都過濾簡化，組成 item


